Class: Config

config.Config

Default Editor's Configuration

Implements

cache

cache: boolean = true

Use cache for heavy methods

Implementation of

IViewOptions.cache

Defined in

src/config.ts#46


defaultTimeout

defaultTimeout: number = 100

Timeout of all asynchronous methods

Implementation of

IViewOptions.defaultTimeout

Defined in

src/config.ts#51


namespace

namespace: string = ''

Implementation of

IViewOptions.namespace

Defined in

src/config.ts#53


safeMode

safeMode: boolean = false

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

Defined in

src/config.ts#58


width

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
})
Defined in

src/config.ts#82


height

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
})
Defined in

src/config.ts#106


safePluginsList

safePluginsList: string[]

List of plugins that will be initialized in safe mode.

Jodit.make('#editor', {
  safeMode: true,
  safePluginsList: ['about'],
  extraPlugins: ['yourPluginDev']
});
Defined in

src/config.ts#119


commandToHotkeys

commandToHotkeys: IDictionary<string | string[]>

Defined in

src/config.ts#128

src/plugins/hotkeys/config.ts#16


license

license: string = ''

Reserved for the paid version of the editor

Defined in

src/config.ts#133


preset

preset: string = 'custom'

The name of the preset that will be used to initialize the editor.
The list of available presets can be found here Jodit.defaultOptions.presets

Jodit.make('.editor', {
  preset: 'inline'
});
Defined in

src/config.ts#144


presets

presets: IDictionary

Defined in

src/config.ts#146


ownerDocument

ownerDocument: Document

Defined in

src/config.ts#159


ownerWindow

ownerWindow: Window

Allows you to specify the window in which the editor will be created. Default - window
This is necessary if you are creating the editor inside an iframe but the code is running in the parent window

Implementation of

IViewOptions.ownerWindow

Defined in

src/config.ts#167


shadowRoot

shadowRoot: Nullable<ShadowRoot> = null

Shadow root if Jodit was created in it

Implementation of

IViewOptions.shadowRoot

Defined in

src/config.ts#174


zIndex

zIndex: number = 0

z-index For editor

Implementation of

IViewOptions.zIndex

Defined in

src/config.ts#179


readonly

readonly: boolean = false

Change the read-only state of the editor

Implementation of

IViewOptions.readonly

Defined in

src/config.ts#184


disabled

disabled: boolean = false

Change the disabled state of the editor

Implementation of

IViewOptions.disabled

Defined in

src/config.ts#189


activeButtonsInReadOnly

activeButtonsInReadOnly: string[]

In readOnly mode, some buttons can still be useful, for example the button to view source code or print

Implementation of

IViewOptions.activeButtonsInReadOnly

Defined in

src/config.ts#194


allowCommandsInReadOnly

allowCommandsInReadOnly: string[]

When the editor is in read-only mode, some commands can still be executed:

const editor = Jodit.make('.editor', {
   allowCommandsInReadOnly: ['selectall', 'preview', 'print']
   readonly: true
});
editor.execCommand('selectall');// will be selected all content
editor.execCommand('delete');// but content will not be deleted
Defined in

src/config.ts#214


toolbarButtonSize

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

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

Example

const editor = Jodit.make(".dark_editor", {
     toolbarButtonSize: "small"
});

Implementation of

IViewOptions.toolbarButtonSize

Defined in

src/config.ts#226


allowTabNavigation

allowTabNavigation: boolean = false

Allow navigation in the toolbar of the editor by Tab key

Implementation of

IViewOptions.allowTabNavigation

Defined in

src/config.ts#231


inline

inline: boolean = false

Inline editing mode

Defined in

src/config.ts#236


theme

theme: string = 'default'

Theme (can be "dark")

Example

const editor = Jodit.make(".dark_editor", {
     theme: "dark"
});

Implementation of

IViewOptions.theme

Defined in

src/config.ts#247


saveModeInStorage

saveModeInStorage: boolean = false

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

Defined in

src/config.ts#252


editorClassName

editorClassName: string | false = false

Class name that can be appended to the editable area

See

Example

