Class: Config

config.Config

Default Editor's Configuration

ImplementsImplementsImplements

• IViewOptions

cachecachecache

cache: boolean = true

Use cache for heavy methods

Implementation ofImplementation ofImplementation of

IViewOptions.cache

Defined inDefined inDefined in

src/config.ts#51

defaultTimeoutdefaultTimeoutdefaultTimeout

defaultTimeout: number = 100

Timeout of all asynchronous methods

Implementation ofImplementation ofImplementation of

IViewOptions.defaultTimeout

Defined inDefined inDefined in

src/config.ts#56

namespacenamespacenamespace

namespace: string = ''

Implementation ofImplementation ofImplementation of

IViewOptions.namespace

Defined inDefined inDefined in

src/config.ts#58

safeModesafeModesafeMode

safeMode: boolean = false

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

Defined inDefined inDefined in

src/config.ts#63

widthwidthwidth

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

src/config.ts#87

heightheightheight

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

src/config.ts#111

safePluginsListsafePluginsListsafePluginsList

safePluginsList: string[]

List of plugins that will be initialized in safe mode.

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

Defined inDefined inDefined in

src/config.ts#124

commandToHotkeyscommandToHotkeyscommandToHotkeys

commandToHotkeys: IDictionary<string | string[]>

You can redefine hotkeys for some command

Example

const jodit = Jodit.make('#editor', {
 commandToHotkeys: {
     bold: 'ctrl+shift+b',
     italic: ['ctrl+i', 'ctrl+b'],
 }
})

Defined inDefined inDefined in

src/config.ts#133

src/plugins/hotkeys/config.ts#29

licenselicenselicense

license: string = ''

Reserved for the paid version of the editor

Defined inDefined inDefined in

src/config.ts#138

presetpresetpreset

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

src/config.ts#149

presetspresetspresets

presets: IDictionary

Defined inDefined inDefined in

src/config.ts#151

ownerDocumentownerDocumentownerDocument

ownerDocument: Document = globalDocument

Defined inDefined inDefined in

src/config.ts#164

ownerWindowownerWindowownerWindow

ownerWindow: Window = globalWindow

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 ofImplementation ofImplementation of

IViewOptions.ownerWindow

Defined inDefined inDefined in

src/config.ts#170

shadowRootshadowRootshadowRoot

shadowRoot: Nullable<ShadowRoot> = null

Shadow root if Jodit was created in it

<div id="editor"></div>

const app = document.getElementById('editor');
app.attachShadow({ mode: 'open' });
const root = app.shadowRoot;

root.innerHTML = `
<link rel="stylesheet" href="./build/jodit.css"/>
<h1>Jodit example in Shadow DOM</h1>
<div id="edit"></div>
`;

const editor = Jodit.make(root.getElementById('edit'), {
  globalFullSize: false,
  shadowRoot: root
});
editor.value = '<p>start</p>';

Implementation ofImplementation ofImplementation of

IViewOptions.shadowRoot

Defined inDefined inDefined in

src/config.ts#197

zIndexzIndexzIndex

zIndex: number = 0

z-index For editor

Implementation ofImplementation ofImplementation of

IViewOptions.zIndex

Defined inDefined inDefined in

src/config.ts#202

readonlyreadonlyreadonly

readonly: boolean = false

Change the read-only state of the editor

Implementation ofImplementation ofImplementation of

IViewOptions.readonly

Defined inDefined inDefined in

src/config.ts#207

disableddisableddisabled

disabled: boolean = false

Change the disabled state of the editor

Implementation ofImplementation ofImplementation of

IViewOptions.disabled

Defined inDefined inDefined in

src/config.ts#212

activeButtonsInReadOnlyactiveButtonsInReadOnlyactiveButtonsInReadOnly

activeButtonsInReadOnly: string[]

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

Implementation ofImplementation ofImplementation of

IViewOptions.activeButtonsInReadOnly

Defined inDefined inDefined in

src/config.ts#217

allowCommandsInReadOnlyallowCommandsInReadOnlyallowCommandsInReadOnly

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

