Class: Config

config.Config

Default Editor's Configuration

ImplementsImplements

• IViewOptions

cachecache

cache: boolean = true

Use cache for heavy methods

Implementation ofImplementation of

IViewOptions.cache

Defined inDefined in

src/config.ts#47

defaultTimeoutdefaultTimeout

defaultTimeout: number = 100

Timeout of all asynchronous methods

Implementation ofImplementation of

IViewOptions.defaultTimeout

Defined inDefined in

src/config.ts#52

namespacenamespace

namespace: string = ''

Implementation ofImplementation of

IViewOptions.namespace

Defined inDefined in

src/config.ts#54

safeModesafeMode

safeMode: boolean = false

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

Defined inDefined in

src/config.ts#59

widthwidth

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 in

src/config.ts#83

heightheight

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 in

src/config.ts#107

safePluginsListsafePluginsList

safePluginsList: string[]

List of plugins that will be initialized in safe mode.

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

Defined inDefined in

src/config.ts#120

commandToHotkeyscommandToHotkeys

commandToHotkeys: IDictionary<string | string[]>

Defined inDefined in

src/config.ts#129

src/plugins/hotkeys/config.ts#17

licenselicense

license: string = ''

Reserved for the paid version of the editor

Defined inDefined in

src/config.ts#134

presetpreset

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 in

src/config.ts#145

presetspresets

presets: IDictionary

Defined inDefined in

src/config.ts#147

ownerDocumentownerDocument

ownerDocument: Document

Defined inDefined in

src/config.ts#160

ownerWindowownerWindow

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

IViewOptions.ownerWindow

Defined inDefined in

src/config.ts#168

shadowRootshadowRoot

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 of

IViewOptions.shadowRoot

Defined inDefined in

src/config.ts#197

zIndexzIndex

zIndex: number = 0

z-index For editor

Implementation ofImplementation of

IViewOptions.zIndex

Defined inDefined in

src/config.ts#202

readonlyreadonly

readonly: boolean = false

Change the read-only state of the editor

Implementation ofImplementation of

IViewOptions.readonly

Defined inDefined in

src/config.ts#207

disableddisabled

disabled: boolean = false

Change the disabled state of the editor

Implementation ofImplementation of

IViewOptions.disabled

Defined inDefined in

src/config.ts#212

activeButtonsInReadOnlyactiveButtonsInReadOnly

activeButtonsInReadOnly: string[]

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

Implementation ofImplementation of

IViewOptions.activeButtonsInReadOnly

Defined inDefined in

src/config.ts#217

allowCommandsInReadOnlyallowCommandsInReadOnly

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 in

src/config.ts#237

toolbarButtonSizetoolbarButtonSize

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 of

IViewOptions.toolbarButtonSize

Defined inDefined in

src/config.ts#249

allowTabNavigationallowTabNavigation

allowTabNavigation: boolean = false

Allow navigation in the toolbar of the editor by Tab key

Implementation ofImplementation of

IViewOptions.allowTabNavigation

Defined inDefined in

src/config.ts#254

inlineinline

inline: boolean = false

Inline editing mode

Defined inDefined in

src/config.ts#259

themetheme

theme: string = 'default'

Theme (can be "dark")

Example

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

Implementation ofImplementation of

IViewOptions.theme

Defined inDefined in

src/config.ts#270

saveModeInStoragesaveModeInStorage

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 in

src/config.ts#275

editorClassNameeditorClassName

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 in

src/config.ts#297

classNameclassName

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 in

src/config.ts#318

stylestyle

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 in

src/config.ts#333

containerStylecontainerStyle

containerStyle: false | IDictionary = false

Example

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

Defined inDefined in

src/config.ts#347

styleValuesstyleValues

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 in

src/config.ts#364

triggerChangeEventtriggerChangeEvent

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 in

src/config.ts#377

directiondirection

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 of

IViewOptions.direction

Defined inDefined in

src/config.ts#392

languagelanguage

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 of

IViewOptions.language

Defined inDefined in

src/config.ts#410

debugLanguagedebugLanguage

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 of

IViewOptions.debugLanguage

Defined inDefined in

src/config.ts#426

i18ni18n

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 of

IViewOptions.i18n

Defined inDefined in

src/config.ts#444

tabIndextabIndex

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 in

src/config.ts#451

toolbartoolbar

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 of

IViewOptions.toolbar