Jodit.make('#editor', {
   editorClassName: 'some_my_class'
});
<style>
.some_my_class p{
   line-height: 16px;
}
</style>
Defined in

src/config.ts#274


className

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>
Defined in

src/config.ts#295


style

style: false | IDictionary = 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'
    }
});
Defined in

src/config.ts#310


containerStyle

containerStyle: false | IDictionary = false

Example

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

src/config.ts#324


styleValues

styleValues: IDictionary = {}

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

Example

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

src/config.ts#341


triggerChangeEvent

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);
})
Defined in

src/config.ts#354


direction

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'
})

Implementation of

IViewOptions.direction

Defined in

src/config.ts#369


language

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>

Implementation of

IViewOptions.language

Defined in

src/config.ts#387


debugLanguage

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>

Implementation of

IViewOptions.debugLanguage

Defined in

src/config.ts#403


i18n

i18n: false | IDictionary<IDictionary<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')) //Начните что-либо вводить

Implementation of

IViewOptions.i18n

Defined in

src/config.ts#421


tabIndex

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

Defined in

src/config.ts#428


toolbar

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.

Implementation of

IViewOptions.toolbar

Defined in

src/config.ts#434


statusbar

statusbar: boolean = true

Boolean, whether the statusbar should be shown.

Defined in

src/config.ts#439


showTooltip

showTooltip: boolean = true

Show tooltip after mouse enter on the button

Implementation of

IViewOptions.showTooltip

Defined in

src/config.ts#444


showTooltipDelay

showTooltipDelay: number = 200

Delay before show tooltip

Implementation of

IViewOptions.showTooltipDelay

Defined in

src/config.ts#449


useNativeTooltip

useNativeTooltip: boolean = false

Instead of create custop tooltip - use native title tooltips

Implementation of

IViewOptions.useNativeTooltip

Defined in

src/config.ts#454


defaultActionOnPaste

defaultActionOnPaste: InsertMode = INSERT_AS_HTML

Default insert method

Default

insert_as_html
Defined in

src/config.ts#460


enter

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

Element that will be created when you press Enter

Defined in

src/config.ts#471


iframe

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}';
});

Implementation of

IViewOptions.iframe

Defined in

src/config.ts#485


editHTMLDocumentMode

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>';
Defined in

src/config.ts#502


enterBlock

enterBlock: "div" | "p"

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

Defined in

src/config.ts#508


defaultMode

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())
Defined in

src/config.ts#522


useSplitMode

useSplitMode: boolean = false

Use split mode

Defined in

src/config.ts#527


colors

colors: string[] | IDictionary<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']
})
Defined in

src/config.ts#538


colorPickerDefaultTab

colorPickerDefaultTab: "background" | "color" = 'background'

The default tab color picker

Example

Jodit.make('#editor2', {
    colorPickerDefaultTab: 'color'
})
Defined in

src/config.ts#636


imageDefaultWidth

imageDefaultWidth: number = 300

Image size defaults to a larger image

Defined in

src/config.ts#641


removeButtons

removeButtons: string[] = []

Do not display these buttons that are on the list

Example

Jodit.make('#editor2', {
    removeButtons: ['hr', 'source']
});

Implementation of

IViewOptions.removeButtons

Defined in

src/config.ts#652


disablePlugins

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']
});
Defined in

src/config.ts#667


extraPlugins

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

Defined in

src/config.ts#679


basePath

Optional basePath: string

Base path for download extra plugins

Implementation of

IViewOptions.basePath

Defined in

src/config.ts#684


extraButtons

extraButtons: (string | IControlType<IViewBased<IViewOptions> | IJodit | IFileBrowser<IFileBrowserOptions>, IToolbarButton>)[] = []

These buttons list will be added to option.buttons

Implementation of

IViewOptions.extraButtons

Defined in

src/config.ts#689


extraIcons

extraIcons: IDictionary<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>'
  }]
});

Implementation of

IViewOptions.extraIcons

Defined in

src/config.ts#727


createAttributes

createAttributes: IDictionary<Attributes | NodeFunction>

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}/>

Implementation of

IViewOptions.createAttributes