src/config.ts#237

toolbarButtonSizetoolbarButtonSizetoolbarButtonSize

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 ofImplementation ofImplementation of

IViewOptions.toolbarButtonSize

Defined inDefined inDefined in

src/config.ts#249

allowTabNavigationallowTabNavigationallowTabNavigation

allowTabNavigation: boolean = false

Allow navigation in the toolbar of the editor by Tab key

Implementation ofImplementation ofImplementation of

IViewOptions.allowTabNavigation

Defined inDefined inDefined in

src/config.ts#254

inlineinlineinline

inline: boolean = false

Inline editing mode

Defined inDefined inDefined in

src/config.ts#259

themethemetheme

theme: string = 'default'

Theme (can be "dark")

Example

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

Implementation ofImplementation ofImplementation of

IViewOptions.theme

Defined inDefined inDefined in

src/config.ts#270

saveModeInStoragesaveModeInStoragesaveModeInStorage

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

src/config.ts#275

editorClassNameeditorClassNameeditorClassName

editorClassName: string | false = false

Class name that can be appended to the editable area

See

• Config.iframeCSSLinks
• Config.iframeStyle

Example

Jodit.make('#editor', {
   editorClassName: 'some_my_class'
});

<style>
.some_my_class p{
   line-height: 16px;
}
</style>

Defined inDefined inDefined in

src/config.ts#297

classNameclassNameclassName

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

src/config.ts#318

stylestylestyle

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

src/config.ts#333

containerStylecontainerStylecontainerStyle

containerStyle: false | IDictionary = false

Example

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

Defined inDefined inDefined in

src/config.ts#347

styleValuesstyleValuesstyleValues

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

src/config.ts#364

triggerChangeEventtriggerChangeEventtriggerChangeEvent

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

src/config.ts#377

directiondirectiondirection

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 ofImplementation ofImplementation of

IViewOptions.direction

Defined inDefined inDefined in

src/config.ts#392

languagelanguagelanguage

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 ofImplementation ofImplementation of

IViewOptions.language

Defined inDefined inDefined in

src/config.ts#410

debugLanguagedebugLanguagedebugLanguage

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 ofImplementation ofImplementation of

IViewOptions.debugLanguage

Defined inDefined inDefined in

src/config.ts#426

i18ni18ni18n

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 ofImplementation ofImplementation of

IViewOptions.i18n

Defined inDefined inDefined in

src/config.ts#444

tabIndextabIndextabIndex

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

src/config.ts#451

toolbartoolbartoolbar

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 ofImplementation ofImplementation of

IViewOptions.toolbar

Defined inDefined inDefined in

src/config.ts#457

statusbarstatusbarstatusbar

statusbar: boolean = true

Boolean, whether the statusbar should be shown.

Defined inDefined inDefined in

src/config.ts#462

showTooltipshowTooltipshowTooltip

showTooltip: boolean = true

Show tooltip after mouse enter on the button

Implementation ofImplementation ofImplementation of

IViewOptions.showTooltip

Defined inDefined inDefined in

src/config.ts#467

showTooltipDelayshowTooltipDelayshowTooltipDelay

showTooltipDelay: number = 200

Delay before show tooltip

Implementation ofImplementation ofImplementation of

IViewOptions.showTooltipDelay

Defined inDefined inDefined in

src/config.ts#472

useNativeTooltipuseNativeTooltipuseNativeTooltip

useNativeTooltip: boolean = false

Instead of create custop tooltip - use native title tooltips

Implementation ofImplementation ofImplementation of

IViewOptions.useNativeTooltip

Defined inDefined inDefined in

src/config.ts#477

defaultActionOnPastedefaultActionOnPastedefaultActionOnPaste

defaultActionOnPaste: InsertMode = INSERT_AS_HTML

Default insert method

Default

insert_as_html

Defined inDefined inDefined in

src/config.ts#483

enterenterenter

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

Element that will be created when you press Enter

Defined inDefined inDefined in

src/config.ts#494

