Lake

Editor config ​

You can customize the editor by passing configuration options to the Editor class.

Example:

js
const toolbar = new Toolbar({
  root: '.my-toolbar',
});
new Editor({
  root: '.my-content',
  toolbar,
  value: '<p><br /></p>',
  spellcheck: false,
  tabIndex: 0,
  placeholder: 'Add your comment here...',
  indentWithTab: true,
  lang: 'en-US',
  minChangeSize: 5,
  historySize: 100,
  slash: false,
  mention: false,
});

TIP

You can disable a plugin by setting it to false. For example, setting the mention to false will prevent the pop-up menu for mention from being displayed.

root ​

An element to which the editor is appended.

CSS selector:

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

DOM element:

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

Nodes:

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

toolbar ​

A Toolbar object. If not given, the editor will be rendered without toolbar. For more details, see the Toolbar config page.

Example:

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

value ​

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

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

Example:

js
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 ​

The readonly defines 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 mode example to see how it displays.

  • Type: boolean
  • Default: false

Example:

js
new Editor({
  readonly: true,
});

spellcheck ​

The spellcheck defines whether the editor is checked for spelling errors. For more details on spellcheck, refer to the MDN page.

  • Type: boolean
  • Default: false

Example:

js
new Editor({
  spellcheck: true,
});

tabIndex ​

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

  • Type: number
  • Default: 0

Example:

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

placeholder ​

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

  • Type: string

Example:

js
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:

js
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:

js
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:

js
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:

js
new Editor({
  historySize: 200,
});

slash ​

items ​

The items of the slash commands.

  • Type: (string | SlashItem)[]
  • Default:
js
[
  'heading1',
  'heading2',
  'heading3',
  'heading4',
  'heading5',
  'heading6',
  'paragraph',
  'blockQuote',
  'numberedList',
  'bulletedList',
  'checklist',
  'table',
  'infoAlert',
  'tipAlert',
  'warningAlert',
  'dangerAlert',
  'hr',
];

Example:

js
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

infoAlert

tipAlert

warningAlert

dangerAlert

hr

codeBlock

video

equation

image

file

image ​

requestAction ​

The request URL for uploading image.

  • Type: URL

Its response data should follow the following format:

json
{
  "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:

js
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:

json
{
  "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:
js
[
  '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:

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

codeBlock ​

langList ​

The language types for the dropdown.

  • Type: string[]
  • Default:
js
[
  '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:

js
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:

json
{
  "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:
js
(value: MentionItem) => `/${value.name}`

Example:

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

Released under the MIT License.

Copyright © 2024-present Luo Longhao