Defined in

src/config.ts#767


sizeLG

sizeLG: number = 900

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

Defined in

src/config.ts#776


sizeMD

sizeMD: number = 700

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

Defined in

src/config.ts#781


sizeSM

sizeSM: number = 400

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

Defined in

src/config.ts#786


buttons

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.message.info('Was inserted ' + value);
       },
       template: function (key, value) {
           return '<div>' + value + '</div>';
       }
 });

Implementation of

IViewOptions.buttons

Defined in

src/config.ts#850


controls

controls: Controls<IViewBased<IViewOptions> | IJodit>

Behavior for buttons

Implementation of

IViewOptions.controls

Defined in

src/config.ts#923


events

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

Some events are called when the editor is initialized, for example, the afterInit event.
So this code won't work:

const editor = Jodit.make('#editor');
editor.events.on('afterInit', () => console.log('afterInit'));

You need to do this:

Jodit.make('#editor', {
    events: {
      afterInit: () => console.log('afterInit')
    }
});

The option can use any Jodit events, for example:

const editor = Jodit.make('#editor', {
    events: {
      hello: (name) => console.log('Hello', name)
    }
});
editor.e.fire('hello', 'Mike');

Implementation of

IViewOptions.events

Defined in

src/config.ts#950


textIcons

textIcons: boolean = false

Buttons in toolbat without SVG - only texts

Implementation of

IViewOptions.textIcons

Defined in

src/config.ts#955


showBrowserColorPicker

showBrowserColorPicker: boolean = true

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

Defined in

src/config.ts#960


defaultAjaxOptions

defaultAjaxOptions: AjaxOptions

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

Defined in

src/core/request/config.ts#19


dialog

dialog: IDialogOptions

Defined in

src/modules/dialog/dialog.ts#46


filebrowser

filebrowser: IFileBrowserOptions

Defined in

src/modules/file-browser/config.ts#32


history

history: Object

Type declaration

Name Type Description
enable boolean -
maxHistoryLength number Limit of history length
timeout number Delay on every change
Defined in

src/modules/history/history.ts#30


imageeditor

imageeditor: ImageEditorOptions

Defined in

src/modules/image-editor/config.ts#19


enableDragAndDropFileToEditor

enableDragAndDropFileToEditor: boolean

Enable drag and drop file editor

Defined in

src/modules/uploader/config.ts#26


uploader

uploader: IUploaderOptions<IUploader>

Defined in

src/modules/uploader/config.ts#27


addNewLine

addNewLine: boolean

Create helper

Defined in

src/plugins/add-new-line/config.ts#22


addNewLineTagsTriggers

addNewLineTagsTriggers: HTMLTagNames[]

What kind of tags it will be impact

Defined in

src/plugins/add-new-line/config.ts#27


addNewLineOnDBLClick

addNewLineOnDBLClick: boolean

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

Example

Jodit.make('#editor', {
  addNewLineOnDBLClick: false // disable
})
Defined in

src/plugins/add-new-line/config.ts#38


addNewLineDeltaShow

addNewLineDeltaShow: number

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

Defined in

src/plugins/add-new-line/config.ts#44


delete

delete: Object

Type declaration

Name Type
hotkeys { delete: string[] ; deleteWord: string[] ; deleteSentence: string[] ; backspace: string[] ; backspaceWord: string[] ; backspaceSentence: string[] }
hotkeys.delete string[]
hotkeys.deleteWord string[]
hotkeys.deleteSentence string[]
hotkeys.backspace string[]
hotkeys.backspaceWord string[]
hotkeys.backspaceSentence string[]
Defined in

src/plugins/backspace/config.ts#15


cleanHTML

cleanHTML: Object

Type declaration