iframeiframeiframe

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 ofImplementation ofImplementation of

IViewOptions.iframe

Defined inDefined inDefined in

src/config.ts#508

editHTMLDocumentModeeditHTMLDocumentModeeditHTMLDocumentMode

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

src/config.ts#525

enterBlockenterBlockenterBlock

enterBlock: "div" | "p"

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

Defined inDefined inDefined in

src/config.ts#531

defaultModedefaultModedefaultMode

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

src/config.ts#545

useSplitModeuseSplitModeuseSplitMode

useSplitMode: boolean = false

Use split mode

Defined inDefined inDefined in

src/config.ts#550

colorscolorscolors

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

src/config.ts#561

colorPickerDefaultTabcolorPickerDefaultTabcolorPickerDefaultTab

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

The default tab color picker

Example

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

Defined inDefined inDefined in

src/config.ts#659

imageDefaultWidthimageDefaultWidthimageDefaultWidth

imageDefaultWidth: number = 300

Image size defaults to a larger image

Defined inDefined inDefined in

src/config.ts#664

removeButtonsremoveButtonsremoveButtons

removeButtons: string[] = []

Do not display these buttons that are on the list

Example

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

Implementation ofImplementation ofImplementation of

IViewOptions.removeButtons

Defined inDefined inDefined in

src/config.ts#675

disablePluginsdisablePluginsdisablePlugins

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

src/config.ts#690

extraPluginsextraPluginsextraPlugins

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

src/config.ts#702

basePathbasePathbasePath

Optional basePath: string

Base path for download extra plugins

Implementation ofImplementation ofImplementation of

IViewOptions.basePath

Defined inDefined inDefined in

src/config.ts#707

extraButtonsextraButtonsextraButtons

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

These buttons list will be added to the option. Buttons

Implementation ofImplementation ofImplementation of

IViewOptions.extraButtons

Defined inDefined inDefined in

src/config.ts#712

extraIconsextraIconsextraIcons

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 ofImplementation ofImplementation of

IViewOptions.extraIcons

Defined inDefined inDefined in

src/config.ts#750

createAttributescreateAttributescreateAttributes

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 ofImplementation ofImplementation of

IViewOptions.createAttributes

Defined inDefined inDefined in

src/config.ts#790

sizeLGsizeLGsizeLG

sizeLG: number = 900

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

Defined inDefined inDefined in

src/config.ts#799

sizeMDsizeMDsizeMD

sizeMD: number = 700

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

Defined inDefined inDefined in

src/config.ts#804

sizeSMsizeSMsizeSM

sizeSM: number = 400

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

Defined inDefined inDefined in

src/config.ts#809

buttonsbuttonsbuttons

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 ofImplementation ofImplementation of

IViewOptions.buttons

Defined inDefined inDefined in

src/config.ts#873

controlscontrolscontrols

controls: Controls<IViewBased<IViewOptions> | IJodit>

Behavior for buttons

Implementation ofImplementation ofImplementation of

IViewOptions.controls

Defined inDefined inDefined in

src/config.ts#946

eventseventsevents

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 ofImplementation ofImplementation of

IViewOptions.events

Defined inDefined inDefined in

src/config.ts#973

textIconstextIconstextIcons

textIcons: boolean = false

Buttons in toolbat without SVG - only texts

Implementation ofImplementation ofImplementation of

IViewOptions.textIcons

Defined inDefined inDefined in

src/config.ts#978

showBrowserColorPickershowBrowserColorPickershowBrowserColorPicker

showBrowserColorPicker: boolean = true

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

Defined inDefined inDefined in

src/config.ts#983

defaultAjaxOptionsdefaultAjaxOptionsdefaultAjaxOptions

defaultAjaxOptions: AjaxOptions

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

Defined inDefined inDefined in

src/core/request/config.ts#19

dialogdialogdialog

dialog: IDialogOptions

Defined inDefined inDefined in

src/modules/dialog/dialog.ts#46

filebrowserfilebrowserfilebrowser

filebrowser: IFileBrowserOptions

