Default Editor's Configuration

Hierarchy

  • Config

Implements

Properties

activeButtonsInReadOnly addNewLine addNewLineDeltaShow addNewLineOnDBLClick addNewLineTagsTriggers allowCommandsInReadOnly allowResizeTags allowResizeX allowResizeY allowTabNavigation askBeforePasteFromWord askBeforePasteHTML autofocus basePath? beautifyHTML beautifyHTMLCDNUrlsJS buttons buttonsMD buttonsSM buttonsXS className cleanHTML colorPickerDefaultTab colors commandToHotkeys containerStyle controls countHTMLChars createAttributes cursorAfterAutofocus debugLanguage defaultActionOnPaste defaultActionOnPasteFromWord defaultAjaxOptions defaultFontSizePoints defaultLineHeight defaultMode defaultTimeout delete dialog direction disablePlugins disabled draggableTags dtd editHTMLDocumentMode editorClassName editorCssClass enableDragAndDropFileToEditor enter enterBlock events extraButtons extraIcons extraPlugins filebrowser fullsize globalFullSize height hidePoweredByJodit history i18n iframe iframeBaseUrl iframeCSSLinks iframeDefaultSrc iframeDoctype iframeStyle iframeTitle image imageDefaultWidth imageProcessor imageeditor indentMargin inline language license limitChars limitHTML limitWords link maxHeight maxWidth mediaBlocks mediaFakeTag mediaInFakeBlock memorizeChoiceWhenPasteFragment minHeight minWidth mobileTapTimeout namespace nl2brInPlainText observer ownerDocument ownerWindow pasteFromWordActionList pasteHTMLActionList placeholder popup preset presets processPasteFromWord processPasteHTML readonly removeButtons resizer safeMode safePluginsList saveHeightInStorage saveModeInStorage saveSelectionOnBlur search select shadowRoot showBrowserColorPicker showCharsCounter showPlaceholder showTooltip showTooltipDelay showWordsCounter showXPathInStatusbar sizeLG sizeMD sizeSM sourceEditor sourceEditorCDNUrlsJS sourceEditorNativeOptions specialCharacters spellcheck statusbar style styleValues tab tabIndex table tableAllowCellResize tableAllowCellSelection textIcons theme toolbar toolbarAdaptive toolbarButtonSize toolbarDisableStickyForMobile toolbarInline toolbarInlineDisableFor toolbarInlineDisabledButtons toolbarInlineForSelection toolbarSticky toolbarStickyOffset triggerChangeEvent uploader useInputsPlaceholder useNativeTooltip usePopupForSpecialCharacters useSearch useSplitMode width wrapNodes zIndex

Constructors

Accessors

Properties

activeButtonsInReadOnly: string[] = ...
addNewLine: boolean

Create helper

addNewLineDeltaShow: number

Absolute delta between cursor position and edge(top or bottom) of element when show line

addNewLineOnDBLClick: boolean

On dbl click on empty space of editor it add new P element

Example

Jodit.make('#editor', {
addNewLineOnDBLClick: false // disable
})
addNewLineTagsTriggers: (keyof HTMLElementTagNameMap)[]

What kind of tags it will be impact

allowCommandsInReadOnly: string[] = ...
allowResizeTags: (keyof HTMLElementTagNameMap)[]

Use true frame for editing iframe size

allowResizeX: boolean
allowResizeY: boolean
allowTabNavigation: boolean = false

Allow navigation in the toolbar of the editor by Tab key

askBeforePasteFromWord: boolean

Show the paste dialog if the html is similar to what MSWord gives when copying.

askBeforePasteHTML: boolean

Ask before paste HTML in WYSIWYG mode

autofocus: boolean
basePath?: string

Base path for download extra plugins

beautifyHTML: boolean

Beautify HTML then it possible

beautifyHTMLCDNUrlsJS: string[]

CDN URLs for HTML Beautifier

buttons: ButtonsOption = ...

The list of buttons that appear in the editor's toolbar on large places (≥ options.sizeLG). Note - this is not the width of the device, the width of the editor

