Options

Some options are available when making new instances like below.

const editor = new LiteEditor('.js-editor', {
    nl2br: false
});

These are the option.

const editor = new LiteEditor('.js-editor', {
  mode: 'html',
  classNames: {
    LiteEditor: 'lite-editor',
    LiteEditorSource: 'lite-editor-source',
    LiteEditorBtn: 'lite-editor-btn',
    LiteEditorBtnClose: 'lite-editor-btn-close',
    LiteEditorBtnActive: 'lite-editor-btn-active',
    LiteEditorBtnGroup: 'lite-editor-btn-group',
    LiteEditorBtnGroupWrap: 'lite-editor-btn-group-wrap',
    LiteEditorBtnGroupWrapRight: 'lite-editor-btn-group-wrap-right',
    LiteEditorBtnCloseWrap: 'lite-editor-btn-close-wrap',
    LiteEditorBtnCloseLabel: 'lite-editor-btn-close-label',
    LiteEditorSelect: 'lite-editor-select',
    LiteEditorSelectWrap: 'lite-editor-select-wrap',
    LiteEditorToolBox: 'lite-editor-toolbox',
    LiteEditorLinkDialog: 'lite-editor-link-dialog lite-editor-tooltip',
    LiteEditorLinkDialogTable: 'lite-editor-link-dialog-table lite-editor-tooltip-table',
    LiteEditorLinkDialogTitle: 'lite-editor-link-dialog-title lite-editor-tooltip-title',
    LiteEditorLinkDialogBody: 'lite-editor-link-dialog-body lite-editor-tooltip-body',
    LiteEditorLinkDialogInput: 'lite-editor-link-dialog-input lite-editor-tooltip-input',
    LiteEditorExtendInput: 'lite-editor-extend-input',
    LiteEditorFontLink: 'lite-editor-font-link',
    LiteEditorFontRemove: 'lite-editor-font-remove',
    LiteEditorFontUpdate: 'lite-editor-font-update',
    LiteEditorFontClose: 'lite-editor-font-close',
    LiteEditorFontSource: 'lite-editor-font-source',
    LiteEditorFontAbc: 'lite-editor-font-abc'
  },
  message: {
    addLinkTitle: 'link',
    updateLinkTitle: 'link',
    addLink: 'add',
    updateLink: 'update',
    removeLink: 'remove',
    linkUrl: 'URL',
    linkLabel: 'label',
    closeLabel: 'close',
    targetBlank: 'target',
    targetBlankLabel: 'Opens the linked page in a new window or tab'
  },
  voidElements: [
    'area', 'base', 'basefont', 'bgsound', 'br', 'col', 'command', 'embed',
    'frame', 'hr', 'image', 'img', 'input', 'isindex', 'keygen', 'link',
    'menuitem', 'meta', 'nextid', 'param', 'source', 'track', 'wbr'
  ],
  minHeight: 50,
  maxHeight: 400,
  decodeSource: false,
  sourceFirst: false,
  escapeNotRegisteredTags: false,
  preserveSpace: false,
  nl2br: true,
  source: true,
  selectOptions: [],
  selectedOption: '',
  btnOptions: defaultbtnOptions,
  btnPosition: 'top',
  relAttrForTargetBlank: 'noopener noreferrer'
});

mode

html (default) or markdown. In markdown mode, inserted HTML is converted to Markdown before being written to the source.

minHeight

minheight of the editor

maxHeight

maxheight of the editor

decodeSource

When true, HTML entities (such as &) in the source output are decoded back to their original characters.

sourceFirst

Show source first when the editor is created

escapeNotRegisteredTags

When inserting the html and the tag is not registered as a button, it will be escaped.

preserveSpace

When true, half-width spaces in the initial value are kept as   instead of being collapsed.

nl2br

Convert linebreaks to <br> tags

source

If you want to show the original textarea source, set it true.

selectOptions

Adds a dropdown to the toolbar. Each item takes the form { value, label, onSelect, extendLabel }; onSelect(editor) is called when the item is selected, and extendLabel shows an extra text input next to the dropdown.

selectedOption

The initially selected value of selectOptions. When omitted, the first option is selected.

btnOptions

You can make the original buttons for the editor with this option.

btnPosition

You can change the place of buttons. top or bottom

voidElements

A list of self-closing (void) HTML tag names. Tags in this list are inserted as text<tag> instead of <tag>text</tag>.

classNames

From here, you can change the classnames of the editor.

message

Sometimes, you may want to change some labels of the editor, Suppose that the user of the editor is Japanese, You can make editor Japanese from here. targetBlank and targetBlankLabel are the label and description of the "open in a new tab" checkbox in the link dialog.

relAttrForTargetBlank

The rel attribute value added to a link when "open in a new tab" (message.targetBlank) is checked. Defaults to noopener noreferrer for security.