Defined inDefined inDefined in

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

historyhistoryhistory

history: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/modules/history/history.ts#31

imageeditorimageeditorimageeditor

imageeditor: ImageEditorOptions

Defined inDefined inDefined in

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

enableDragAndDropFileToEditorenableDragAndDropFileToEditorenableDragAndDropFileToEditor

enableDragAndDropFileToEditor: boolean

Enable drag and drop file editor

Defined inDefined inDefined in

src/modules/uploader/config.ts#26

uploaderuploaderuploader

uploader: IUploaderOptions<IUploader>

Defined inDefined inDefined in

src/modules/uploader/config.ts#27

addNewLineaddNewLineaddNewLine

addNewLine: boolean

Create helper

Defined inDefined inDefined in

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

addNewLineTagsTriggersaddNewLineTagsTriggersaddNewLineTagsTriggers

addNewLineTagsTriggers: HTMLTagNames[]

What kind of tags it will be impact

Defined inDefined inDefined in

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

addNewLineOnDBLClickaddNewLineOnDBLClickaddNewLineOnDBLClick

addNewLineOnDBLClick: boolean

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

Example

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

Defined inDefined inDefined in

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

addNewLineDeltaShowaddNewLineDeltaShowaddNewLineDeltaShow

addNewLineDeltaShow: number

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

Defined inDefined inDefined in

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

aiAssistantaiAssistantaiAssistant

aiAssistant: AiAssistantSettings

Defined inDefined inDefined in

src/plugins/ai-assistant/config.ts#115

deletedeletedelete

delete: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/backspace/config.ts#15

cleanHTMLcleanHTMLcleanHTML

cleanHTML: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

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

draggableTagsdraggableTagsdraggableTags

draggableTags: string | string[]

Draggable elements

Defined inDefined inDefined in

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

dtddtddtd

dtd: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/dtd/config.ts#16

autofocusautofocusautofocus

autofocus: boolean

Defined inDefined inDefined in

src/plugins/focus/focus.ts#20

cursorAfterAutofocuscursorAfterAutofocuscursorAfterAutofocus

cursorAfterAutofocus: "end" | "start"

Defined inDefined inDefined in

src/plugins/focus/focus.ts#21

saveSelectionOnBlursaveSelectionOnBlursaveSelectionOnBlur

saveSelectionOnBlur: boolean

Defined inDefined inDefined in

src/plugins/focus/focus.ts#22

defaultFontSizePointsdefaultFontSizePointsdefaultFontSizePoints

defaultFontSizePoints: "px" | "pt"

Defined inDefined inDefined in

src/plugins/font/config.ts#23

fullsizefullsizefullsize

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 ofImplementation ofImplementation of

IViewOptions.fullsize

Defined inDefined inDefined in

src/plugins/fullsize/config.ts#39

globalFullSizeglobalFullSizeglobalFullSize

globalFullSize: boolean

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

Implementation ofImplementation ofImplementation of

IViewOptions.globalFullSize

Defined inDefined inDefined in

src/plugins/fullsize/config.ts#44

iframeDefaultSrciframeDefaultSrciframeDefaultSrc

iframeDefaultSrc: string

You can redefine default page

Example

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

Defined inDefined inDefined in

src/plugins/iframe/config.ts#26

iframeBaseUrliframeBaseUrliframeBaseUrl

iframeBaseUrl: string

Base URL where the root directory for Config.iframe mode

Example

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

Defined inDefined inDefined in

src/plugins/iframe/config.ts#39

iframeTitleiframeTitleiframeTitle

iframeTitle: string

Iframe title's content

Defined inDefined inDefined in

src/plugins/iframe/config.ts#44

iframeDoctypeiframeDoctypeiframeDoctype

iframeDoctype: string

Iframe's DOCTYPE

Defined inDefined inDefined in

src/plugins/iframe/config.ts#49

iframeStyleiframeStyleiframeStyle

iframeStyle: string

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

Example

Jodit.make('#editor', {
   iframe: true,
   iframeStyle: 'html{margin: 0px;}',
})