Name Type Description
timeout number -
replaceNBSP boolean Replace &nbsp; to plain space
fillEmptyParagraph boolean -
removeEmptyElements boolean -
replaceOldTags false | IDictionary<HTMLTagNames> -
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 javascript Jodit.make('#editor', { cleanHTML: { useIframeSandbox: true } });
removeOnError boolean Remove onError attributes
safeJavaScriptLink boolean Safe href="javascript:" links
allowTags string | false | IDictionary<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 javascript const jodit = new Jodit.make('#editor', { cleanHTML: { cleanOnPaste: false } }); Example javascript 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="https://xdsoft.net">Freeman</a>'; console.log(editor.value); //Sorry! <a href="https://xdsoft.net">Freeman</a> Example javascript 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> -
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/main/src/plugins/clean-html/helpers/visitor/filters
Defined in

src/plugins/clean-html/config.ts#19


draggableTags

draggableTags: string | string[]

Draggable elements

Defined in

src/plugins/drag-and-drop-element/config.ts#18


dtd

dtd: Object

Type declaration

Name Type Description
removeExtraBr boolean Remove extra br element inside block element after pasting
checkBlockNesting boolean Check when inserting a block element if it can be inside another block element (according blockLimits)
blockLimits IDictionary<1> List of elements that contain other blocks
Defined in

src/plugins/dtd/config.ts#16


autofocus

autofocus: boolean

Defined in

src/plugins/focus/focus.ts#20


cursorAfterAutofocus

cursorAfterAutofocus: "end" | "start"

Defined in

src/plugins/focus/focus.ts#21


saveSelectionOnBlur

saveSelectionOnBlur: boolean

Defined in

src/plugins/focus/focus.ts#22


defaultFontSizePoints

defaultFontSizePoints: "px" | "pt"

Defined in

src/plugins/font/config.ts#23


fullsize

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

Implementation of

IViewOptions.fullsize

Defined in

src/plugins/fullsize/config.ts#39


globalFullSize

globalFullSize: boolean

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

Implementation of

IViewOptions.globalFullSize

Defined in

src/plugins/fullsize/config.ts#44


iframeDefaultSrc

iframeDefaultSrc: string

You can redefine default page

Example

Jodit.make('#editor', {
   iframe: true,
   iframeDefaultSrc: 'https://xdsoft.net/jodit/docs/',
});
Defined in

src/plugins/iframe/config.ts#26


iframeBaseUrl

iframeBaseUrl: string

Base URL where the root directory for Config.iframe mode

Example

new Jodit('#editor', {
   iframe: true,
   iframeBaseUrl: 'https://xdsoft.net/jodit/docs/',
});
Defined in

src/plugins/iframe/config.ts#39


iframeTitle

iframeTitle: string

Iframe title's content

Defined in

src/plugins/iframe/config.ts#44


iframeDoctype

iframeDoctype: string

Iframe's DOCTYPE

Defined in

src/plugins/iframe/config.ts#49


iframeStyle

iframeStyle: string

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

Example

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

src/plugins/iframe/config.ts#61


iframeCSSLinks: string[]

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

Example

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

src/plugins/iframe/config.ts#74


imageProcessor

imageProcessor: Object

Type declaration

Name Type
replaceDataURIToBlobIdInView boolean
Defined in

src/plugins/image-processor/config.ts#19


image

image: Object

Type declaration

Name Type Description
dialogWidth number -
openOnDblClick boolean Open editing dialog after double click on image
editSrc boolean Show edit 'src' input
useImageEditor boolean Show crop/resize btn
editTitle boolean Show edit 'title' input
editAlt boolean Show edit 'alt' input
editLink boolean Show edit image link's options
editSize boolean Show edit image size's inputs
editMargins boolean Show edit margin inputs
editBorderRadius boolean -
editClass boolean Show edit classNames input
availableClasses string[] | [string, string][] Pre-define available classes to select from Classes can be provided as list of strings or as list of tuples ["classname", "human label"]. Example javascript new Jodit('#editor', { image: { availableClasses: [ "rte-image-width-50", ["rte-image-width-75", "75 % width"] ] } })
editStyle boolean Show style edit input
editId boolean Show edit ID input
editAlign boolean Show Alignment selector
showPreview boolean Show preview image
selectImageAfterClose boolean Select image after close dialog
Defined in

src/plugins/image-properties/config.ts#15


indentMargin

indentMargin: number

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

Defined in

src/plugins/indent/config.ts#53


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>)[]>