Defined inDefined in

src/config.ts#457

statusbarstatusbar

statusbar: boolean = true

Boolean, whether the statusbar should be shown.

Defined inDefined in

src/config.ts#462

showTooltipshowTooltip

showTooltip: boolean = true

Show tooltip after mouse enter on the button

Implementation ofImplementation of

IViewOptions.showTooltip

Defined inDefined in

src/config.ts#467

showTooltipDelayshowTooltipDelay

showTooltipDelay: number = 200

Delay before show tooltip

Implementation ofImplementation of

IViewOptions.showTooltipDelay

Defined inDefined in

src/config.ts#472

useNativeTooltipuseNativeTooltip

useNativeTooltip: boolean = false

Instead of create custop tooltip - use native title tooltips

Implementation ofImplementation of

IViewOptions.useNativeTooltip

Defined inDefined in

src/config.ts#477

defaultActionOnPastedefaultActionOnPaste

defaultActionOnPaste: InsertMode = INSERT_AS_HTML

Default insert method

Default

insert_as_html

Defined inDefined in

src/config.ts#483

enterenter

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

Element that will be created when you press Enter

Defined inDefined in

src/config.ts#494

iframeiframe

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 of

IViewOptions.iframe

Defined inDefined in

src/config.ts#508

editHTMLDocumentModeeditHTMLDocumentMode

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 in

src/config.ts#525

enterBlockenterBlock

enterBlock: "div" | "p"

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

Defined inDefined in

src/config.ts#531

defaultModedefaultMode

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 in

src/config.ts#545

useSplitModeuseSplitMode

useSplitMode: boolean = false

Use split mode

Defined inDefined in

src/config.ts#550

colorscolors

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 in

src/config.ts#561

colorPickerDefaultTabcolorPickerDefaultTab

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

The default tab color picker

Example

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

Defined inDefined in

src/config.ts#659

imageDefaultWidthimageDefaultWidth

imageDefaultWidth: number = 300

Image size defaults to a larger image

Defined inDefined in

src/config.ts#664

removeButtonsremoveButtons

removeButtons: string[] = []

Do not display these buttons that are on the list

Example

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

Implementation ofImplementation of

IViewOptions.removeButtons

Defined inDefined in

src/config.ts#675

disablePluginsdisablePlugins

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 in

src/config.ts#690

extraPluginsextraPlugins

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 in

src/config.ts#702

basePathbasePath

Optional basePath: string

Base path for download extra plugins

Implementation ofImplementation of

IViewOptions.basePath

Defined inDefined in

src/config.ts#707

extraButtonsextraButtons

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

These buttons list will be added to the option. Buttons

Implementation ofImplementation of

IViewOptions.extraButtons

Defined inDefined in

src/config.ts#712

extraIconsextraIcons

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 of

IViewOptions.extraIcons

Defined inDefined in

src/config.ts#750

createAttributescreateAttributes

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 of

IViewOptions.createAttributes

Defined inDefined in

src/config.ts#790

sizeLGsizeLG

sizeLG: number = 900

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

Defined inDefined in

src/config.ts#799

sizeMDsizeMD

sizeMD: number = 700

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

Defined inDefined in

src/config.ts#804

sizeSMsizeSM

sizeSM: number = 400

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

Defined inDefined in

src/config.ts#809

buttonsbuttons

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 of

IViewOptions.buttons

Defined inDefined in

src/config.ts#873

controlscontrols

controls: Controls<IViewBased<IViewOptions> | IJodit>

Behavior for buttons

Implementation ofImplementation of

IViewOptions.controls

Defined inDefined in

src/config.ts#946

eventsevents

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 of

IViewOptions.events

Defined inDefined in

src/config.ts#973

textIconstextIcons

textIcons: boolean = false

Buttons in toolbat without SVG - only texts

Implementation ofImplementation of

IViewOptions.textIcons

Defined inDefined in

src/config.ts#978

showBrowserColorPickershowBrowserColorPicker

showBrowserColorPicker: boolean = true

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

Defined inDefined in

src/config.ts#983

defaultAjaxOptionsdefaultAjaxOptions

defaultAjaxOptions: AjaxOptions

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

Defined inDefined in

src/core/request/config.ts#20

dialogdialog

dialog: IDialogOptions

Defined inDefined in

src/modules/dialog/dialog.ts#47

filebrowserfilebrowser