Defined inDefined inDefined in

src/plugins/iframe/config.ts#61

iframeCSSLinksiframeCSSLinksiframeCSSLinks

iframeCSSLinks: string[]

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

Example

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

Defined inDefined inDefined in

src/plugins/iframe/config.ts#74

iframeSandboxiframeSandboxiframeSandbox

iframeSandbox: null | string

Custom sandbox attribute for the iframe.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox

Jodit.make('#editor', {
    iframe: true,
    iframeSandbox: 'allow-same-origin allow-scripts'
});

Empty string value means that all restrictions are enabled.

Defined inDefined inDefined in

src/plugins/iframe/config.ts#87

imageProcessorimageProcessorimageProcessor

imageProcessor: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

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

imageimageimage

image: ImagePropertiesOptions

Defined inDefined inDefined in

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

indentMarginindentMarginindentMargin

indentMargin: number

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

Defined inDefined inDefined in

src/plugins/indent/config.ts#52

popuppopuppopup

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

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

toolbarInlineDisabledButtonstoolbarInlineDisabledButtonstoolbarInlineDisabledButtons

toolbarInlineDisabledButtons: string[]

Defined inDefined inDefined in

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

toolbarInlinetoolbarInlinetoolbarInline

toolbarInline: boolean

Defined inDefined inDefined in

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

toolbarInlineForSelectiontoolbarInlineForSelectiontoolbarInlineForSelection

toolbarInlineForSelection: boolean

Defined inDefined inDefined in

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

toolbarInlineDisableFortoolbarInlineDisableFortoolbarInlineDisableFor

toolbarInlineDisableFor: string | string[]

Defined inDefined inDefined in

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

limitWordslimitWordslimitWords

limitWords: number | false

limit words count

Defined inDefined inDefined in

src/plugins/limit/config.ts#18

limitCharslimitCharslimitChars

limitChars: number | false

limit chars count

Defined inDefined inDefined in

src/plugins/limit/config.ts#23

limitHTMLlimitHTMLlimitHTML

limitHTML: false

limit html chars count

Defined inDefined inDefined in

src/plugins/limit/config.ts#28

defaultLineHeightdefaultLineHeightdefaultLineHeight

defaultLineHeight: null | number

Default line spacing for the entire editor

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

Defined inDefined inDefined in

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

linklinklink

link: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/link/config.ts#22

mediaInFakeBlockmediaInFakeBlockmediaInFakeBlock

mediaInFakeBlock: boolean

Decorate media elements

Defined inDefined inDefined in

src/plugins/media/config.ts#18

mediaFakeTagmediaFakeTagmediaFakeTag

mediaFakeTag: string

Decorate media element with tag

Defined inDefined inDefined in

src/plugins/media/config.ts#23

mediaBlocksmediaBlocksmediaBlocks

mediaBlocks: string[]

Media tags

Defined inDefined inDefined in

src/plugins/media/config.ts#28

mobileTapTimeoutmobileTapTimeoutmobileTapTimeout

mobileTapTimeout: number

Mobile timeout for CLICK emulation

Defined inDefined inDefined in

src/plugins/mobile/config.ts#29

toolbarAdaptivetoolbarAdaptivetoolbarAdaptive

toolbarAdaptive: boolean

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

Defined inDefined inDefined in

src/plugins/mobile/config.ts#34

buttonsMDbuttonsMDbuttonsMD

buttonsMD: ButtonsOption

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

Defined inDefined inDefined in

src/plugins/mobile/config.ts#39

buttonsSMbuttonsSMbuttonsSM

buttonsSM: ButtonsOption

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

Defined inDefined inDefined in

src/plugins/mobile/config.ts#44

buttonsXSbuttonsXSbuttonsXS

buttonsXS: ButtonsOption

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

Defined inDefined inDefined in

src/plugins/mobile/config.ts#49

askBeforePasteFromWordaskBeforePasteFromWordaskBeforePasteFromWord

askBeforePasteFromWord: boolean

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