Defined in

src/plugins/inline-popup/config/config.ts#33


toolbarInlineDisabledButtons

toolbarInlineDisabledButtons: string[]

Defined in

src/plugins/inline-popup/config/config.ts#42


toolbarInline

toolbarInline: boolean

Defined in

src/plugins/inline-popup/config/config.ts#43


toolbarInlineForSelection

toolbarInlineForSelection: boolean

Defined in

src/plugins/inline-popup/config/config.ts#44


toolbarInlineDisableFor

toolbarInlineDisableFor: string | string[]

Defined in

src/plugins/inline-popup/config/config.ts#45


limitWords

limitWords: number | false

limit words count

Defined in

src/plugins/limit/config.ts#18


limitChars

limitChars: number | false

limit chars count

Defined in

src/plugins/limit/config.ts#23


limitHTML

limitHTML: false

limit html chars count

Defined in

src/plugins/limit/config.ts#28


defaultLineHeight

defaultLineHeight: null | number

Default line spacing for the entire editor

Jodit.make('#editor', {
  defaultLineHeight: 1.2
})
Defined in

src/plugins/line-height/config.ts#29


link: Object

Type declaration

Name Type Description
formTemplate (editor: IJodit) => string | HTMLElement | IUIForm Template for the link dialog form
formClassName? string -
followOnDblClick boolean Follow link address after dblclick
processVideoLink boolean Replace inserted youtube/vimeo link to iframe
processPastedLink boolean Wrap inserted link
noFollowCheckbox boolean Show no follow checkbox in link dialog.
openInNewTabCheckbox boolean Show Open in new tab checkbox in link dialog.
modeClassName "input" | "select" Use an input text to ask the classname or a select or not ask
selectMultipleClassName boolean Allow multiple choises (to use with modeClassName="select")
selectSizeClassName? number The size of the select (to use with modeClassName="select")
selectOptionsClassName IUIOption[] The list of the option for the select (to use with modeClassName="select")
hotkeys string[] -
Defined in

src/plugins/link/config.ts#22


mediaInFakeBlock

mediaInFakeBlock: boolean

Decorate media elements

Defined in

src/plugins/media/config.ts#18


mediaFakeTag

mediaFakeTag: string

Decorate media element with tag

Defined in

src/plugins/media/config.ts#23


mediaBlocks

mediaBlocks: string[]

Media tags

Defined in

src/plugins/media/config.ts#28


mobileTapTimeout

mobileTapTimeout: number

Mobile timeout for CLICK emulation

Defined in

src/plugins/mobile/config.ts#29


toolbarAdaptive

toolbarAdaptive: boolean

After resizing, the set of buttons will change to accommodate different sizes.

Defined in

src/plugins/mobile/config.ts#34


buttonsMD

buttonsMD: ButtonsOption

The list of buttons that appear in the editor's toolbar for medium-sized spaces (≥ options.sizeMD).

Defined in

src/plugins/mobile/config.ts#39


buttonsSM

buttonsSM: ButtonsOption

The list of buttons that appear in the editor's toolbar for small-sized spaces (≥ options.sizeSM).

Defined in

src/plugins/mobile/config.ts#44


buttonsXS

buttonsXS: ButtonsOption

The list of buttons that appear in the editor's toolbar for extra-small spaces (less than options.sizeSM).

Defined in

src/plugins/mobile/config.ts#49


askBeforePasteFromWord

askBeforePasteFromWord: boolean

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

Defined in

src/plugins/paste-from-word/config.ts#24


processPasteFromWord

processPasteFromWord: boolean

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

Defined in

src/plugins/paste-from-word/config.ts#29


defaultActionOnPasteFromWord

defaultActionOnPasteFromWord: null | InsertMode

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

Jodit.make('#editor', {
  defaultActionOnPasteFromWord: 'insert_clear_html'
})
Defined in

src/plugins/paste-from-word/config.ts#40


pasteFromWordActionList

pasteFromWordActionList: IUIOption[]

Options when inserting data from Word

Defined in

src/plugins/paste-from-word/config.ts#45


askBeforePasteHTML