filebrowser: IFileBrowserOptions

Defined inDefined in

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

historyhistory

history: Object

Type declarationType declaration

Defined inDefined in

src/modules/history/history.ts#32

imageeditorimageeditor

imageeditor: ImageEditorOptions

Defined inDefined in

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

enableDragAndDropFileToEditorenableDragAndDropFileToEditor

enableDragAndDropFileToEditor: boolean

Enable drag and drop file editor

Defined inDefined in

src/modules/uploader/config.ts#27

uploaderuploader

uploader: IUploaderOptions<IUploader>

Defined inDefined in

src/modules/uploader/config.ts#28

addNewLineaddNewLine

addNewLine: boolean

Create helper

Defined inDefined in

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

addNewLineTagsTriggersaddNewLineTagsTriggers

addNewLineTagsTriggers: HTMLTagNames[]

What kind of tags it will be impact

Defined inDefined in

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

addNewLineOnDBLClickaddNewLineOnDBLClick

addNewLineOnDBLClick: boolean

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

Example

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

Defined inDefined in

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

addNewLineDeltaShowaddNewLineDeltaShow

addNewLineDeltaShow: number

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

Defined inDefined in

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

aiAssistantaiAssistant

aiAssistant: AiAssistantSettings

Defined inDefined in

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

deletedelete

delete: Object

Type declarationType declaration

Defined inDefined in

src/plugins/backspace/config.ts#15

cleanHTMLcleanHTML

cleanHTML: Object

Type declarationType declaration

Defined inDefined in

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

draggableTagsdraggableTags

draggableTags: string | string[]

Draggable elements

Defined inDefined in

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

dtddtd

dtd: Object

Type declarationType declaration

Defined inDefined in

src/plugins/dtd/config.ts#17

autofocusautofocus

autofocus: boolean

Defined inDefined in

src/plugins/focus/focus.ts#21

cursorAfterAutofocuscursorAfterAutofocus

cursorAfterAutofocus: "end" | "start"

Defined inDefined in

src/plugins/focus/focus.ts#22

saveSelectionOnBlursaveSelectionOnBlur

saveSelectionOnBlur: boolean

Defined inDefined in

src/plugins/focus/focus.ts#23

defaultFontSizePointsdefaultFontSizePoints

defaultFontSizePoints: "px" | "pt"

Defined inDefined in

src/plugins/font/config.ts#24

fullsizefullsize

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 of

IViewOptions.fullsize

Defined inDefined in

src/plugins/fullsize/config.ts#40

globalFullSizeglobalFullSize

globalFullSize: boolean

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

Implementation ofImplementation of

IViewOptions.globalFullSize

Defined inDefined in

src/plugins/fullsize/config.ts#45

iframeDefaultSrciframeDefaultSrc

iframeDefaultSrc: string

You can redefine default page

Example

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

Defined inDefined in

src/plugins/iframe/config.ts#26

iframeBaseUrliframeBaseUrl

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

src/plugins/iframe/config.ts#39

iframeTitleiframeTitle

iframeTitle: string

Iframe title's content

Defined inDefined in

src/plugins/iframe/config.ts#44

iframeDoctypeiframeDoctype

iframeDoctype: string

Iframe's DOCTYPE

Defined inDefined in

src/plugins/iframe/config.ts#49

iframeStyleiframeStyle

iframeStyle: string

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

Example

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

Defined inDefined in

src/plugins/iframe/config.ts#61

iframeCSSLinksiframeCSSLinks

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

src/plugins/iframe/config.ts#74

imageProcessorimageProcessor

imageProcessor: Object

Type declarationType declaration

Defined inDefined in

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

imageimage

image: ImagePropertiesOptions

Defined inDefined in

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

indentMarginindentMargin

indentMargin: number

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

Defined inDefined in

src/plugins/indent/config.ts#53

popuppopup

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 in

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

toolbarInlineDisabledButtonstoolbarInlineDisabledButtons

toolbarInlineDisabledButtons: string[]

Defined inDefined in

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

toolbarInlinetoolbarInline

toolbarInline: boolean

Defined inDefined in

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

toolbarInlineForSelectiontoolbarInlineForSelection

toolbarInlineForSelection: boolean

Defined inDefined in

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

toolbarInlineDisableFortoolbarInlineDisableFor

toolbarInlineDisableFor: string | string[]

