Editor configuration

You can configure the editor using the parameter of the Editor class.

Example:

const editor = new Editor({
  root: '.my-content',
  value: '<p>This is a paragraph.</p>',
});
editor.render();

root

An element to which the editor is appended.

• Type: CSS selector | DOM element

CSS selector:

new Editor({
  root: '.my-content',
});

DOM element:

new Editor({
  root: document.querySelector('.my-content'),
});

toolbar

An toolbar object. If not given, the editor will be rendered without toolbar. For more information about toolbar, see Toolbar configuration.

• Type: Toolbar

Example:

const toolbar = new Toolbar({
  root: '.my-toolbar',
});
new Editor({
  toolbar,
});

value

The default content of the editor. The format is Lake Markup Language (LML) similar to HTML.

• Type: string
• Default: <p><br /></p>

Example:

const defaultValue = `
  <h1>title</h1>
  <p>content<focus /></p>
  <p><lake-box type="inline" name="image" value="..."></lake-box></p>
`;
new Editor({
  value: defaultValue,
});

readonly

Whether the editor is in read-only mode. Setting it to true can be used to display the content in the view page. You can visit the read-only example to see how it displays.

• Type: boolean
• Default: false

Example:

new Editor({
  readonly: true,
});

spellcheck

Whether the editor is checked for spelling errors. For more details on spellcheck, refer to MDN.

• Type: boolean
• Default: false

Example:

new Editor({
  spellcheck: true,
});

tabIndex

The tab order of the editor. For more details on tabIndex, refer to MDN.

• Type: number
• Default: 0

Example:

new Editor({
  tabIndex: -1,
});

placeholder

The text displayed in the editor when the editor has no content.

• Type: string

Example:

new Editor({
  placeholder: 'Add your comment here...',
});

indentWithTab

The indentWithTab defines whether the content can be indented by Tab key. When the value is false, you can use Tab or Shift-Tab to move the focus. The comment box example demonstrates how it works.

• Type: boolean
• Default: true

Example:

new Editor({
  indentWithTab: false,
});

lang

The lang defines the language in which the UI should be displayed. You can visit the internationalization example to see how it displays.

• Type: 'en-US' | 'zh-CN' | 'ko' | 'ja'
• Default: en-US

Example:

new Editor({
  lang: 'zh-CN',
});

minChangeSize

The minimum length of the text for saving history. If the inputted text is shorter than the minChangeSize, the history will not be saved until the length reaches or exceeds this threshold.

• Type: number
• Default: 5

Example:

new Editor({
  minChangeSize: 10,
});

historySize

The maximum length of the history. When this threshold is reached, the earliest item in the history will be removed.

• Type: number
• Default: 100

Example:

new Editor({
  historySize: 200,
});

slash

items

The items of the slash commands.

• Type: (string | SlashItem)[]
• Default:

[
  'heading1',
  'heading2',
  'heading3',
  'heading4',
  'heading5',
  'heading6',
  'paragraph',
  'blockQuote',
  'numberedList',
  'bulletedList',
  'checklist',
  'table',
  'hr',
];

Example:

new Editor({
  slash: [
    'image',
    'heading1',
    'paragraph',
    'blockQuote',
    'numberedList',
    'bulletedList',
    'checklist',
    'table',
    'hr',
  ],
});

The following items are currently available.

heading1

heading2

heading3

heading4

heading5

heading6

paragraph

blockQuote

numberedList

bulletedList

checklist

table

hr

codeBlock

video

equation

image

file

image

requestAction

The request URL for uploading image.

• Type: URL

Its response data should follow the following format:

{
  "url": "http://example.com/foo.png"
}

requestMethod

The request method for uploading image.

• Type: 'POST' | 'PUT' | 'PATCH'
• Default: POST

requestTypes

The MIME types allowed for uploading image.

• Type: string[]
• Default: ['image/gif', 'image/jpeg', 'image/png', 'image/svg+xml']

Example:

new Editor({
  image: {
    requestMethod: 'POST',
    requestAction: '/upload',
    requestTypes: ['image/gif', 'image/jpeg', 'image/png'],
  },
});

file

requestAction

The request URL for uploading file.

• Type: URL

Its response data should follow the following format:

{
  "url": "http://example.com/foo.pdf"
}

requestMethod

The request method for uploading file.

• Type: 'POST' | 'PUT' | 'PATCH'
• Default: POST

requestTypes

The MIME types allowed for uploading file.

• Type: string[]
• Default:

[
  'application/zip',
  'application/x-zip-compressed',
  'application/vnd.rar',
  'image/gif',
  'image/jpeg',
  'image/png',
  'image/svg+xml',
  'text/plain',
  'text/html',
  'application/pdf',
  'application/msword',
  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
  'application/vnd.ms-excel',
  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  'application/vnd.ms-powerpoint',
  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
]

Example:

new Editor({
  image: {
    requestMethod: 'POST',
    requestAction: '/upload',
    requestTypes: ['application/zip', 'application/pdf'],
  },
});

codeBlock

langList

The language types for the dropdown.

• Type: string[]
• Default:

[
  'text',
  'c',
  'csharp',
  'cpp',
  'css',
  'go',
  'html',
  'java',
  'javascript',
  'json',
  'markdown',
  'php',
  'python',
  'rust',
  'sql',
  'typescript',
  'xml',
  'yaml',
]

defaultLang

The default language type.

• Type: string
• Default: text

Example:

new Editor({
  codeBlock: {
    langList: ['text', 'html', 'css', 'javascript'],
    defaultLang: 'javascript',
  },
});

mention

requestAction

The request URL for getting user list.

• Type: URL

Its response data should follow the following format:

{
  "data": [
    {
      "id": "1",
      "name": "foo",
      "nickname": "Foo",
      "avatar": "<img src=\"/images/foo.png\" />"
    },
    {
      "id": "2",
      "name": "bar",
      "nickname": "Bar",
      "avatar": "<img src=\"/images/bar.png\" />"
    }
  ]
}

requestMethod

The request method for getting user list.

• Type: 'GET' | 'POST' | 'PUT' | 'PATCH'
• Default: GET

getProfileUrl

A function that returns a URL to visit the user profile.

• Type: function
• Default:

(value: MentionItem) => `/${value.name}`

Example:

new Editor({
  mention: {
    requestMethod: 'GET',
    requestAction: '/mention/list',
    getProfileUrl: value => `/user/${value.id}`
  },
});