askBeforePasteHTML: boolean

Ask before paste HTML in WYSIWYG mode

Defined in

src/plugins/paste/config.ts#34


memorizeChoiceWhenPasteFragment

memorizeChoiceWhenPasteFragment: boolean

When the user inserts a snippet of HTML, the plugin will prompt for the insertion method.
If the user inserts the same fragment again, the previously selected option will be used without prompting for confirmation.

Defined in

src/plugins/paste/config.ts#40


processPasteHTML

processPasteHTML: boolean

Handle pasted text - similar to HTML

Defined in

src/plugins/paste/config.ts#45


nl2brInPlainText

nl2brInPlainText: boolean

Inserts HTML line breaks before all newlines in a string

Defined in

src/plugins/paste/config.ts#50


pasteExcludeStripTags

pasteExcludeStripTags: HTMLTagNames[]

List of tags that will not be removed from the pasted HTML with INSERT_AS_TEXT mode

Defined in

src/plugins/paste/config.ts#55


pasteHTMLActionList

pasteHTMLActionList: IUIOption[]

Options when inserting HTML string

Defined in

src/plugins/paste/config.ts#60


scrollToPastedContent

scrollToPastedContent: boolean

Scroll the editor to the pasted fragment

Defined in

src/plugins/paste/config.ts#65


showPlaceholder

showPlaceholder: boolean

Show placeholder

Example

const editor = Jodit.make('#editor', {
   showPlaceholder: false
});
Defined in

src/plugins/placeholder/config.ts#27


useInputsPlaceholder

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>
const editor = Jodit.make('#editor', {
   useInputsPlaceholder: true
});
Defined in

src/plugins/placeholder/config.ts#39


placeholder

placeholder: string

Default placeholder

Example

const editor = Jodit.make('#editor', {
   placeholder: 'start typing text ...'
});
Defined in

src/plugins/placeholder/config.ts#50


hidePoweredByJodit

hidePoweredByJodit: boolean

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

Defined in

src/plugins/powered-by-jodit/powered-by-jodit.ts#21


tableAllowCellResize

tableAllowCellResize: boolean

Defined in

src/plugins/resize-cells/config.ts#15


allowResizeX

allowResizeX: boolean

Defined in

src/plugins/resize-handler/config.ts#15


allowResizeY

allowResizeY: boolean

Defined in

src/plugins/resize-handler/config.ts#16


allowResizeTags

allowResizeTags: Set<HTMLTagNames>

Use true frame for editing iframe size

Defined in

src/plugins/resizer/config.ts#19


resizer

resizer: Object

Type declaration

Name Type Description
showSize boolean Show size
hideSizeTimeout number -
useAspectRatio boolean | Set<HTMLTagNames> Save width and height proportions when resizing js 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 } });
forImageChangeAttributes boolean When resizing images, change not the styles but the width and height attributes
min_width number The minimum width for the editable element
min_height number The minimum height for the item being edited
Defined in

src/plugins/resizer/config.ts#21


useSearch

useSearch: boolean

Enable custom search plugin
search

Defined in

src/plugins/search/config.ts#25


search: Object

Type declaration

Name Type Description
lazyIdleTimeout number -
useCustomHighlightAPI boolean Use custom highlight API https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API or use default implementation (wrap text in span and attribute jd-tmp-selection)
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. ts Jodit.make('#editor', { search: { fuzzySearch: (needle, haystack, offset) => { return [haystack.toLowerCase().indexOf(needle.toLowerCase(), offset), needle.length]; } } })
Defined in

src/plugins/search/config.ts#27


tableAllowCellSelection

tableAllowCellSelection: boolean

Defined in

src/plugins/select-cells/config.ts#15


select

select: Object

Type declaration

Name Type Description
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>
Defined in

src/plugins/select/config.ts#15


saveHeightInStorage

saveHeightInStorage: boolean

Defined in

src/plugins/size/config.ts#15


minWidth

minWidth: string | number

Defined in

src/plugins/size/config.ts#17


minHeight

minHeight: string | number

Defined in

src/plugins/size/config.ts#18


maxWidth