Defined inDefined in

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

limitWordslimitWords

limitWords: number | false

limit words count

Defined inDefined in

src/plugins/limit/config.ts#18

limitCharslimitChars

limitChars: number | false

limit chars count

Defined inDefined in

src/plugins/limit/config.ts#23

limitHTMLlimitHTML

limitHTML: false

limit html chars count

Defined inDefined in

src/plugins/limit/config.ts#28

defaultLineHeightdefaultLineHeight

defaultLineHeight: null | number

Default line spacing for the entire editor

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

Defined inDefined in

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

linklink

link: Object

Type declarationType declaration

Defined inDefined in

src/plugins/link/config.ts#23

mediaInFakeBlockmediaInFakeBlock

mediaInFakeBlock: boolean

Decorate media elements

Defined inDefined in

src/plugins/media/config.ts#18

mediaFakeTagmediaFakeTag

mediaFakeTag: string

Decorate media element with tag

Defined inDefined in

src/plugins/media/config.ts#23

mediaBlocksmediaBlocks

mediaBlocks: string[]

Media tags

Defined inDefined in

src/plugins/media/config.ts#28

mobileTapTimeoutmobileTapTimeout

mobileTapTimeout: number

Mobile timeout for CLICK emulation

Defined inDefined in

src/plugins/mobile/config.ts#30

toolbarAdaptivetoolbarAdaptive

toolbarAdaptive: boolean

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

Defined inDefined in

src/plugins/mobile/config.ts#35

buttonsMDbuttonsMD

buttonsMD: ButtonsOption

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

Defined inDefined in

src/plugins/mobile/config.ts#40

buttonsSMbuttonsSM

buttonsSM: ButtonsOption

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

Defined inDefined in

src/plugins/mobile/config.ts#45

buttonsXSbuttonsXS

buttonsXS: ButtonsOption

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

Defined inDefined in

src/plugins/mobile/config.ts#50

askBeforePasteFromWordaskBeforePasteFromWord

askBeforePasteFromWord: boolean

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

Defined inDefined in

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

processPasteFromWordprocessPasteFromWord

processPasteFromWord: boolean

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

Defined inDefined in

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

defaultActionOnPasteFromWorddefaultActionOnPasteFromWord

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 in

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

pasteFromWordActionListpasteFromWordActionList

pasteFromWordActionList: IUIOption[]

Options when inserting data from Word

Defined inDefined in

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

askBeforePasteHTMLaskBeforePasteHTML

askBeforePasteHTML: boolean

Ask before paste HTML in WYSIWYG mode

Defined inDefined in

src/plugins/paste/config.ts#35

memorizeChoiceWhenPasteFragmentmemorizeChoiceWhenPasteFragment

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 in

src/plugins/paste/config.ts#41

processPasteHTMLprocessPasteHTML

processPasteHTML: boolean

Handle pasted text - similar to HTML

Defined inDefined in

src/plugins/paste/config.ts#46

nl2brInPlainTextnl2brInPlainText

nl2brInPlainText: boolean

Inserts HTML line breaks before all newlines in a string

Defined inDefined in

src/plugins/paste/config.ts#51

pasteExcludeStripTagspasteExcludeStripTags

pasteExcludeStripTags: HTMLTagNames[]

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

Defined inDefined in

src/plugins/paste/config.ts#56

pasteHTMLActionListpasteHTMLActionList

pasteHTMLActionList: IUIOption[]

Options when inserting HTML string

Defined inDefined in

src/plugins/paste/config.ts#61

scrollToPastedContentscrollToPastedContent

scrollToPastedContent: boolean

Scroll the editor to the pasted fragment

Defined inDefined in

src/plugins/paste/config.ts#66

showPlaceholdershowPlaceholder

showPlaceholder: boolean

Show placeholder

Example

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

Defined inDefined in

src/plugins/placeholder/config.ts#27

useInputsPlaceholderuseInputsPlaceholder

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 in

src/plugins/placeholder/config.ts#39

placeholderplaceholder

placeholder: string

Default placeholder

Example

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

Defined inDefined in

src/plugins/placeholder/config.ts#50

hidePoweredByJodithidePoweredByJodit

hidePoweredByJodit: boolean

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

Defined inDefined in

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

tableAllowCellResizetableAllowCellResize

tableAllowCellResize: boolean

Defined inDefined in

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

allowResizeXallowResizeX