Defined inDefined inDefined in

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

processPasteFromWordprocessPasteFromWordprocessPasteFromWord

processPasteFromWord: boolean

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

Defined inDefined inDefined in

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

defaultActionOnPasteFromWorddefaultActionOnPasteFromWorddefaultActionOnPasteFromWord

defaultActionOnPasteFromWord: null | InsertMode

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

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

Defined inDefined inDefined in

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

pasteFromWordActionListpasteFromWordActionListpasteFromWordActionList

pasteFromWordActionList: IUIOption[]

Options when inserting data from Word

Defined inDefined inDefined in

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

askBeforePasteHTMLaskBeforePasteHTMLaskBeforePasteHTML

askBeforePasteHTML: boolean

Ask before paste HTML in WYSIWYG mode

Defined inDefined inDefined in

src/plugins/paste/config.ts#34

memorizeChoiceWhenPasteFragmentmemorizeChoiceWhenPasteFragmentmemorizeChoiceWhenPasteFragment

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

src/plugins/paste/config.ts#40

processPasteHTMLprocessPasteHTMLprocessPasteHTML

processPasteHTML: boolean

Handle pasted text - similar to HTML

Defined inDefined inDefined in

src/plugins/paste/config.ts#45

nl2brInPlainTextnl2brInPlainTextnl2brInPlainText

nl2brInPlainText: boolean

Inserts HTML line breaks before all newlines in a string

Defined inDefined inDefined in

src/plugins/paste/config.ts#50

pasteExcludeStripTagspasteExcludeStripTagspasteExcludeStripTags

pasteExcludeStripTags: HTMLTagNames[]

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

Defined inDefined inDefined in

src/plugins/paste/config.ts#55

pasteHTMLActionListpasteHTMLActionListpasteHTMLActionList

pasteHTMLActionList: IUIOption[]

Options when inserting HTML string

Defined inDefined inDefined in

src/plugins/paste/config.ts#60

scrollToPastedContentscrollToPastedContentscrollToPastedContent

scrollToPastedContent: boolean

Scroll the editor to the pasted fragment

Defined inDefined inDefined in

src/plugins/paste/config.ts#65

showPlaceholdershowPlaceholdershowPlaceholder

showPlaceholder: boolean

Show placeholder

Example

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

Defined inDefined inDefined in

src/plugins/placeholder/config.ts#27

useInputsPlaceholderuseInputsPlaceholderuseInputsPlaceholder

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

src/plugins/placeholder/config.ts#39

placeholderplaceholderplaceholder

placeholder: string

Default placeholder

Example

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

Defined inDefined inDefined in

src/plugins/placeholder/config.ts#50

hidePoweredByJodithidePoweredByJodithidePoweredByJodit

hidePoweredByJodit: boolean

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

Defined inDefined inDefined in

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

tableAllowCellResizetableAllowCellResizetableAllowCellResize

tableAllowCellResize: boolean

Defined inDefined inDefined in

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

allowResizeXallowResizeXallowResizeX

allowResizeX: boolean

Defined inDefined inDefined in

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

allowResizeYallowResizeYallowResizeY

allowResizeY: boolean

Defined inDefined inDefined in

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

allowResizeTagsallowResizeTagsallowResizeTags

allowResizeTags: Set<HTMLTagNames>

Use true frame for editing iframe size

Defined inDefined inDefined in

src/plugins/resizer/config.ts#19

resizerresizerresizer

resizer: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/resizer/config.ts#21

useSearchuseSearchuseSearch

useSearch: boolean

Enable custom search plugin

Defined inDefined inDefined in

src/plugins/search/config.ts#26

searchsearchsearch

search: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/search/config.ts#28

tableAllowCellSelectiontableAllowCellSelectiontableAllowCellSelection

tableAllowCellSelection: boolean

Defined inDefined inDefined in

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

selectselectselect

select: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/select/config.ts#15

saveHeightInStoragesaveHeightInStoragesaveHeightInStorage

saveHeightInStorage: boolean

Defined inDefined inDefined in