Example

Jodit.make('#editor', {
buttons: ['bold', 'italic', 'source'],
buttonsMD: ['bold', 'italic'],
buttonsXS: ['bold', 'fullsize'],
});

Example

Jodit.make('#editor2', {
buttons: [{
name: 'empty',
icon: 'source',
exec: function (editor) {
const dialog = new Jodit.modules.Dialog({}),
text = editor.c.element('textarea');

dialog.setHeader('Source code');
dialog.setContent(text);
dialog.setSize(400, 300);

Jodit.modules.Helpers.css(elm, {
width: '100%',
height: '100%'
})

dialog.open();
}
}]
});

Example

Jodit.make('#editor2', {
buttons: Jodit.defaultOptions.buttons.concat([{
name: 'listsss',
iconURL: 'stuf/dummy.png',
list: {
h1: 'insert Header 1',
h2: 'insert Header 2',
clear: 'Empty editor',
},
exec: ({originalEvent, control, btn}) => {
var key = control.args[0],
value = control.args[1];
if (key === 'clear') {
this.val('');
return;
}
this.s.insertNode(this.c.element(key, ''));
this.e.fire('errorMessage', 'Was inserted ' + value);
},
template: function (key, value) {
return '<div>' + value + '</div>';
}
});
buttonsMD: ButtonsOption = ...

The list of buttons that appear in the editor's toolbar on medium places (≥ options.sizeMD).

buttonsSM: ButtonsOption = ...

The list of buttons that appear in the editor's toolbar on small places (≥ options.sizeSM).

buttonsXS: ButtonsOption = ...

The list of buttons that appear in the editor's toolbar on extra small places (< options.sizeSM).

className: string | false = false

Class name that can be appended to the main editor container

Example

const jodit = Jodit.make('#editor', {
className: 'some_my_class'
});

console.log(jodit.container.classList.contains('some_my_class')); // true
<style>
.some_my_class {
max-width: 600px;
margin: 0 auto;
}
</style>
cleanHTML: {
    allowTags: string | false | IDictionary<string, string>;
    denyTags: string | false | IDictionary<string, string>;
    disableCleanFilter: Nullable<Set<string>>;
    fillEmptyParagraph: boolean;
    removeEmptyElements: boolean;
    removeOnError: boolean;
    replaceNBSP: boolean;
    replaceOldTags: false | IDictionary<keyof HTMLElementTagNameMap, string>;
    safeJavaScriptLink: boolean;
    timeout: number;
    useIframeSandbox: boolean;
}

Type declaration

  • allowTags: string | false | IDictionary<string, string>

    The allowTags option defines which elements will remain in the edited text when the editor saves. You can use this limit the returned HTML.

    Example

    const jodit = new Jodit.make('#editor', {
    cleanHTML: {
    cleanOnPaste: false
    }
    });

    Example

    const editor = Jodit.make('#editor', {
    cleanHTML: {
    allowTags: 'p,a[href],table,tr,td, img[src=1.png]' // allow only <p>,<a>,<table>,<tr>,<td>,<img> tags and
    for <a> allow only `href` attribute and <img> allow only `src` attribute == '1.png'
    }
    });
    editor.value = 'Sorry! <strong>Goodby</strong>\
    <span>mr.</span> <a style="color:red" href="http://xdsoft.net">Freeman</a>';
    console.log(editor.value); //Sorry! <a href="http://xdsoft.net">Freeman</a>

    Example

    const editor = Jodit.make('#editor', {
    cleanHTML: {
    allowTags: {
    p: true,
    a: {
    href: true
    },
    table: true,
    tr: true,
    td: true,
    img: {
    src: '1.png'
    }
    }
    }
    });
  • denyTags: string | false | IDictionary<string, string>
  • disableCleanFilter: Nullable<Set<string>>

    Node filtering rules that do not need to be applied to content The full list of rules is generated dynamically from the folder https://github.com/xdan/jodit/tree/master/src/plugins/clean-html/helpers/visitor/filters

  • fillEmptyParagraph: boolean
  • removeEmptyElements: boolean
  • removeOnError: boolean

    Remove onError attributes

  • replaceNBSP: boolean

    Replace &nbsp; to plain space

  • replaceOldTags: false | IDictionary<keyof HTMLElementTagNameMap, string>
  • safeJavaScriptLink: boolean

    Safe href="javascript:" links

  • timeout: number
  • useIframeSandbox: boolean

    Use iframe[sandbox] to paste HTML code into the editor to check it for safety Allows you not to run scripts and handlers, but it works much slower

    Example

    Jodit.make('#editor', {
    cleanHTML: {
    useIframeSandbox: true
    }
    });
colorPickerDefaultTab: "background" | "color" = 'background'

The default tab color picker

Example

Jodit.make('#editor2', {
colorPickerDefaultTab: 'color'
})
colors: string[] | IDictionary<string[], string> = ...

The colors in HEX representation to select a color for the background and for the text in colorpicker

Example

 Jodit.make('#editor', {
colors: ['#ff0000', '#00ff00', '#0000ff']
})
commandToHotkeys: IDictionary<string | string[], string>
containerStyle: false | IDictionary<any, string> = false

Example

Jodit.make('#editor', {
editorStyle: {
font: '12px Arial',
color: '#0c0c0c'
}
});

Behavior for buttons

countHTMLChars: boolean
createAttributes: IDictionary<Attributes | NodeFunction, string> = ...

Default attributes for created inside editor elements

Example

const editor2 = Jodit.make('#editor', {
createAttributes: {
div: {
class: 'test'
},
ul: function (ul) {
ul.classList.add('ui-test');
}
}
});

const div2 = editor2.createInside.div();
expect(div2.className).equals('test');

const ul = editor2.createInside.element('ul');
expect(ul.className).equals('ui-test');

Or JSX in React

Example

import React, {useState, useRef} from 'react';
import JoditEditor from "jodit-react";

const config = {
createAttributes: {
div: {
class: 'align-center'
}
}
};

<JoditEditor config={config}/>
cursorAfterAutofocus: "end" | "start"
debugLanguage: boolean = false

if true all Lang.i18n(key) return {key}

Example

<script>
var editor = Jodit.make('.editor', {
debugLanguage: true
});

console.log(editor.i18n("Test")); // {Test}
</script>
defaultActionOnPaste: InsertMode = INSERT_AS_HTML

Default insert method

Default

insert_as_html

defaultActionOnPasteFromWord: null | InsertMode

Default insert method from word, if not define, it will use defaultActionOnPaste instead

Example

Jodit.make('#editor', {
defaultActionOnPasteFromWord: 'insert_clear_html'
})
defaultAjaxOptions: AjaxOptions

A set of key/value pairs that configure the Ajax request. All settings are optional

defaultFontSizePoints: "pt" | "px"
defaultLineHeight: null | number

Default line spacing for the entire editor

Jodit.make('#editor', {
defaultLineHeight: 1.2
})
defaultMode: number = consts.MODE_WYSIWYG

Jodit.MODE_WYSIWYG The HTML editor allows you to write like MSWord, Jodit.MODE_SOURCE syntax highlighting source editor

Example

var editor = Jodit.make('#editor', {
defaultMode: Jodit.MODE_SPLIT
});
console.log(editor.getRealMode())
defaultTimeout: number = 100

Timeout of all asynchronous methods

delete: {
    hotkeys: {
        backspace: string[];
        backspaceSentence: string[];
        backspaceWord: string[];
        delete: string[];
        deleteSentence: string[];
        deleteWord: string[];
    };
}

Type declaration

  • hotkeys: {
        backspace: string[];
        backspaceSentence: string[];
        backspaceWord: string[];
        delete: string[];
        deleteSentence: string[];
        deleteWord: string[];
    }
    • backspace: string[]
    • backspaceSentence: string[]
    • backspaceWord: string[]
    • delete: string[]
    • deleteSentence: string[]
    • deleteWord: string[]
direction: "" | "rtl" | "ltr" = ''

The writing direction of the language which is used to create editor content. Allowed values are: '' (an empty string) – Indicates that content direction will be the same as either the editor UI direction or the page element direction. 'ltr' – Indicates a Left-To-Right text direction (like in English). 'rtl' – Indicates a Right-To-Left text direction (like in Arabic).

Example

Jodit.make('.editor', {
direction: 'rtl'
})
disablePlugins: string | string[] = []

Do not init these plugins

Example

var editor = Jodit.make('.editor', {
disablePlugins: 'table,iframe'
});
//or
var editor = Jodit.make('.editor', {
disablePlugins: ['table', 'iframe']
});
disabled: boolean = false

Change the disabled state of the editor

draggableTags: string | string[]

Draggable elements

dtd: {
    blockLimits: IDictionary<1, string>;
    checkBlockNesting: boolean;
    removeExtraBr: boolean;
}

Type declaration

  • blockLimits: IDictionary<1, string>

    List of elements that contain other blocks

  • checkBlockNesting: boolean

    Check when inserting a block element if it can be inside another block element (according blockLimits)

  • removeExtraBr: boolean

    Remove extra br element inside block element after pasting

editHTMLDocumentMode: boolean = false

Allow editing the entire HTML document(html, head)

Works together with the iframe option.

Example

const editor = Jodit.make('#editor', {
iframe: true,
editHTMLDocumentMode: true
});
editor.value = '<!DOCTYPE html><html lang="en" style="overflow-y:hidden">' +
'<head><title>Jodit Editor</title></head>' +
'<body spellcheck="false"><p>Some text</p><p> a </p></body>' +
'</html>';
editorClassName: string | false = false

Class name that can be appended to the editable area

See

Example

Jodit.make('#editor', {
editorCssClass: 'some_my_class'
});
<style>
.some_my_class p{
line-height: 16px;
}
</style>
editorCssClass: string | false = false

Alias for editorClassName

Deprecated

enableDragAndDropFileToEditor: boolean

Enable drag and drop file editor

enter: "br" | "div" | "p" = consts.PARAGRAPH

Element that will be created when you press Enter

enterBlock: "div" | "p" = ...

Use when you need insert new block element use enter option if not set

events: IDictionary<((...args: any[]) => any), string> = {}

These buttons list will be added to option.buttons

extraIcons: IDictionary<string, string> = {}

By default, you can only install an icon from the Jodit suite. You can add your icon to the set using the Jodit.modules.Icon.set (name, svg Code) method. But for a declarative declaration, you can use this option.

Example

Jodit.modules.Icon.set('someIcon', '<svg><path.../></svg>');
const editor = Jodit.make({
extraButtons: [{
name: 'someButton',
icon: 'someIcon'
}]
});

@example
const editor = Jodit.make({
extraIcons: {
someIcon: '<svg><path.../></svg>'
},
extraButtons: [{
name: 'someButton',
icon: 'someIcon'
}]
});

Example

const editor = Jodit.make({
extraButtons: [{
name: 'someButton',
icon: '<svg><path.../></svg>'
}]
});
extraPlugins: (string | IExtraPlugin)[] = []

Init and download extra plugins

Example

var editor = Jodit.make('.editor', {
extraPlugins: ['emoji']
});

It will try load %SCRIPT_PATH%/plugins/emoji/emoji.js and after load will try init it

filebrowser: IFileBrowserOptions
fullsize: boolean

Open WYSIWYG in full screen

Example

var editor = Jodit.make({
fullsize: true // fullsize editor
});

Example

var editor = Jodit.make();
editor.e.fire('toggleFullSize');
editor.e.fire('toggleFullSize', true); // fullsize
editor.e.fire('toggleFullSize', false); // usual mode
globalFullSize: boolean

True, after fullsize - all editors elements above jodit will get jodit_fullsize-box_true class (z-index: 100000 !important;)

height: string | number = 'auto'

Editor's height

Example

Jodit.make('.editor', {
height: '100%',
})

Example

Jodit.make('.editor', {
height: 600, // equivalent for '600px'
})

Example

Jodit.make('.editor', {
height: 'auto', // default - autosize
})
hidePoweredByJodit: boolean

Hide the link to the Jodit site at the bottom of the editor

history: {
    enable: boolean;
    maxHistoryLength: number;
    timeout: number;
}

Type declaration

  • enable: boolean
  • maxHistoryLength: number

    Limit of history length

  • timeout: number

    Delay on every change

i18n: false | IDictionary<IDictionary<string, string>, string> = false

Collection of language pack data {en: {'Type something': 'Type something', ...}}

Example

const editor = Jodit.make('#editor', {
language: 'ru',
i18n: {
ru: {
'Type something': 'Начните что-либо вводить'
}
}
});
console.log(editor.i18n('Type something')) //Начните что-либо вводить
iframe: boolean = false

When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.

Example

Jodit.make('#editor', {
iframe: true,
iframeStyle: 'html{margin: 0px;}body{padding:10px;background:transparent;color:#000;position:relative;z-index:2;\
user-select:auto;margin:0px;overflow:hidden;}body:after{content:"";clear:both;display:block}';
});
iframeBaseUrl: string

Base URL where the root directory for Config.iframe mode

Example

new Jodit('#editor', {
iframe: true,
iframeBaseUrl: 'http://xdsoft.net/jodit/docs/',
});
iframeCSSLinks: string[]

Custom stylesheet files to be used inside the iframe to display content.

Example

new Jodit('#editor', {
iframe: true,
iframeCSSLinks: ['styles/default.css'],
})
iframeDefaultSrc: string

You can redefine default page

Example

Jodit.make('#editor', {
iframe: true,
iframeDefaultSrc: 'http://xdsoft.net/jodit/docs/',
});
iframeDoctype: string

Iframe's DOCTYPE

iframeStyle: string

Custom style to be used inside the iframe to display content.

Example

new Jodit('#editor', {
iframe: true,
iframeStyle: 'html{margin: 0px;}',
})
iframeTitle: string

Iframe title's content

image: {
    dialogWidth: number;
    editAlign: boolean;
    editAlt: boolean;
    editBorderRadius: boolean;
    editClass: boolean;
    editId: boolean;
    editLink: boolean;
    editMargins: boolean;
    editSize: boolean;
    editSrc: boolean;
    editStyle: boolean;
    editTitle: boolean;
    openOnDblClick: boolean;
    selectImageAfterClose: boolean;
    showPreview: boolean;
    useImageEditor: boolean;
}

Type declaration

  • dialogWidth: number
  • editAlign: boolean

    Show Alignment selector

  • editAlt: boolean

    Show edit 'alt' input

  • editBorderRadius: boolean
  • editClass: boolean

    Show edit classNames input

  • editId: boolean

    Show edit ID input

  • editLink: boolean

    Show edit image link's options

  • editMargins: boolean

    Show edit margin inputs

  • editSize: boolean

    Show edit image size's inputs

  • editSrc: boolean

    Show edit 'src' input

  • editStyle: boolean

    Show style edit input

  • editTitle: boolean

    Show edit 'title' input

  • openOnDblClick: boolean

    Open editing dialog after double click on image

  • selectImageAfterClose: boolean

    Select image after close dialog

  • showPreview: boolean

    Show preview image

  • useImageEditor: boolean

    Show crop/resize btn

imageDefaultWidth: number = 300

Image size defaults to a larger image

imageProcessor: {
    replaceDataURIToBlobIdInView: boolean;
}

Type declaration

  • replaceDataURIToBlobIdInView: boolean
imageeditor: ImageEditorOptions
indentMargin: number

The number of pixels to use for indenting the current line.

inline: boolean = false

Inline editing mode

language: string = 'auto'

Language by default. if auto language set by document.documentElement.lang || (navigator.language && navigator.language.substr(0, 2)) || (navigator.browserLanguage && navigator.browserLanguage.substr(0, 2)) || 'en'

Example

<!-- include in you page lang file -->
<script src="jodit/lang/de.js"></script>
<script>
var editor = Jodit.make('.editor', {
language: 'de'
});
</script>
license: string = ''
limitChars: number | false

limit chars count

limitHTML: false

limit html chars count

limitWords: number | false

limit words count

link: {
    followOnDblClick: boolean;
    formClassName?: string;
    formTemplate: ((editor: IJodit) => string | HTMLElement | IUIForm);
    hotkeys: string[];
    modeClassName: "input" | "select";
    noFollowCheckbox: boolean;
    openInNewTabCheckbox: boolean;
    processPastedLink: boolean;
    processVideoLink: boolean;
    selectMultipleClassName: boolean;
    selectOptionsClassName: IUIOption[];
    selectSizeClassName?: number;
}

Type declaration

  • followOnDblClick: boolean

    Follow link address after dblclick

  • Optional formClassName?: string
  • formTemplate: ((editor: IJodit) => string | HTMLElement | IUIForm)
  • hotkeys: string[]
  • modeClassName: "input" | "select"

    Use an input text to ask the classname or a select or not ask

  • noFollowCheckbox: boolean

    Show no follow checkbox in link dialog.

  • openInNewTabCheckbox: boolean

    Show Open in new tab checkbox in link dialog.

  • processPastedLink: boolean

    Wrap inserted link

  • processVideoLink: boolean

    Replace inserted youtube/vimeo link to iframe

  • selectMultipleClassName: boolean

    Allow multiple choises (to use with modeClassName="select")

  • selectOptionsClassName: IUIOption[]

    The list of the option for the select (to use with modeClassName="select")

  • Optional selectSizeClassName?: number

    The size of the select (to use with modeClassName="select")

maxHeight: string | number
maxWidth: string | number
mediaBlocks: string[]

Media tags

mediaFakeTag: string

Decorate media element with tag

mediaInFakeBlock: boolean

Decorate media elements

memorizeChoiceWhenPasteFragment: boolean

When the user inserts a piece of HTML, the plugin will ask - How to insert it. If after that user insert the same fragment again, the previous option will be used without extra question.

minHeight: string | number
minWidth: string | number
mobileTapTimeout: number

Mobile timeout for CLICK emulation

namespace: string = ''
nl2brInPlainText: boolean

Inserts HTML line breaks before all newlines in a string

observer: {
    enable: boolean;
    maxHistoryLength: number;
    timeout: number;
}

Deprecated

Instead use history

Type declaration

  • enable: boolean
  • maxHistoryLength: number

    Limit of history length

  • timeout: number

    Delay on every change

ownerDocument: Document = ...
ownerWindow: Window = ...
pasteFromWordActionList: IUIOption[]

Options when inserting data from Word

pasteHTMLActionList: IUIOption[]

Options when inserting HTML string

placeholder: string

Default placeholder

Example

var editor = new Jodit('#editor', {
placeholder: 'start typing text ...'
});
popup: IDictionary<(string | IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>)[] | ((editor: IJodit, target: undefined | HTMLElement, close: (() => void)) => string | HTMLElement | (string | IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>)[]), string>
preset: string = 'custom'
presets: IDictionary<any, string> = ...
processPasteFromWord: boolean

Handle pasting of HTML - similar to a fragment copied from MSWord

processPasteHTML: boolean

Handle pasted text - similar to HTML

readonly: boolean = false

Change the read-only state of the editor

removeButtons: string[] = []

Do not display these buttons that are on the list

Example

Jodit.make('#editor2', {
removeButtons: ['hr', 'source']
});
resizer: {
    forImageChangeAttributes: boolean;
    hideSizeTimeout: number;
    min_height: number;
    min_width: number;
    showSize: boolean;
    useAspectRatio: boolean | (keyof HTMLElementTagNameMap)[];
}

Type declaration

  • forImageChangeAttributes: boolean

    When resizing images, change not the styles but the width and height attributes

  • hideSizeTimeout: number
  • min_height: number

    The minimum height for the item being edited

  • min_width: number

    The minimum width for the editable element

  • showSize: boolean

    Show size

  • useAspectRatio: boolean | (keyof HTMLElementTagNameMap)[]

    Save width and height proportions when resizing

    Jodit.make('#editor', {
    allowResizeTags: ['img', 'iframe', 'table', 'jodit'],
    resizer: {
    useAspectRatio: false, // don't save,
    useAspectRatio: ['img'], // save only for images (default value)
    useAspectRatio: true // save for all
    }
    });
safeMode: boolean = false

Editor loads completely without plugins. Useful when debugging your own plugin.

safePluginsList: string[] = ...

List of plugins that will be initialized in safe mode.

Jodit.make('#editor', {
safeMode: true,
safePluginsList: ['about'],
extraPlugins: ['yourPluginDev']
});
saveHeightInStorage: boolean
saveModeInStorage: boolean = false

if set true then the current mode is saved in a cookie , and is restored after a reload of the page

saveSelectionOnBlur: boolean
search: {
    fuzzySearch?: FuzzySearch;
    lazyIdleTimeout: number;
}

Type declaration

  • Optional fuzzySearch?: FuzzySearch

    Function to search for a string within a substring. The default implementation is fuzzySearchIndex But you can write your own. It must implement the FuzzySearch interface.

    Jodit.make('#editor', {
    search: {
    fuzzySearch: (needle, haystack, offset) => {
    return [haystack.toLowerCase().indexOf(needle.toLowerCase(), offset), needle.length];
    }
    }
    })
  • lazyIdleTimeout: number
select: {
    normalizeSelectionBeforeCutAndCopy: boolean;
}

Type declaration

  • normalizeSelectionBeforeCutAndCopy: boolean

    When the user selects the elements of the list - from the beginning to the end from the inside - when copying, we change the selection to cover the entire selected container

    <ul><li>|test|</li></ul> will be |<ul><li>test</li></ul>| <ul><li>|test|</li><li>|test</li></ul> will be <ul>|<li>test</li><li>|test</li></ul>

shadowRoot: Nullable<ShadowRoot> = null

Shadow root if Jodit was created in it

showBrowserColorPicker: boolean = true

shows a INPUT[type=color] to open the browser color picker, on the right bottom of widget color picker

showCharsCounter: boolean
showPlaceholder: boolean

Show placeholder

Example

var editor = new Jodit('#editor', {
showPlaceholder: false
});
showTooltip: boolean = true

Show tooltip after mouse enter on the button

showTooltipDelay: number = 1000

Delay before show tooltip

showWordsCounter: boolean
showXPathInStatusbar: boolean
sizeLG: number = 900

The width of the editor, accepted as the biggest. Used to the responsive version of the editor

sizeMD: number = 700

The width of the editor, accepted as the medium. Used to the responsive version of the editor

sizeSM: number = 400

The width of the editor, accepted as the small. Used to the responsive version of the editor

sourceEditor: "area" | "ace" | ((jodit: IJodit) => ISourceEditor)
sourceEditorCDNUrlsJS: string[]

CDN URLs for ACE editor

sourceEditorNativeOptions: {
    highlightActiveLine: boolean;
    mode: string;
    showGutter: boolean;
    theme: string;
    wrap: string | number | boolean;
}

Options for ace editor

Example

Jodit.make('#editor', {
showGutter: true,
theme: 'ace/theme/idle_fingers',
mode: 'ace/mode/html',
wrap: true,
§ * highlightActiveLine: true
})

Type declaration

  • highlightActiveLine: boolean
  • mode: string
  • showGutter: boolean
  • theme: string
  • wrap: string | number | boolean
specialCharacters: string[]
spellcheck: boolean

Options specifies whether the editor is to have its spelling and grammar checked or not

See

http://www.w3schools.com/tags/att_global_spellcheck.asp

statusbar: boolean = true

Boolean, whether the statusbar should be shown.

style: false | IDictionary<any, string> = false

The internal styles of the editable area. They are intended to change not the appearance of the editor, but to change the appearance of the content.

Example

Jodit.make('#editor', {
style: {
font: '12px Arial',
color: '#0c0c0c'
}
});
styleValues: IDictionary<any, string> = {}

Dictionary of variable values in css, a complete list can be found here https://github.com/xdan/jodit/blob/master/src/styles/variables.less#L25

Example

const editor = Jodit.make('#editor', {
styleValues: {
'color-text': 'red',
colorBorder: 'black',
'color-panel': 'blue'
}
});
tab: {
    tabInsideLiInsertNewList: boolean;
}

Type declaration

  • tabInsideLiInsertNewList: boolean

    Pressing Tab inside LI will add an internal list

tabIndex: number = -1

The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values

table: {
    selectionCellStyle: string;
    useExtraClassesOptions: boolean;
}

Type declaration

  • selectionCellStyle: string
  • useExtraClassesOptions: boolean
tableAllowCellResize: boolean
tableAllowCellSelection: boolean
textIcons: boolean = false

Buttons in toolbat without SVG - only texts

theme: string = 'default'

Theme (can be "dark")

Example

var editor  = new  Jodit(".dark_editor", {
theme: "dark"
});
toolbar: string | boolean | HTMLElement = true

Boolean, whether the toolbar should be shown. Alternatively, a valid css-selector-string to use an element as toolbar container.

toolbarAdaptive: boolean

After resize it will change buttons set for different sizes

toolbarButtonSize: "small" | "tiny" | "xsmall" | "middle" | "large" = 'middle'

Size of icons in the toolbar (can be "small", "middle", "large")

Example

var editor  = new  Jodit(".dark_editor", {
toolbarButtonSize: "small"
});
toolbarDisableStickyForMobile: boolean
toolbarInline: boolean
toolbarInlineDisableFor: string | string[]
toolbarInlineDisabledButtons: string[]
toolbarInlineForSelection: boolean
toolbarSticky: boolean

Example

var editor = Jodit.make('#someid', {
toolbarSticky: false
})
toolbarStickyOffset: number

For example, in Joomla, the top menu bar closes Jodit toolbar when scrolling. Therefore, it is necessary to move the toolbar Jodit by this amount more

Example

var editor = Jodit.make('#someid', {
toolbarStickyOffset: 100
})
triggerChangeEvent: boolean = true

After all changes in editors for textarea will call change trigger

Example

const editor = Jodit.make('#editor');
document.getElementById('editor').addEventListener('change', function () {
console.log(this.value);
})
useInputsPlaceholder: boolean

Use a placeholder from original input field, if it was set

Example

//<textarea id="editor" placeholder="start typing text ..." cols="30" rows="10"></textarea>
var editor = new Jodit('#editor', {
useInputsPlaceholder: true
});
useNativeTooltip: boolean = false

Instead of create custop tooltip - use native title tooltips

usePopupForSpecialCharacters: boolean
useSearch: boolean

Enable custom search plugin search

useSplitMode: boolean = false

Use split mode

width: string | number = 'auto'

Editor's width

Example

Jodit.make('.editor', {
width: '100%',
})

Example

Jodit.make('.editor', {
width: 600, // equivalent for '600px'
})

Example

Jodit.make('.editor', {
width: 'auto', // autosize
})
wrapNodes: {
    emptyBlockAfterInit: boolean;
    exclude: (keyof HTMLElementTagNameMap)[];
}

Type declaration

  • emptyBlockAfterInit: boolean

    If the editor is empty then insert an empty paragraph into it

    Example

    ```javascript Jodit.make('#editor', { wrapNodes: { emptyBlockAfterInit: true } });

  • exclude: (keyof HTMLElementTagNameMap)[]
zIndex: number = 0

z-index For editor

Constructors

Accessors

Jodit PRO

If you like Jodit - try Jodit PRO