allowResizeX: boolean

Defined inDefined in

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

allowResizeYallowResizeY

allowResizeY: boolean

Defined inDefined in

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

allowResizeTagsallowResizeTags

allowResizeTags: Set<HTMLTagNames>

Use true frame for editing iframe size

Defined inDefined in

src/plugins/resizer/config.ts#20

resizerresizer

resizer: Object

Type declarationType declaration

Defined inDefined in

src/plugins/resizer/config.ts#22

useSearchuseSearch

useSearch: boolean

Enable custom search plugin

Defined inDefined in

src/plugins/search/config.ts#26

searchsearch

search: Object

Type declarationType declaration

Defined inDefined in

src/plugins/search/config.ts#28

tableAllowCellSelectiontableAllowCellSelection

tableAllowCellSelection: boolean

Defined inDefined in

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

selectselect

select: Object

Type declarationType declaration

Defined inDefined in

src/plugins/select/config.ts#15

saveHeightInStoragesaveHeightInStorage

saveHeightInStorage: boolean

Defined inDefined in

src/plugins/size/config.ts#15

minWidthminWidth

minWidth: string | number

Defined inDefined in

src/plugins/size/config.ts#17

minHeightminHeight

minHeight: string | number

Defined inDefined in

src/plugins/size/config.ts#18

maxWidthmaxWidth

maxWidth: string | number

Defined inDefined in

src/plugins/size/config.ts#19

maxHeightmaxHeight

maxHeight: string | number

Defined inDefined in

src/plugins/size/config.ts#20

sourceEditorsourceEditor

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

Defined inDefined in

src/plugins/source/config.ts#21

sourceEditorNativeOptionssourceEditorNativeOptions

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 declaration

Defined inDefined in

src/plugins/source/config.ts#36

beautifyHTMLbeautifyHTML

beautifyHTML: boolean

Beautify HTML then it possible

Defined inDefined in

src/plugins/source/config.ts#47

beautifyHTMLCDNUrlsJSbeautifyHTMLCDNUrlsJS

beautifyHTMLCDNUrlsJS: string[]

CDN URLs for HTML Beautifier

Defined inDefined in

src/plugins/source/config.ts#52

sourceEditorCDNUrlsJSsourceEditorCDNUrlsJS

sourceEditorCDNUrlsJS: string[]

CDN URLs for ACE editor

Defined inDefined in

src/plugins/source/config.ts#57

speechRecognizespeechRecognize

speechRecognize: Object

Type declarationType declaration

Defined inDefined in

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

spellcheckspellcheck

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 in

src/plugins/spellcheck/config.ts#24

showCharsCountershowCharsCounter

showCharsCounter: boolean

Defined inDefined in

src/plugins/stat/config.ts#15

countHTMLCharscountHTMLChars

countHTMLChars: boolean

Defined inDefined in

src/plugins/stat/config.ts#16

showWordsCountershowWordsCounter

showWordsCounter: boolean

Defined inDefined in

src/plugins/stat/config.ts#17

toolbarStickytoolbarSticky

toolbarSticky: boolean

Example

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

Defined inDefined in

src/plugins/sticky/config.ts#23

toolbarDisableStickyForMobiletoolbarDisableStickyForMobile

toolbarDisableStickyForMobile: boolean

Defined inDefined in

src/plugins/sticky/config.ts#25

toolbarStickyOffsettoolbarStickyOffset

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 in

src/plugins/sticky/config.ts#38

specialCharactersspecialCharacters

specialCharacters: string[]

Defined inDefined in

src/plugins/symbols/config.ts#20

usePopupForSpecialCharactersusePopupForSpecialCharacters

usePopupForSpecialCharacters: boolean

Defined inDefined in

src/plugins/symbols/config.ts#21

tabtab

tab: Object

Type declarationType declaration

Defined inDefined in

src/plugins/tab/config.ts#15

tabletable

table: Object

Type declarationType declaration

Defined inDefined in

src/plugins/table/config.ts#23

wrapNodeswrapNodes

wrapNodes: Object

Type declarationType declaration

Defined inDefined in

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

showXPathInStatusbarshowXPathInStatusbar

showXPathInStatusbar: boolean

Defined inDefined in

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

defaultOptionsdefaultOptions

get defaultOptions(): Config

ReturnsReturns

Config

Defined inDefined in

jodit/src/config.ts:987