npm:
npm install live-editor
yarn:
yarn add live-editor
const { startServer } = require('live-editor/server');
// ref: node_modules/live-editor/config/server.json
const options = {
enableFakeTokenApi: true, // enable fake token api only in test environment
};
startServer(options); // default port: 9000
import {
createEditorPromise,
AuthMessage,
} from 'live-editor/client';
// Don't change this for demo.
const AppId = '_LC1xOdRp';
// Editor service server address
const WsServerUrl = `ws://localhost:9000`;
// create a random editor user
// user id and display name is needed by editor service
const user = {
userId: `${new Date().valueOf()}`,
displayName: 'test user',
};
// editor options
const options = {
serverUrl: WsServerUrl,
user,
};
// get a editor service token.
async function fakeGetAccessTokenFromServer(userId: string, docId: string): Promise<string> {
const res = await fetch(`http://localhost:9000/token/${AppId}/${docId}/${userId}`);
const ret = await res.json();
return ret.token;
}
// document id
const docId = 'my-test-doc-id-simple';
(async function loadDocument() {
// get an editor access token. Web Apps should get this token from your own server
const token = await fakeGetAccessTokenFromServer(user.userId, docId);
// editor auth data
const auth: AuthMessage = {
appId: AppId,
userId: user.userId,
docId,
token,
permission: 'w',
};
// create editor and load document
const editor = await createEditorPromise(document.getElementById('editor') as HTMLElement, options, auth);
console.log(editor);
})();
Real-Time co-editing.
- heading
- list (ordered / unordered)
- checkbox
- quoted text
- text color and background color.
- bold, italic, underline, strikethrough.
- any custom style (any css style).
- Link
- Latex equations
- Mentions
- Custom inline object
- Comment (Add comment to any text)
- Image, Video, Audio
- Table
- Webpage (YouTube videos, etc.)
- Flowchart, Sequence Diagram, Class Diagram, etc. (mermaid)
- Diagram (drawio)
- Layout
- Chart (by Chart.js)
- locked / unlocked
- marker highlighter
- support markdown syntax
- support offline mode (editor server is not needed)
- support markdown-only mode (only support markdown features)
- import / export markdown
- export html
- import docx files
- support focus & typewriter mode
- display list as MindMap