roosterjs-editor-api

import { createEditor } from 'roosterjs'; // Assuming createEditor from the v9 facade for simplicity, v8 had similar setup import { toggleBold, insertNode, IEditor } from 'roosterjs-editor-api'; // Legacy v8 API functions and interface const editorDiv = document.createElement('div'); editorDiv.id = 'editor-container-v8'; document.body.appendChild(editorDiv); // In a real v8 application, an IEditor instance would be created like: // import { Editor } from 'roosterjs-editor-core'; // const editor = new Editor(editorDiv, { initialContent: '<p>Initial content</p>' }); // For this quickstart, we'll use a mock IEditor to demonstrate API calls. // A mock IEditor instance conforming to the legacy roosterjs-editor-api.IEditor const mockEditor: IEditor = { getElement: () => editorDiv, focus: () => { console.log('Mock Editor focused'); editorDiv.focus(); }, addContent: (content: string) => { editorDiv.innerHTML += content; console.log(`Mock Editor received content: ${content}`); }, // ... many other IEditor methods would be present in a real v8 editor instance // We cast to 'any' to avoid implementing the entire large IEditor interface for this demo } as any; console.log('--- RoosterJs Editor API (v8) Quickstart ---'); console.log('Note: This demonstrates legacy v8 API usage. For new projects, use v9+ Content Model APIs.'); // Focus the mock editor mockEditor.focus(); // Use API functions from roosterjs-editor-api on the mock editor instance mockEditor.addContent('This is some '); toggleBold(mockEditor); mockEditor.addContent('bold text'); toggleBold(mockEditor); // Toggle bold off mockEditor.addContent(' and some '); const italicNode = document.createElement('i'); italicNode.textContent = 'italic text.'; insertNode(mockEditor, italicNode); console.log('Final content in mock editor div:', editorDiv.innerHTML); // Clean up for demonstration document.body.removeChild(editorDiv);