src/plugins/size/config.ts#15

minWidthminWidthminWidth

minWidth: string | number

Defined inDefined inDefined in

src/plugins/size/config.ts#17

minHeightminHeightminHeight

minHeight: string | number

Defined inDefined inDefined in

src/plugins/size/config.ts#18

maxWidthmaxWidthmaxWidth

maxWidth: string | number

Defined inDefined inDefined in

src/plugins/size/config.ts#19

maxHeightmaxHeightmaxHeight

maxHeight: string | number

Defined inDefined inDefined in

src/plugins/size/config.ts#20

sourceEditorsourceEditorsourceEditor

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

Defined inDefined inDefined in

src/plugins/source/config.ts#20

sourceEditorNativeOptionssourceEditorNativeOptionssourceEditorNativeOptions

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 declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/source/config.ts#35

beautifyHTMLbeautifyHTMLbeautifyHTML

beautifyHTML: boolean

Beautify HTML then it possible

Defined inDefined inDefined in

src/plugins/source/config.ts#46

beautifyHTMLCDNUrlsJSbeautifyHTMLCDNUrlsJSbeautifyHTMLCDNUrlsJS

beautifyHTMLCDNUrlsJS: string[]

CDN URLs for HTML Beautifier

Defined inDefined inDefined in

src/plugins/source/config.ts#51

sourceEditorCDNUrlsJSsourceEditorCDNUrlsJSsourceEditorCDNUrlsJS

sourceEditorCDNUrlsJS: string[]

CDN URLs for ACE editor

Defined inDefined inDefined in

src/plugins/source/config.ts#56

speechRecognizespeechRecognizespeechRecognize

speechRecognize: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

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

spellcheckspellcheckspellcheck

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

src/plugins/spellcheck/config.ts#23

showCharsCountershowCharsCountershowCharsCounter

showCharsCounter: boolean

Defined inDefined inDefined in

src/plugins/stat/config.ts#15

countHTMLCharscountHTMLCharscountHTMLChars

countHTMLChars: boolean

Defined inDefined inDefined in

src/plugins/stat/config.ts#16

countTextSpacescountTextSpacescountTextSpaces

countTextSpaces: boolean

Defined inDefined inDefined in

src/plugins/stat/config.ts#17

showWordsCountershowWordsCountershowWordsCounter

showWordsCounter: boolean

Defined inDefined inDefined in

src/plugins/stat/config.ts#18

toolbarStickytoolbarStickytoolbarSticky

toolbarSticky: boolean

Example

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

Defined inDefined inDefined in

src/plugins/sticky/config.ts#23

toolbarDisableStickyForMobiletoolbarDisableStickyForMobiletoolbarDisableStickyForMobile

toolbarDisableStickyForMobile: boolean

Defined inDefined inDefined in

src/plugins/sticky/config.ts#25

toolbarStickyOffsettoolbarStickyOffsettoolbarStickyOffset

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

src/plugins/sticky/config.ts#38

specialCharactersspecialCharactersspecialCharacters

specialCharacters: string[]

Defined inDefined inDefined in

src/plugins/symbols/config.ts#19

usePopupForSpecialCharactersusePopupForSpecialCharactersusePopupForSpecialCharacters

usePopupForSpecialCharacters: boolean

Defined inDefined inDefined in

src/plugins/symbols/config.ts#20

tabtabtab

tab: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/tab/config.ts#15

tabletabletable

table: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/table/config.ts#22

videovideovideo

video: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

src/plugins/video/config.ts#23

wrapNodeswrapNodeswrapNodes

wrapNodes: Object

Type declarationType declarationType declaration

Defined inDefined inDefined in

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

showXPathInStatusbarshowXPathInStatusbarshowXPathInStatusbar

showXPathInStatusbar: boolean

Defined inDefined inDefined in

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

defaultOptionsdefaultOptionsdefaultOptions

get defaultOptions(): Config

ReturnsReturnsReturns

Config

Defined inDefined inDefined in

jodit/src/config.ts:987