maxWidth: string | number

Defined in

src/plugins/size/config.ts#19


maxHeight

maxHeight: string | number

Defined in

src/plugins/size/config.ts#20


sourceEditor

sourceEditor: "area" | "ace" | (jodit: IJodit) => ISourceEditor

Defined in

src/plugins/source/config.ts#20


sourceEditorNativeOptions

sourceEditorNativeOptions: Object

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

Name Type
showGutter boolean
theme string
mode string
wrap string | number | boolean
highlightActiveLine boolean
Defined in

src/plugins/source/config.ts#35


beautifyHTML

beautifyHTML: boolean

Beautify HTML then it possible

Defined in

src/plugins/source/config.ts#46


beautifyHTMLCDNUrlsJS

beautifyHTMLCDNUrlsJS: string[]

CDN URLs for HTML Beautifier

Defined in

src/plugins/source/config.ts#51


sourceEditorCDNUrlsJS

sourceEditorCDNUrlsJS: string[]

CDN URLs for ACE editor

Defined in

src/plugins/source/config.ts#56


speechRecognize

speechRecognize: Object

Type declaration

Name Type Description
api ISpeechRecognizeConstructor -
lang? string Returns and sets the language of the current SpeechRecognition. If not specified, this defaults to the HTML lang attribute value, or the user agent's language setting if that isn't set either. See https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/lang
continuous boolean Controls whether continuous results are returned for each recognition, or only a single result. See https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/continuous
interimResults boolean Controls whether interim results should be returned (true) or not (false.) Interim results are results that are not yet final (e.g. the isFinal property is false.) See https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition/interimResults
sound boolean On recognition error - make an error sound
commands IDictionary<string> You can specify any commands in your language by listing them with the | sign. In the value, write down any commands for execCommand and value (separated by ::) You can also use custom Jodit commands For example js Jodit.make('#editor', { speechRecognize: { commands: { 'remove line|remove paragraph': 'backspaceSentenceButton', 'start bold': 'bold', 'insert table|create table': 'insertHTML::<table><tr><td>test</td></tr></table>', } } });
Defined in

src/plugins/speech-recognize/config.ts#26


spellcheck

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

Defined in

src/plugins/spellcheck/config.ts#23


showCharsCounter

showCharsCounter: boolean

Defined in

src/plugins/stat/config.ts#15


countHTMLChars

countHTMLChars: boolean

Defined in

src/plugins/stat/config.ts#16


showWordsCounter

showWordsCounter: boolean

Defined in

src/plugins/stat/config.ts#17


toolbarSticky

toolbarSticky: boolean

Example

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

src/plugins/sticky/config.ts#23


toolbarDisableStickyForMobile

toolbarDisableStickyForMobile: boolean

Defined in

src/plugins/sticky/config.ts#25


toolbarStickyOffset

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
})
Defined in

src/plugins/sticky/config.ts#38


specialCharacters

specialCharacters: string[]

Defined in

src/plugins/symbols/config.ts#18


usePopupForSpecialCharacters

usePopupForSpecialCharacters: boolean

Defined in

src/plugins/symbols/config.ts#19


tab

tab: Object

Type declaration

Name Type Description
tabInsideLiInsertNewList boolean Pressing Tab inside LI will add an internal list
Defined in

src/plugins/tab/config.ts#15


table

table: Object

Type declaration

Name Type
selectionCellStyle string
useExtraClassesOptions boolean
Defined in

src/plugins/table/config.ts#22


wrapNodes

wrapNodes: Object

Type declaration

Name Type Description
exclude Set<HTMLTagNames> -
emptyBlockAfterInit boolean If the editor is empty then insert an empty paragraph into it Example javascript Jodit.make('#editor', { wrapNodes: { emptyBlockAfterInit: true } });
Defined in

src/plugins/wrap-nodes/config.ts#16


showXPathInStatusbar

showXPathInStatusbar: boolean

Defined in

jodit/src/plugins/xpath/config.ts:15

defaultOptions

get defaultOptions(): Config

Returns

Config

Defined in

jodit/src/config.ts:964

In this article: