Jodit

jodit.Jodit

The base class of all Jodit UI components. Provides work with a life cycle.

Hierarchy

Implements

STATUSES

Static STATUSES: Object = STATUSES

Type declaration

Name Type
beforeInit "beforeInit"
ready "ready"
beforeDestruct "beforeDestruct"
destructed "destructed"

Inherited from

ViewWithToolbar.STATUSES

Defined in

src/core/component/component.ts#40


async

async: IAsync

Implementation of

IJodit.async

Inherited from

ViewWithToolbar.async

Defined in

src/core/component/component.ts#44


uid

Readonly uid: string

Implementation of

IJodit.uid

Inherited from

ViewWithToolbar.uid

Defined in

src/core/component/component.ts#59


ownerWindow

ownerWindow: Window = window

The window in which jodit was created

Implementation of

IJodit.ownerWindow

Inherited from

ViewWithToolbar.ownerWindow

Defined in

src/core/component/component.ts#109


TOOLBAR

TOOLBAR: IToolbarCollection

Inherited from

ViewWithToolbar.TOOLBAR

Defined in

src/core/view/view-with-toolbar.ts#35


toolbar

toolbar: IToolbarCollection

Implementation of

IJodit.toolbar

Inherited from

ViewWithToolbar.toolbar

Defined in

src/core/view/view-with-toolbar.ts#36


registeredButtons

registeredButtons: Set<IPluginButton>

Implementation of

IJodit.registeredButtons

Inherited from

ViewWithToolbar.registeredButtons

Defined in

src/core/view/view-with-toolbar.ts#88


isView

Readonly isView: true

Implementation of

IJodit.isView

Inherited from

ViewWithToolbar.isView

Defined in

src/core/view/view.ts#61


parent

parent: Nullable<IViewBased<IViewOptions>> = null

Implementation of

IJodit.parent

Inherited from

ViewWithToolbar.parent

Defined in

src/core/view/view.ts#62


mods

Readonly mods: IDictionary<null | string | boolean> = {}

Implementation of

IJodit.mods

Inherited from

ViewWithToolbar.mods

Defined in

src/core/view/view.ts#64


id

id: string

ID attribute for a source element, id add {id}_editor it's editor's id

Implementation of

IJodit.id

Inherited from

ViewWithToolbar.id

Defined in

src/core/view/view.ts#69


components

Readonly components: Set<IComponent<IViewBased<IViewOptions>>>

All created ViewComponent inside this view

Implementation of

IJodit.components

Inherited from

ViewWithToolbar.components

Defined in

src/core/view/view.ts#74


ES

Static Readonly ES: "es5" | "es2015" | "es2018" | "es2021" = ES

Inherited from

ViewWithToolbar.ES

Defined in

src/core/view/view.ts#88


version

Static Readonly version: string = APP_VERSION

Inherited from

ViewWithToolbar.version

Defined in

src/core/view/view.ts#89


esNext

Static Readonly esNext: boolean = IS_ES_NEXT

Inherited from

ViewWithToolbar.esNext

Defined in

src/core/view/view.ts#90


esModern

Static Readonly esModern: boolean = IS_ES_MODERN

Inherited from

ViewWithToolbar.esModern

Defined in

src/core/view/view.ts#91


create

Readonly create: ICreate

Implementation of

IJodit.create

Inherited from

ViewWithToolbar.create

Defined in

src/core/view/view.ts#127


events

events: IEventEmitter

Implementation of

IJodit.events

Inherited from

ViewWithToolbar.events

Defined in

src/core/view/view.ts#146


OPTIONS

OPTIONS: IViewOptions = View.defaultOptions

Implementation of

IJodit.OPTIONS

Inherited from

ViewWithToolbar.OPTIONS

Defined in

src/core/view/view.ts#164


isJodit

Readonly isJodit: true

Define if object is Jodit

Implementation of

IJodit.isJodit

Inherited from

ViewWithToolbar.isJodit

Defined in

src/jodit.ts#131


fatMode

Static fatMode: boolean = FAT_MODE

Defined in

src/jodit.ts#204


plugins

Static Readonly plugins: IPluginSystem = pluginSystem

Defined in

src/jodit.ts#206


modules

Static modules: modules

Defined in

src/jodit.ts#208


ns

Static ns: modules

Defined in

src/jodit.ts#209


decorators

Static Readonly decorators: IDictionary<Function> = {}

Defined in

src/jodit.ts#211


constants

Static Readonly constants: constants = constants

Defined in

src/jodit.ts#212


instances

Static Readonly instances: IDictionary<IJodit> = instances

Defined in

src/jodit.ts#213


lang

Static Readonly lang: any = lang

Defined in

src/jodit.ts#215


core

Static Readonly core: Object

Type declaration

Name Type
Plugin typeof Plugin
Defined in

src/jodit.ts#217


editorIsActive

editorIsActive: boolean = false

Editor has focus in this time

Implementation of

IJodit.editorIsActive

Defined in

src/jodit.ts#236


selection

Readonly selection: Selection

Implementation of

IJodit.selection

Defined in

src/jodit.ts#353


currentPlace

currentPlace: IWorkPlace

Implementation of

IJodit.currentPlace

Defined in

src/jodit.ts#1268


places

places: IWorkPlace[]

Implementation of

IJodit.places

Defined in

src/jodit.ts#1269

componentName

get componentName(): string

Returns

string

Implementation of

IJodit.componentName

Defined in

src/core/component/component.ts#46


ownerDocument

get ownerDocument(): Document

The document in which jodit was created

Returns

Document

Implementation of

IJodit.ownerDocument

Defined in

src/core/component/component.ts#95


od

get od(): Document

Shortcut for this.ownerDocument

Returns

Document

Implementation of

IJodit.od

Defined in

src/core/component/component.ts#102


ow

get ow(): Window

Returns

Window

Implementation of

IJodit.ow

Defined in

src/core/component/component.ts#110


isReady

get isReady(): boolean

Component is ready for work

Returns

boolean

Implementation of

IJodit.isReady

Defined in

src/core/component/component.ts#145


isDestructed

get isDestructed(): boolean

Component was destructed

Returns

boolean

Implementation of

IJodit.isDestructed

Defined in

src/core/component/component.ts#152


isInDestruct

get isInDestruct(): boolean

The component is currently undergoing destructuring or has already been destroyed.
Those. you should not the app froze new events on him now or do anything else with him.

Returns

boolean

Implementation of

IJodit.isInDestruct

Defined in

src/core/component/component.ts#160


componentStatus

get componentStatus(): ComponentStatus

Current component status

Returns

ComponentStatus

Implementation of

IJodit.componentStatus

Defined in

src/core/component/component.ts#210

set componentStatus(componentStatus): void

Setter for current component status

Parameters

Name Type
componentStatus ComponentStatus

Returns

void

Implementation of

IJodit.componentStatus

Defined in

src/core/component/component.ts#217


toolbarContainer

get toolbarContainer(): HTMLElement

Container for toolbar

Returns

HTMLElement

Implementation of

IJodit.toolbarContainer

Defined in

src/core/view/view-with-toolbar.ts#44


basePath

get basePath(): string

Get a path for loading extra staff

Returns

string

Implementation of

IJodit.basePath

Defined in

src/core/view/view.ts#79


buffer

get buffer(): IStorage<StorageValueType>

Some extra data inside editor

Returns

IStorage<StorageValueType>

See

copyformat plugin

Implementation of

IJodit.buffer

Defined in

src/core/view/view.ts#106


storage

get storage(): IStorage<StorageValueType>

Container for persistent set/get value

Returns

IStorage<StorageValueType>

Implementation of

IJodit.storage

Defined in

src/core/view/view.ts#123


c

get c(): this["create"]

Short alias for create

Returns

this["create"]

Implementation of

IJodit.c

Defined in

src/core/view/view.ts#133


e

get e(): this["events"]

Short alias for events

Returns

this["events"]

Implementation of

IJodit.e

Defined in

src/core/view/view.ts#152


progressbar

get progressbar(): IProgressBar

progress_bar Progress bar

Returns

IProgressBar

Implementation of

IJodit.progressbar

Defined in

src/core/view/view.ts#160


o

get o(): this["options"]

Short alias for options

Returns

this["options"]

Implementation of

IJodit.o

Defined in

src/core/view/view.ts#177


isLocked

get isLocked(): boolean

View is locked

Returns

boolean

Implementation of

IJodit.isLocked

Defined in

src/core/view/view.ts#208


isFullSize

get isFullSize(): boolean

View is in fullSize

Returns

boolean

Implementation of

IJodit.isFullSize

Defined in

src/core/view/view.ts#242


ready

get ready(): Promise<IJodit>

Returns

Promise<IJodit>

Defined in

src/jodit.ts#122


text

get text(): string

Plain text editor's value

Returns

string

Implementation of

IJodit.text

Defined in

src/jodit.ts#136


defaultTimeout

get defaultTimeout(): number

Return a default timeout period in milliseconds for some debounce or throttle functions.
By default, {history.timeout} options

Returns

number

Implementation of

IJodit.defaultTimeout

Defined in

src/jodit.ts#151


defaultOptions

get defaultOptions(): Config

Default settings

Returns

Config

Defined in

src/jodit.ts#200


createInside

get createInside(): ICreate

Returns

ICreate

Implementation of

IJodit.createInside

Defined in

src/jodit.ts#229


element

get element(): HTMLElement

element It contains source element

Returns

HTMLElement

Implementation of

IJodit.element

Defined in

src/jodit.ts#250


editor

get editor(): HTMLDivElement | HTMLBodyElement

editor It contains the root element editor

Returns

HTMLDivElement | HTMLBodyElement

Implementation of

IJodit.editor

Defined in

src/jodit.ts#257

set editor(editor): void

Parameters

Name Type
editor HTMLDivElement | HTMLBodyElement

Returns

void

Implementation of

IJodit.editor

Defined in

src/jodit.ts#261


container

get container(): HTMLDivElement

Container for all staff

Returns

HTMLDivElement

Implementation of

IJodit.container

Defined in

src/jodit.ts#268

set container(container): void

Parameters

Name Type
container HTMLDivElement

Returns

void

Implementation of

IJodit.container

Defined in

src/jodit.ts#272


workplace

get workplace(): HTMLDivElement

workplace It contains source and wysiwyg editors

Returns

HTMLDivElement

Implementation of

IJodit.workplace

Defined in

src/jodit.ts#279


message

get message(): IMessages

Returns

IMessages

Implementation of

IJodit.message

Defined in

src/jodit.ts#284


statusbar

get statusbar(): IStatusBar

Statusbar module

Returns

IStatusBar

Implementation of

IJodit.statusbar

Defined in

src/jodit.ts#291


iframe

get iframe(): void | HTMLIFrameElement

iframe Iframe for iframe mode

Returns

void | HTMLIFrameElement

Implementation of

IJodit.iframe

Defined in

src/jodit.ts#298

set iframe(iframe): void

Parameters

Name Type
iframe void | HTMLIFrameElement

Returns

void

Implementation of

IJodit.iframe

Defined in

src/jodit.ts#302


history

get history(): IHistory

Returns

IHistory

Implementation of

IJodit.history

Defined in

src/jodit.ts#306


editorWindow

get editorWindow(): Window

In iframe mode editor's window can be different by owner

Returns

Window

Implementation of

IJodit.editorWindow

Defined in

src/jodit.ts#313

set editorWindow(win): void

Parameters

Name Type
win Window

Returns

void

Implementation of

IJodit.editorWindow

Defined in

src/jodit.ts#317


ew

get ew(): this["editorWindow"]

Alias for this.ew

Returns

this["editorWindow"]

Implementation of

IJodit.ew

Defined in

src/jodit.ts#324


editorDocument

get editorDocument(): Document

In iframe mode editor's window can be different by owner

Returns

Document

Implementation of

IJodit.editorDocument

Defined in

src/jodit.ts#331


ed

get ed(): this["editorDocument"]

Alias for this.ew

Returns

this["editorDocument"]

Implementation of

IJodit.ed

Defined in

src/jodit.ts#338


options

get options(): Config

options All Jodit settings default + second arguments of constructor

Returns

Config

Implementation of

IJodit.options

Defined in

src/jodit.ts#345

set options(opt): void

Parameters

Name Type
opt Config

Returns

void

Implementation of

IJodit.options

Defined in

src/jodit.ts#349


s

get s(): this["selection"]

Alias for this.selection

Returns

this["selection"]

Implementation of

IJodit.s

Defined in

src/jodit.ts#359


uploader

get uploader(): IUploader

Returns

IUploader

Implementation of

IJodit.uploader

Defined in

src/jodit.ts#364


filebrowser

get filebrowser(): IFileBrowser<IFileBrowserOptions>

Returns

IFileBrowser<IFileBrowserOptions>

Implementation of

IJodit.filebrowser

Defined in

src/jodit.ts#369


mode

get mode(): Modes

Editor's mode

Returns

Modes

Implementation of

IJodit.mode

Defined in

src/jodit.ts#416

set mode(mode): void

Parameters

Name Type
mode Modes

Returns

void

Implementation of

IJodit.mode

Defined in

src/jodit.ts#420


value

get value(): string

HTML value

Returns

string

Implementation of

IJodit.value

Defined in

src/jodit.ts#462

set value(html): void

Parameters

Name Type
html string

Returns

void

Implementation of

IJodit.value

Defined in

src/jodit.ts#466


isFocused

get isFocused(): boolean

Returns

boolean

Implementation of

IJodit.isFocused

Defined in

src/jodit.ts#1145

getFullElName

getFullElName(elementName): string

Calc BEM element class name

Parameters

Name Type Description
elementName string element name in the bem classification

Returns

string

Inherited from

ViewWithToolbar.getFullElName

Defined in

src/core/component/component.ts#65

getFullElName(elementName, mod): string

Parameters

Name Type
elementName string
mod string

Returns

string

Inherited from

ViewWithToolbar.getFullElName

Defined in

src/core/component/component.ts#66

getFullElName(elementName, mod, modValue): string

Parameters

Name Type
elementName string
mod string
modValue string | boolean

Returns

string

Inherited from

ViewWithToolbar.getFullElName

Defined in

src/core/component/component.ts#67


get

get<T>(chain, obj?): Nullable<T>

Safe get any field

Type parameters

Name
T

Parameters

Name Type Description
chain string the path to be traversed in the obj object
obj? IDictionary the object in which the value is searched

Returns

Nullable<T>

Example

private a = {
  b: {
    c: {
      e: {
        g: {
          color: 'red'
        }
      }
    }
  }
}

this.get('a.b.c.e.g.color'); // Safe access to color
// instead using optionsl chaining
this?.a?.b?.c?.e?.g?.color

Inherited from

ViewWithToolbar.get

Defined in

src/core/component/component.ts#138


bindDestruct

bindDestruct(component): this

Bind destructor to some View

Parameters

Name Type
component IComponent<IViewBased<IViewOptions>>

Returns

this

Inherited from

ViewWithToolbar.bindDestruct

Defined in

src/core/component/component.ts#170


setStatus

setStatus(componentStatus): void

Set component status

Parameters

Name Type Description
componentStatus ComponentStatus component status

Returns

void

See

ComponentStatus

Inherited from

ViewWithToolbar.setStatus

Defined in

src/core/component/component.ts#226


hookStatus

hookStatus(status, callback): void

Adds a handler for changing the component's status

Parameters

Name Type Description
status ComponentStatus the status at which the callback is triggered
callback (component: this) => void a function that will be called when the status is status

Returns

void

Inherited from

ViewWithToolbar.hookStatus

Defined in

src/core/component/component.ts#265


isInstanceOf

isInstanceOf<T>(c, constructorFunc): c is T

Type parameters

Name Type
T extends Component

Parameters

Name Type
c unknown
constructorFunc Function

Returns

c is T

Inherited from

ViewWithToolbar.isInstanceOf

Defined in

src/core/component/component.ts#283


dlg

dlg(this, options?): IDialog

Parameters

Name Type
this IViewBased<IViewOptions> & IDlgs
options? IDialogOptions

Returns

IDialog

Inherited from

Dlgs.dlg

Defined in

src/core/traits/dlgs.ts#17


confirm

confirm(this, msg, title, callback?): IDialog

Parameters

Name Type
this IViewBased<IViewOptions> & IDlgs
msg string
title undefined | string | (yes: boolean) => void
callback? (yes: boolean) => false | void

Returns

IDialog

Inherited from

Dlgs.confirm

Defined in

src/core/traits/dlgs.ts#33


prompt

prompt(this, msg, title, callback, placeholder?, defaultValue?): IDialog

Parameters

Name Type
this IViewBased<IViewOptions> & IDlgs
msg string
title undefined | string | () => false | void
callback (value: string) => false | void
placeholder? string
defaultValue? string

Returns

IDialog

Inherited from

Dlgs.prompt

Defined in

src/core/traits/dlgs.ts#49


alert

alert(this, msg, title?, callback?, className?): IDialog

Parameters

Name Type
this IViewBased<IViewOptions> & IDlgs
msg string | HTMLElement
title? string | () => false | void
callback? string | (dialog: IDialog) => false | void
className? string

Returns

IDialog

Inherited from

Dlgs.alert

Defined in

src/core/traits/dlgs.ts#71


getElm

getElm<T>(this, elementName): Nullable<HTMLElement>

Return element with BEM class name

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>> & IContainer & IElms

Parameters

Name Type
this T
elementName string

Returns

Nullable<HTMLElement>

Inherited from

ViewWithToolbar.getElm

Defined in

src/core/traits/elms.ts#18


getElms

getElms<T>(this, elementName): HTMLElement[]

Return elements with BEM class name

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>> & IContainer & IElms

Parameters

Name Type
this T
elementName string

Returns

HTMLElement[]

Inherited from

ViewWithToolbar.getElms

Defined in

src/core/traits/elms.ts#30


afterSetMod

afterSetMod(name, value): void

Parameters

Name Type
name string
value ModType

Returns

void

Inherited from

ViewWithToolbar.afterSetMod

Defined in

src/core/traits/mods.ts#23


setMod

setMod<T>(this, name, value, container?): T

Set/remove BEM class modification

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>> & IContainer & IMods

Parameters

Name Type Description
this T -
name string -
value ModType if null, mod will be removed
container? HTMLElement -

Returns

T

Inherited from

ViewWithToolbar.setMod

Defined in

src/core/traits/mods.ts#30


getMod

getMod(this, name): ModType

Get BEM class modification value

Parameters

Name Type
this IMods
name string

Returns

ModType

Inherited from

ViewWithToolbar.getMod

Defined in

src/core/traits/mods.ts#64


setPanel

setPanel(element): void

Change panel container

Parameters

Name Type
element string | HTMLElement

Returns

void

Inherited from

ViewWithToolbar.setPanel

Defined in

src/core/view/view-with-toolbar.ts#64


getRegisteredButtonGroups

getRegisteredButtonGroups(): IDictionary<string[]>

Returns

IDictionary<string[]>

Inherited from

ViewWithToolbar.getRegisteredButtonGroups

Defined in

src/core/view/view-with-toolbar.ts#91


registerButton

registerButton(btn): this

Register button for a group

Parameters

Name Type
btn IPluginButton

Returns

this

Inherited from

ViewWithToolbar.registerButton

Defined in

src/core/view/view-with-toolbar.ts#98


unregisterButton

unregisterButton(btn): this

Remove button from a group

Parameters

Name Type
btn IPluginButton

Returns

this

Inherited from

ViewWithToolbar.unregisterButton

Defined in

src/core/view/view-with-toolbar.ts#118


i18n

i18n(text, ...params): string

Internationalization method. Uses Jodit.lang object

Parameters

Name Type
text string
...params (string | number)[]

Returns

string

Inherited from

ViewWithToolbar.i18n

Defined in

src/core/view/view.ts#184


toggleFullSize

toggleFullSize(isFullSize?): void

Parameters

Name Type
isFullSize? boolean

Returns

void

Inherited from

ViewWithToolbar.toggleFullSize

Defined in

src/core/view/view.ts#190


isLockedNotBy

isLockedNotBy(name): boolean

Parameters

Name Type
name string

Returns

boolean

Inherited from

ViewWithToolbar.isLockedNotBy

Defined in

src/core/view/view.ts#212


getVersion

getVersion(): string

Return current version

Returns

string

Inherited from

ViewWithToolbar.getVersion

Defined in

src/core/view/view.ts#249


getVersion

getVersion(): string

Returns

string

Inherited from

ViewWithToolbar.getVersion

Defined in

src/core/view/view.ts#253


getInstance

getInstance<T>(module, options?): T

Make one instance of one module

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>>

Parameters

Name Type
module Function
options? object

Returns

T

Inherited from

ViewWithToolbar.getInstance

Defined in

src/core/view/view.ts#306

getInstance<T>(moduleName, options?): T

Type parameters

Name Type
T extends IComponent<IViewBased<IViewOptions>>

Parameters

Name Type
moduleName string
options? object

Returns

T

Inherited from

ViewWithToolbar.getInstance

Defined in

src/core/view/view.ts#307


className

className(): string

Returns

string

Inherited from

ViewWithToolbar.className

Defined in

src/jodit.ts#97


waitForReady

waitForReady(): Promise<IJodit>

Return promise for ready actions

Returns

Promise<IJodit>

Example

const jodit = Jodit.make('#editor');
await jodit.waitForReady();
jodit.e.fire('someAsyncLoadedPluginEvent', (test) => {
  alert(test);
});
Defined in

src/jodit.ts#112


atom

atom<T>(object): T

Method wrap usual object in Object helper for prevent deep object merging in options*

const editor = Jodit.make('#editor', {
  controls: {
    fontsize: {
      list: Jodit.atom([8, 9, 10])
    }
  }
});

In this case, the array [8, 9, 10] will not be combined with other arrays, but will replace them

Type parameters

Name
T

Parameters

Name Type
object T

Returns

T

Defined in

src/jodit.ts#170


make

make(element, options?): Jodit

Factory for creating Jodit instance

Parameters

Name Type Default value Description
element string | HTMLElement undefined -
options? Object undefined -
options.cache? boolean true Use cache for heavy methods
options.defaultTimeout? number 100 Timeout of all asynchronous methods
options.namespace? string '' -
options.safeMode? boolean false Editor loads completely without plugins. Useful when debugging your own plugin.
options.width? string | number 'auto' Editor's width Example javascript Jodit.make('.editor', { width: '100%', }) Example javascript Jodit.make('.editor', { width: 600, // equivalent for '600px' }) Example javascript Jodit.make('.editor', { width: 'auto', // autosize })
options.height? string | number 'auto' Editor's height Example javascript Jodit.make('.editor', { height: '100%', }) Example javascript Jodit.make('.editor', { height: 600, // equivalent for '600px' }) Example javascript Jodit.make('.editor', { height: 'auto', // default - autosize })
options.safePluginsList? (undefined | string)[] undefined List of plugins that will be initialized in safe mode. js Jodit.make('#editor', { safeMode: true, safePluginsList: ['about'], extraPlugins: ['yourPluginDev'] });
options.commandToHotkeys? Object undefined You can redefine hotkeys for some command Example js const jodit = Jodit.make('#editor', { commandToHotkeys: { bold: 'ctrl+shift+b', italic: ['ctrl+i', 'ctrl+b'], } })
options.license? string '' Reserved for the paid version of the editor
options.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 javascript Jodit.make('.editor', { preset: 'inline' });
options.presets? Object undefined -
options.ownerDocument? Object globalDocument -
options.ownerWindow? Object 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
options.shadowRoot? null | { getSelection?: } null Shadow root if Jodit was created in it html <div id="editor"></div> js 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>';
options.zIndex? number 0 z-index For editor
options.readonly? boolean false Change the read-only state of the editor
options.disabled? boolean false Change the disabled state of the editor
options.activeButtonsInReadOnly? (undefined | string)[] undefined In readOnly mode, some buttons can still be useful, for example, the button to view source code or print
options.allowCommandsInReadOnly? (undefined | string)[] undefined When the editor is in read-only mode, some commands can still be executed: javascript 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
options.toolbarButtonSize? "small" | "tiny" | "xsmall" | "middle" | "large" 'middle' Size of icons in the toolbar (can be "small", "middle", "large") Example javascript const editor = Jodit.make(".dark_editor", { toolbarButtonSize: "small" });
options.allowTabNavigation? boolean false Allow navigation in the toolbar of the editor by Tab key
options.inline? boolean false Inline editing mode
options.theme? string 'default' Theme (can be "dark") Example javascript const editor = Jodit.make(".dark_editor", { theme: "dark" });
options.saveModeInStorage? boolean false if set true, then the current mode is saved in a cookie, and is restored after a reload of the page
options.editorClassName? string | false false Class name that can be appended to the editable area See - Config.iframeCSSLinks - Config.iframeStyle Example javascript Jodit.make('#editor', { editorClassName: 'some_my_class' }); html <style> .some_my_class p{ line-height: 16px; } </style>
options.className? string | false false Class name that can be appended to the main editor container Example javascript const jodit = Jodit.make('#editor', { className: 'some_my_class' }); console.log(jodit.container.classList.contains('some_my_class')); // true html <style> .some_my_class { max-width: 600px; margin: 0 auto; } </style>
options.style? false | {} 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 javascript Jodit.make('#editor', { style: { font: '12px Arial', color: '#0c0c0c' } });
options.containerStyle? false | {} false Example javascript Jodit.make('#editor', { editorStyle: { font: '12px Arial', color: '#0c0c0c' } });
options.styleValues? Object {} 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 js const editor = Jodit.make('#editor', { styleValues: { 'color-text': 'red', colorBorder: 'black', 'color-panel': 'blue' } });
options.triggerChangeEvent? boolean true After all, changes in editors for textarea will call change trigger Example javascript const editor = Jodit.make('#editor'); document.getElementById('editor').addEventListener('change', function () { console.log(this.value); })
options.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 javascript Jodit.make('.editor', { direction: 'rtl' })
options.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 html <!-- include in you page lang file --> <script src="jodit/lang/de.js"></script> <script> var editor = Jodit.make('.editor', { language: 'de' }); </script>
options.debugLanguage? boolean false if true all Lang.i18n(key) return {key} Example html <script> var editor = Jodit.make('.editor', { debugLanguage: true }); console.log(editor.i18n("Test")); // {Test} </script>
options.i18n? false | {} false Collection of language pack data {en: {'Type something': 'Type something', ...}} Example javascript const editor = Jodit.make('#editor', { language: 'ru', i18n: { ru: { 'Type something': 'Начните что-либо вводить' } } }); console.log(editor.i18n('Type something')) //Начните что-либо вводить
options.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
options.toolbar? string | boolean | { component?: null | { async?: { delay?: ; setTimeout?: ; updateTimeout?: ; clearTimeout?: ; clear?: ; promise?: ; promiseState?: ; debounce?: ; microDebounce?: ; throttle?: ; requestIdleCallback?: ; requestIdlePromise?: ; cancelIdleCallback?: ; requestAnimationFrame?: ; cancelAnimationFrame?: ; destruct?: } ; ownerDocument?: {} ; od?: {} ; ownerWindow?: {} ; ow?: {} ; componentName?: string ; uid?: string ; isDestructed?: boolean ; isInDestruct?: boolean ; isReady?: boolean ; componentStatus?: "beforeInit" | "ready" | "beforeDestruct" | "destructed" ; destruct?: ; get?: ; className?: ; getFullElName?: ; setStatus?: ; hookStatus?: ; bindDestruct?: } } true Boolean, whether the toolbar should be shown. Alternatively, a valid css-selector-string to use an element as toolbar container.
options.statusbar? boolean true Boolean, whether the statusbar should be shown.
options.showTooltip? boolean true Show tooltip after mouse enter on the button
options.showTooltipDelay? number 200 Delay before show tooltip
options.useNativeTooltip? boolean false Instead of create custop tooltip - use native title tooltips
options.defaultActionOnPaste? "insert_as_html" | "insert_clear_html" | "insert_as_text" | "insert_only_text" INSERT_AS_HTML Default insert method Default ts insert_as_html
options.enter? "br" | "div" | "p" consts.PARAGRAPH Element that will be created when you press Enter
options.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 javascript 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}'; });
options.editHTMLDocumentMode? boolean false Allow editing the entire HTML document(html, head) > Works together with the iframe option. Example js 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>';
options.enterBlock? "div" | "p" undefined Use when you need to insert new block element use enter option if not set
options.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 javascript var editor = Jodit.make('#editor', { defaultMode: Jodit.MODE_SPLIT }); console.log(editor.getRealMode())
options.useSplitMode? boolean false Use split mode
options.colors? (undefined | string)[] | {} undefined The colors in HEX representation to select a color for the background and for the text in colorpicker Example javascript Jodit.make('#editor', { colors: ['#ff0000', '#00ff00', '#0000ff'] })
options.colorPickerDefaultTab? "background" | "color" 'background' The default tab color picker Example javascript Jodit.make('#editor2', { colorPickerDefaultTab: 'color' })
options.imageDefaultWidth? number 300 Image size defaults to a larger image
options.removeButtons? (undefined | string)[] [] Do not display these buttons that are on the list Example javascript Jodit.make('#editor2', { removeButtons: ['hr', 'source'] });
options.disablePlugins? string | (undefined | string)[] [] Do not init these plugins Example typescript var editor = Jodit.make('.editor', { disablePlugins: 'table,iframe' }); //or var editor = Jodit.make('.editor', { disablePlugins: ['table', 'iframe'] });
options.extraPlugins? (undefined | string | { name?: string ; url?: string })[] [] Init and download extra plugins Example typescript var editor = Jodit.make('.editor', { extraPlugins: ['emoji'] }); It will try load %SCRIPT_PATH%/plugins/emoji/emoji.js and after load will try init it
options.basePath? string undefined Base path for download extra plugins
options.extraButtons? (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] [] These buttons list will be added to the option. Buttons
options.extraIcons? Object {} 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 js 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 js const editor = Jodit.make({ extraButtons: [{ name: 'someButton', icon: '<svg><path.../></svg>' }] });
options.createAttributes? Object undefined Default attributes for created inside editor elements Example js 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 jsx import React, {useState, useRef} from 'react'; import JoditEditor from "jodit-react"; const config = { createAttributes: { div: { class: 'align-center' } } }; <JoditEditor config={config}/>
options.sizeLG? number 900 The width of the editor, accepted as the biggest. Used to the responsive version of the editor
options.sizeMD? number 700 The width of the editor, accepted as the medium. Used to the responsive version of the editor
options.sizeSM? number 400 The width of the editor, accepted as the small. Used to the responsive version of the editor
options.buttons? string | (undefined | string | { group?: string ; buttons?: (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] } | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] undefined 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 javascript Jodit.make('#editor', { buttons: ['bold', 'italic', 'source'], buttonsMD: ['bold', 'italic'], buttonsXS: ['bold', 'fullsize'], }); Example javascript 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 javascript 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>'; } });
options.controls? Object undefined Behavior for buttons
options.events? Object {} Some events are called when the editor is initialized, for example, the afterInit event. So this code won't work: javascript const editor = Jodit.make('#editor'); editor.events.on('afterInit', () => console.log('afterInit')); You need to do this: javascript Jodit.make('#editor', { events: { afterInit: () => console.log('afterInit') } }); The option can use any Jodit events, for example: javascript const editor = Jodit.make('#editor', { events: { hello: (name) => console.log('Hello', name) } }); editor.e.fire('hello', 'Mike');
options.textIcons? boolean false Buttons in toolbat without SVG - only texts
options.showBrowserColorPicker? boolean true shows a INPUT[type=color] to open the browser color picker, on the right bottom of widget color picker
options.defaultAjaxOptions? Object undefined A set of key/value pairs that configure the Ajax request. All settings are optional
options.defaultAjaxOptions.successStatuses? (undefined | number)[] undefined -
options.defaultAjaxOptions.method? string undefined The HTTP method to use for the request (e.g. "POST", "GET", "PUT")
options.defaultAjaxOptions.url? string undefined A string containing the URL which the request is sent.
options.defaultAjaxOptions.data? null | string | {} | {} | {} undefined Data be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests.
options.defaultAjaxOptions.contentType? string | false undefined When sending data to the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases
options.defaultAjaxOptions.headers? null | {} | {} undefined An object (or a function which returns an object) of additional header key/value pairs to send along with requests using the XMLHttpRequest transport. Uses in FileBrowser and Uploader
options.defaultAjaxOptions.responseType? "" | "text" | "document" | "arraybuffer" | "blob" | "json" undefined -
options.defaultAjaxOptions.withCredentials? boolean undefined Enable or disable Access-Control-Allow-Credentials client side. Useful for cross domain requests
options.defaultAjaxOptions.queryBuild? Object undefined -
options.defaultAjaxOptions.xhr? Object undefined -
options.defaultAjaxOptions.onProgress? Object undefined -
options.dialog? Object undefined -
options.dialog.resizable? boolean undefined -
options.dialog.draggable? boolean undefined -
options.dialog.maxWidth? string | number undefined -
options.dialog.minWidth? string | number undefined -
options.dialog.minHeight? string | number undefined -
options.dialog.closeOnClickOverlay? boolean undefined -
options.dialog.closeOnEsc? boolean undefined -
options.dialog.debugLanguage? boolean undefined -
options.dialog.i18n? false | {} undefined -
options.dialog.toolbar? string | boolean | { component?: null | { async?: { delay?: ; setTimeout?: ; updateTimeout?: ; clearTimeout?: ; clear?: ; promise?: ; promiseState?: ; debounce?: ; microDebounce?: ; throttle?: ; requestIdleCallback?: ; requestIdlePromise?: ; cancelIdleCallback?: ; requestAnimationFrame?: ; cancelAnimationFrame?: ; destruct?: } ; ownerDocument?: {} ; od?: {} ; ownerWindow?: {} ; ow?: {} ; componentName?: string ; uid?: string ; isDestructed?: boolean ; isInDestruct?: boolean ; isReady?: boolean ; componentStatus?: "beforeInit" | "ready" | "beforeDestruct" | "destructed" ; destruct?: ; get?: ; className?: ; getFullElName?: ; setStatus?: ; hookStatus?: ; bindDestruct?: } } undefined -
options.dialog.toolbarButtonSize? "small" | "tiny" | "xsmall" | "middle" | "large" undefined -
options.dialog.textIcons? boolean | {} undefined -
options.dialog.extraButtons? (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] undefined -
options.dialog.removeButtons? (undefined | string)[] undefined -
options.dialog.extraIcons? Object undefined -
options.dialog.buttons? string | (undefined | string | { group?: string ; buttons?: (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] } | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] undefined -
options.dialog.showTooltip? boolean undefined -
options.dialog.showTooltipDelay? number undefined -
options.dialog.useNativeTooltip? boolean undefined -
options.dialog.cache? boolean undefined Use cache for heavy methods
options.dialog.getIcon? Object undefined -
options.dialog.headerButtons? string | (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} } | { group?: string ; buttons?: (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] })[] undefined -
options.dialog.basePath? string undefined -
options.dialog.theme? string undefined -
options.dialog.defaultTimeout? number undefined -
options.dialog.disabled? boolean undefined -
options.dialog.readonly? boolean undefined -
options.dialog.iframe? boolean undefined -
options.dialog.direction? "" | "rtl" | "ltr" undefined -
options.dialog.namespace? string undefined -
options.dialog.activeButtonsInReadOnly? (undefined | string)[] undefined -
options.dialog.allowTabNavigation? boolean undefined -
options.dialog.zIndex? string | number undefined -
options.dialog.fullsize? boolean undefined -
options.dialog.globalFullSize? boolean undefined -
options.dialog.controls? Object undefined -
options.dialog.createAttributes? Object undefined -
options.dialog.events? Object undefined -
options.dialog.shadowRoot? null | { getSelection?: } undefined -
options.dialog.ownerWindow? Object undefined -
options.dialog.language? string undefined -
options.filebrowser? Object undefined -
options.filebrowser.zIndex? number undefined -
options.filebrowser.fullsize? boolean undefined -
options.filebrowser.showTooltip? boolean undefined -
options.filebrowser.useNativeTooltip? boolean undefined -
options.filebrowser.filter? Object undefined -
options.filebrowser.sortBy? string undefined -
options.filebrowser.sort? false | {} undefined -
options.filebrowser.preview? boolean undefined -
options.filebrowser.showPreviewNavigation? boolean undefined -
options.filebrowser.showSelectButtonInPreview? boolean undefined -
options.filebrowser.saveStateInStorage? false | { storeLastOpenedFolder?: boolean ; storeView?: boolean ; storeSortBy?: boolean } undefined -
options.filebrowser.contextMenu? boolean undefined -
options.filebrowser.howLongShowMsg? number undefined -
options.filebrowser.pixelOffsetLoadNewChunk? number undefined -
options.filebrowser.editImage? boolean undefined Deprecated Instead use permissionsPresets.allowImageCrop and permissionsPresets.allowImageResize
options.filebrowser.createNewFolder? boolean undefined Deprecated Instead use permissionsPresets.allowFolderCreate
options.filebrowser.deleteFolder? boolean undefined Deprecated Instead use permissionsPresets.allowFolderRemove
options.filebrowser.renameFolder? boolean undefined Deprecated Instead use permissionsPresets.allowFolderRename
options.filebrowser.moveFolder? boolean undefined Deprecated Instead use permissionsPresets.allowFolderMove
options.filebrowser.moveFile? boolean undefined Deprecated Instead use permissionsPresets.allowFileMove
options.filebrowser.permissionsPresets? Object undefined -
options.filebrowser.permissionsPresets.allowFiles? boolean undefined -
options.filebrowser.permissionsPresets.allowFileMove? boolean undefined -
options.filebrowser.permissionsPresets.allowFileUpload? boolean undefined -
options.filebrowser.permissionsPresets.allowFileUploadRemote? boolean undefined -
options.filebrowser.permissionsPresets.allowFileRemove? boolean undefined -
options.filebrowser.permissionsPresets.allowFileRename? boolean undefined -
options.filebrowser.permissionsPresets.allowFolders? boolean undefined -
options.filebrowser.permissionsPresets.allowFolderCreate? boolean undefined -
options.filebrowser.permissionsPresets.allowFolderMove? boolean undefined -
options.filebrowser.permissionsPresets.allowFolderRemove? boolean undefined -
options.filebrowser.permissionsPresets.allowFolderRename? boolean undefined -
options.filebrowser.permissionsPresets.allowImageResize? boolean undefined -
options.filebrowser.permissionsPresets.allowImageCrop? boolean undefined -
options.filebrowser.showFoldersPanel? boolean undefined -
options.filebrowser.width? number undefined -
options.filebrowser.height? number undefined -
options.filebrowser.view? null | string undefined -
options.filebrowser.isSuccess? Object undefined -
options.filebrowser.getMessage? Object undefined -
options.filebrowser.showFileName? boolean undefined -
options.filebrowser.showFileSize? boolean undefined -
options.filebrowser.showFileChangeTime? boolean undefined -
options.filebrowser.getThumbTemplate? Object undefined -
options.filebrowser.ajax? Object undefined -
options.filebrowser.ajax.url? string undefined -
options.filebrowser.ajax.data? Object undefined -
options.filebrowser.ajax.cache? boolean undefined -
options.filebrowser.ajax.contentType? string undefined -
options.filebrowser.ajax.method? string undefined -
options.filebrowser.ajax.processData? boolean undefined -
options.filebrowser.ajax.headers? {} | {} undefined -
options.filebrowser.ajax.prepareData? Object undefined -
options.filebrowser.ajax.process? Object undefined -
options.filebrowser.create? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.getLocalFileByUrl? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.resize? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.crop? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.fileMove? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.folderMove? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.fileRemove? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined AJAX options for delete file Example javascript Jodit.make('#editor', { filebrowser: { fileRemove: { url: 'https://xdsoft.net/jodit/connector/index.php?action=fileDelete', method: 'POST', } } });
options.filebrowser.folderRemove? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.fileRename? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.folderRename? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.items? Object undefined -
options.filebrowser.items.url? string undefined -
options.filebrowser.items.data? Object undefined -
options.filebrowser.items.cache? boolean undefined -
options.filebrowser.items.contentType? string undefined -
options.filebrowser.items.method? string undefined -
options.filebrowser.items.processData? boolean undefined -
options.filebrowser.items.headers? {} | {} undefined -
options.filebrowser.items.prepareData? Object undefined -
options.filebrowser.items.process? Object undefined -
options.filebrowser.folder? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.permissions? null | { url?: string ; data?: {} ; cache?: boolean ; contentType?: string ; method?: string ; processData?: boolean ; headers?: {} | {} ; prepareData?: {} ; process?: undefined -
options.filebrowser.uploader? Object undefined -
options.filebrowser.uploader.url? string | {} undefined -
options.filebrowser.uploader.insertImageAsBase64URI? boolean undefined -
options.filebrowser.uploader.imagesExtensions? (undefined | string)[] undefined List of extensions for images Default ts ['jpg', 'png', 'jpeg', 'gif'] Example javascript Jodit.make('#editor', { uploader: { insertImageAsBase64URI: true, imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'svg', 'webp'] } });
options.filebrowser.uploader.headers? null | {} | {} undefined -
options.filebrowser.uploader.data? null | object undefined -
options.filebrowser.uploader.format? string undefined -
options.filebrowser.uploader.method? string undefined -
options.filebrowser.uploader.filesVariableName? Object undefined -
options.filebrowser.uploader.pathVariableName? string undefined -
options.filebrowser.uploader.withCredentials? boolean undefined -
options.filebrowser.uploader.prepareData? Object undefined -
options.filebrowser.uploader.buildData? Object undefined -
options.filebrowser.uploader.queryBuild? Object undefined -
options.filebrowser.uploader.isSuccess? Object undefined -
options.filebrowser.uploader.getMessage? Object undefined -
options.filebrowser.uploader.process? Object undefined -
options.filebrowser.uploader.error? Object undefined -
options.filebrowser.uploader.defaultHandlerSuccess? Object undefined -
options.filebrowser.uploader.defaultHandlerError? Object undefined -
options.filebrowser.uploader.contentType? Object undefined -
options.filebrowser.uploader.processFileName? Object undefined -
options.filebrowser.uploader.getDisplayName? Object undefined -
options.filebrowser.debugLanguage? boolean undefined -
options.filebrowser.i18n? false | {} undefined -
options.filebrowser.toolbar? string | boolean | { component?: null | { async?: { delay?: ; setTimeout?: ; updateTimeout?: ; clearTimeout?: ; clear?: ; promise?: ; promiseState?: ; debounce?: ; microDebounce?: ; throttle?: ; requestIdleCallback?: ; requestIdlePromise?: ; cancelIdleCallback?: ; requestAnimationFrame?: ; cancelAnimationFrame?: ; destruct?: } ; ownerDocument?: {} ; od?: {} ; ownerWindow?: {} ; ow?: {} ; componentName?: string ; uid?: string ; isDestructed?: boolean ; isInDestruct?: boolean ; isReady?: boolean ; componentStatus?: "beforeInit" | "ready" | "beforeDestruct" | "destructed" ; destruct?: ; get?: ; className?: ; getFullElName?: ; setStatus?: ; hookStatus?: ; bindDestruct?: } } undefined -
options.filebrowser.toolbarButtonSize? "small" | "tiny" | "xsmall" | "middle" | "large" undefined -
options.filebrowser.textIcons? boolean | {} undefined -
options.filebrowser.extraButtons? (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] undefined -
options.filebrowser.removeButtons? (undefined | string)[] undefined -
options.filebrowser.extraIcons? Object undefined -
options.filebrowser.buttons? string | (undefined | string | { group?: string ; buttons?: (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] } | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] undefined -
options.filebrowser.showTooltipDelay? number undefined -
options.filebrowser.cache? boolean undefined Use cache for heavy methods
options.filebrowser.getIcon? Object undefined -
options.filebrowser.headerButtons? string | (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} } | { group?: string ; buttons?: (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] })[] undefined -
options.filebrowser.basePath? string undefined -
options.filebrowser.theme? string undefined -
options.filebrowser.defaultTimeout? number undefined -
options.filebrowser.disabled? boolean undefined -
options.filebrowser.readonly? boolean undefined -
options.filebrowser.iframe? boolean undefined -
options.filebrowser.direction? "" | "rtl" | "ltr" undefined -
options.filebrowser.namespace? string undefined -
options.filebrowser.activeButtonsInReadOnly? (undefined | string)[] undefined -
options.filebrowser.allowTabNavigation? boolean undefined -
options.filebrowser.globalFullSize? boolean undefined -
options.filebrowser.controls? Object undefined -
options.filebrowser.createAttributes? Object undefined -
options.filebrowser.events? Object undefined -
options.filebrowser.shadowRoot? null | { getSelection?: } undefined -
options.filebrowser.ownerWindow? Object undefined -
options.filebrowser.language? string undefined -
options.filebrowser.defaultCallback? Object undefined -
options.history? Object undefined -
options.history.enable? boolean undefined -
options.history.maxHistoryLength? number undefined Limit of history length
options.history.timeout? number undefined Delay on every change
options.imageeditor? Object undefined -
options.imageeditor.min_width? number undefined -
options.imageeditor.min_height? number undefined -
options.imageeditor.closeAfterSave? boolean undefined Close editor after save image
options.imageeditor.width? string | number undefined Default dialog width by screen
options.imageeditor.height? string | number undefined Default dialog height by screen
options.imageeditor.crop? boolean undefined Show tab cropping
options.imageeditor.resize? boolean undefined Show tab resizing
options.imageeditor.resizeUseRatio? boolean undefined Keep aspect ratio on resize
options.imageeditor.resizeMinWidth? number undefined Minimal width on resize
options.imageeditor.resizeMinHeight? number undefined Minimal height on resize
options.imageeditor.cropUseRatio? boolean undefined Keep aspect ratio on crop
options.imageeditor.cropDefaultWidth? string | number undefined In the tab, crop the image is displayed not in real size
options.imageeditor.cropDefaultHeight? string | number undefined -
options.enableDragAndDropFileToEditor? boolean undefined Enable drag and drop file editor
options.uploader? Object undefined -
options.uploader.url? string | {} undefined -
options.uploader.insertImageAsBase64URI? boolean undefined -
options.uploader.imagesExtensions? (undefined | string)[] undefined List of extensions for images Default ts ['jpg', 'png', 'jpeg', 'gif'] Example javascript Jodit.make('#editor', { uploader: { insertImageAsBase64URI: true, imagesExtensions: ['jpg', 'png', 'jpeg', 'gif', 'svg', 'webp'] } });
options.uploader.headers? null | {} | {} undefined -
options.uploader.data? null | object undefined -
options.uploader.format? string undefined -
options.uploader.method? string undefined -
options.uploader.filesVariableName? Object undefined -
options.uploader.pathVariableName? string undefined -
options.uploader.withCredentials? boolean undefined -
options.uploader.prepareData? Object undefined -
options.uploader.buildData? Object undefined -
options.uploader.queryBuild? Object undefined -
options.uploader.isSuccess? Object undefined -
options.uploader.getMessage? Object undefined -
options.uploader.process? Object undefined -
options.uploader.error? Object undefined -
options.uploader.defaultHandlerSuccess? Object undefined -
options.uploader.defaultHandlerError? Object undefined -
options.uploader.contentType? Object undefined -
options.uploader.processFileName? Object undefined -
options.uploader.getDisplayName? Object undefined -
options.addNewLine? boolean undefined Create helper
options.addNewLineTagsTriggers? (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] undefined What kind of tags it will be impact
options.addNewLineOnDBLClick? boolean undefined On dbl click on empty space of editor it add new P element Example js Jodit.make('#editor', { addNewLineOnDBLClick: false // disable })
options.addNewLineDeltaShow? number undefined Absolute delta between cursor position and edge(top or bottom) of element when show line
options.aiAssistant? Object undefined -
options.aiAssistant.aiAssistantCallback? Object undefined Callback function for AI assistant to process and return the result
options.aiAssistant.aiCommonPrefixPrompt? string undefined Prompt for common prefix
options.aiAssistant.aiCommonSuffixPrompt? string undefined Prompt for common suffix
options.aiAssistant.aiImproveWritingPrompt? string undefined Prompt for improving writing quality
options.aiAssistant.aiMakeShorterPrompt? string undefined Prompt for making text shorter
options.aiAssistant.aiMakeLongerPrompt? string undefined Prompt for making text longer
options.aiAssistant.aiSimplifyLanguagePrompt? string undefined Prompt for simplifying language
options.aiAssistant.aiSummarizePrompt? string undefined Prompt for summarizing text
options.aiAssistant.aiContinuePrompt? string undefined Prompt for continuing text
options.aiAssistant.aiChangeToneProfessionalPrompt? string undefined Prompt for changing tone to professional
options.aiAssistant.aiChangeToneFriendlyPrompt? string undefined Prompt for changing tone to friendly
options.aiAssistant.aiChangeToneFormalPrompt? string undefined Prompt for changing tone to formal
options.aiAssistant.aiChangeToneCasualPrompt? string undefined Prompt for changing tone to casual
options.aiAssistant.aiChangeToneDirectPrompt? string undefined Prompt for changing tone to direct
options.aiAssistant.aiChangeToneConfidentPrompt? string undefined Prompt for changing tone to confident
options.aiAssistant.aiChangeStyleBusinessPrompt? string undefined Prompt for changing style to business
options.aiAssistant.aiChangeStyleLegalPrompt? string undefined Prompt for changing style to legal
options.aiAssistant.aiChangeStyleJournalismPrompt? string undefined Prompt for changing style to journalism
options.aiAssistant.aiChangeStylePoeticPrompt? string undefined Prompt for changing style to poetic
options.aiAssistant.aiTranslateToSpanishPrompt? string undefined Prompt for translating text to Spanish
options.aiAssistant.aiTranslateToFrenchPrompt? string undefined Prompt for translating text to French
options.aiAssistant.aiTranslateToGermanPrompt? string undefined Prompt for translating text to German
options.aiAssistant.aiTranslateToItalianPrompt? string undefined Prompt for translating text to Italian
options.aiAssistant.aiTranslateToPortuguesePrompt? string undefined Prompt for translating text to Portuguese
options.aiAssistant.aiTranslateToEnglishPrompt? string undefined Prompt for translating text to English
options.aiAssistant.aiTranslateToChinesePrompt? string undefined Prompt for translating text to Chinese
options.aiAssistant.aiTranslateToJapanesePrompt? string undefined Prompt for translating text to Japanese
options.aiAssistant.aiTranslateToKoreanPrompt? string undefined Prompt for translating text to Korean
options.aiAssistant.aiTranslateToRussianPrompt? string undefined Prompt for translating text to Russian
options.aiAssistant.aiTranslateToArabicPrompt? string undefined Prompt for translating text to Arabic
options.delete? Object undefined -
options.delete.hotkeys? Object undefined -
options.delete.hotkeys.delete? (undefined | string)[] undefined -
options.delete.hotkeys.deleteWord? (undefined | string)[] undefined -
options.delete.hotkeys.deleteSentence? (undefined | string)[] undefined -
options.delete.hotkeys.backspace? (undefined | string)[] undefined -
options.delete.hotkeys.backspaceWord? (undefined | string)[] undefined -
options.delete.hotkeys.backspaceSentence? (undefined | string)[] undefined -
options.cleanHTML? Object undefined -
options.cleanHTML.timeout? number undefined -
options.cleanHTML.replaceNBSP? boolean undefined Replace &nbsp; to plain space
options.cleanHTML.fillEmptyParagraph? boolean undefined Remove empty P tags, if they are not in the beginning of the text
options.cleanHTML.removeEmptyElements? boolean undefined Remove empty elements
options.cleanHTML.replaceOldTags? false | {} undefined Replace old tags to new eg. to , to
options.cleanHTML.useIframeSandbox? boolean undefined You can use an iframe with the sandbox attribute to safely paste and test HTML code. It prevents scripts and handlers from running, but it does slow things down. javascript Jodit.make('#editor', { cleanHTML: { useIframeSandbox: true } });
options.cleanHTML.removeOnError? boolean undefined Remove onError attributes
options.cleanHTML.safeJavaScriptLink? boolean undefined Safe href="javascript:" links
options.cleanHTML.allowTags? string | false | {} undefined 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' } } } });
options.cleanHTML.denyTags? string | false | {} undefined -
options.cleanHTML.disableCleanFilter? null | { size?: number ; [toStringTag]?: string ; add?: ; clear?: ; delete?: ; forEach?: ; has?: ; [iterator]?: ; entries?: ; keys?: ; values?: ; union?: ; intersection?: ; difference?: ; symmetricDifference?: ; isSubsetOf?: ; isSupersetOf?: ; isDisjointFrom?: } undefined 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
options.draggableTags? string | (undefined | string)[] undefined Draggable elements
options.dtd? Object undefined -
options.dtd.removeExtraBr? boolean undefined Remove extra br element inside block element after pasting
options.dtd.checkBlockNesting? boolean undefined Check when inserting a block element if it can be inside another block element (according blockLimits)
options.dtd.blockLimits? Object undefined List of elements that contain other blocks
options.autofocus? boolean undefined -
options.cursorAfterAutofocus? "end" | "start" undefined -
options.saveSelectionOnBlur? boolean undefined -
options.defaultFontSizePoints? "px" | "pt" undefined -
options.fullsize? boolean undefined Open WYSIWYG in full screen Example javascript var editor = Jodit.make({ fullsize: true // fullsize editor }); Example javascript var editor = Jodit.make(); editor.e.fire('toggleFullSize'); editor.e.fire('toggleFullSize', true); // fullsize editor.e.fire('toggleFullSize', false); // usual mode
options.globalFullSize? boolean undefined True, after fullsize - all editors elements above jodit will get jodit_fullsize-box_true class (z-index: 100000 !important;)
options.iframeDefaultSrc? string undefined You can redefine default page Example javascript Jodit.make('#editor', { iframe: true, iframeDefaultSrc: 'https://xdsoft.net/jodit/docs/', });
options.iframeBaseUrl? string undefined Base URL where the root directory for Config.iframe mode Example javascript Jodit.make('#editor', { iframe: true, iframeBaseUrl: 'https://xdsoft.net/jodit/docs/', });
options.iframeTitle? string undefined Iframe title's content
options.iframeDoctype? string undefined Iframe's DOCTYPE
options.iframeStyle? string undefined Custom style to be used inside the iframe to display content. Example javascript Jodit.make('#editor', { iframe: true, iframeStyle: 'html{margin: 0px;}', })
options.iframeCSSLinks? (undefined | string)[] undefined Custom stylesheet files to be used inside the iframe to display content. Example javascript Jodit.make('#editor', { iframe: true, iframeCSSLinks: ['styles/default.css'], })
options.iframeSandbox? null | string undefined Custom sandbox attribute for the iframe. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox javascript Jodit.make('#editor', { iframe: true, iframeSandbox: 'allow-same-origin allow-scripts' }); Empty string value means that all restrictions are enabled.
options.imageProcessor? Object undefined -
options.imageProcessor.replaceDataURIToBlobIdInView? boolean undefined -
options.image? Object undefined -
options.image.dialogWidth? number undefined -
options.image.openOnDblClick? boolean undefined Open editing dialog after double click on image
options.image.editSrc? boolean undefined Show edit 'src' input
options.image.useImageEditor? boolean undefined Show crop/resize btn
options.image.editTitle? boolean undefined Show edit 'title' input
options.image.editAlt? boolean undefined Show edit 'alt' input
options.image.editLink? boolean undefined Show edit image link's options
options.image.editSize? boolean undefined Show edit image size's inputs
options.image.editMargins? boolean undefined Show edit margin inputs
options.image.editBorderRadius? boolean undefined -
options.image.editClass? boolean undefined Show edit classNames input
options.image.availableClasses? (undefined | string)[] | (undefined | [string?, string?])[] undefined 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"] ] } })
options.image.editStyle? boolean undefined Show style edit input
options.image.editId? boolean undefined Show edit ID input
options.image.editAlign? boolean undefined Show Alignment selector
options.image.showPreview? boolean undefined Show preview image
options.image.selectImageAfterClose? boolean undefined Select image after close dialog
options.indentMargin? number undefined The number of pixels to use for indenting the current line.
options.popup? Object undefined -
options.toolbarInlineDisabledButtons? (undefined | string)[] undefined -
options.toolbarInline? boolean undefined -
options.toolbarInlineForSelection? boolean undefined -
options.toolbarInlineDisableFor? string | (undefined | string)[] undefined -
options.limitWords? number | false undefined limit words count
options.limitChars? number | false undefined limit chars count
options.limitHTML? false undefined limit html chars count
options.defaultLineHeight? null | number undefined Default line spacing for the entire editor js Jodit.make('#editor', { defaultLineHeight: 1.2 })
options.link? Object undefined -
options.link.formTemplate? Object undefined Template for the link dialog form
options.link.formClassName? string undefined -
options.link.followOnDblClick? boolean undefined Follow link address after dblclick
options.link.processVideoLink? boolean undefined Replace inserted youtube/vimeo link to iframe
options.link.processPastedLink? boolean undefined Wrap inserted link
options.link.noFollowCheckbox? boolean undefined Show no follow checkbox in link dialog.
options.link.openInNewTabCheckbox? boolean undefined Show Open in new tab checkbox in link dialog.
options.link.modeClassName? "input" | "select" undefined Use an input text to ask the classname or a select or not ask
options.link.selectMultipleClassName? boolean undefined Allow multiple choises (to use with modeClassName="select")
options.link.selectSizeClassName? number undefined The size of the select (to use with modeClassName="select")
options.link.selectOptionsClassName? (undefined | { value?: string | number | boolean ; text?: string })[] undefined The list of the option for the select (to use with modeClassName="select")
options.link.hotkeys? (undefined | string)[] undefined -
options.mediaInFakeBlock? boolean undefined Decorate media elements
options.mediaFakeTag? string undefined Decorate media element with tag
options.mediaBlocks? (undefined | string)[] undefined Media tags
options.mobileTapTimeout? number undefined Mobile timeout for CLICK emulation
options.toolbarAdaptive? boolean undefined After resizing, the set of buttons will change to accommodate different sizes.
options.buttonsMD? string | (undefined | string | { group?: string ; buttons?: (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] } | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] undefined The list of buttons that appear in the editor's toolbar for medium-sized spaces (≥ options.sizeMD).
options.buttonsSM? string | (undefined | string | { group?: string ; buttons?: (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] } | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] undefined The list of buttons that appear in the editor's toolbar for small-sized spaces (≥ options.sizeSM).
options.buttonsXS? string | (undefined | string | { group?: string ; buttons?: (undefined | string | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] } | { name?: string ; text?: string ; textTemplate?: {} ; mode?: 1 | 2 | 3 ; hotkeys?: string | (undefined | string)[] ; data?: {} ; isInput?: boolean ; component?: "button" | "select" ; isVisible?: {} ; isActive?: {} ; update?: {} ; isChildActive?: {} ; getContent?: {} ; isDisabled?: {} ; isChildDisabled?: {} ; list?: (undefined | string)[] | {} | (undefined | number)[] ; command?: string ; tagRegExp?: { flags?: string ; sticky?: boolean ; unicode?: boolean ; dotAll?: boolean ; hasIndices?: boolean ; source?: string ; global?: boolean ; ignoreCase?: boolean ; multiline?: boolean ; lastIndex?: number ; unicodeSets?: boolean ; [match]?: ; [replace]?: ; [search]?: ; [split]?: ; [matchAll]?: ; exec?: ; test?: ; compile?: } ; tags?: (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] ; css?: {} ; icon?: string ; iconURL?: string ; tooltip?: string | {} ; exec?: {} ; childExec?: {} ; args?: any[] ; template?: {} ; childTemplate?: {} ; popup?: {} ; defaultValue?: string | (undefined | string)[] ; value?: {} ; mods?: {} })[] undefined The list of buttons that appear in the editor's toolbar for extra-small spaces (less than options.sizeSM).
options.askBeforePasteFromWord? boolean undefined Show the paste dialog if the html is similar to what MSWord gives when copying.
options.processPasteFromWord? boolean undefined Handle pasting of HTML - similar to a fragment copied from MSWord
options.defaultActionOnPasteFromWord? null | "insert_as_html" | "insert_clear_html" | "insert_as_text" | "insert_only_text" undefined Default insert method from word, if not define, it will use defaultActionOnPaste instead js Jodit.make('#editor', { defaultActionOnPasteFromWord: 'insert_clear_html' })
options.pasteFromWordActionList? (undefined | { value?: string | number | boolean ; text?: string })[] undefined Options when inserting data from Word
options.askBeforePasteHTML? boolean undefined Ask before paste HTML in WYSIWYG mode
options.memorizeChoiceWhenPasteFragment? boolean undefined 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.
options.processPasteHTML? boolean undefined Handle pasted text - similar to HTML
options.nl2brInPlainText? boolean undefined Inserts HTML line breaks before all newlines in a string
options.pasteExcludeStripTags? (undefined | "object" | "map" | "ul" | "ol" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "optgroup" | "option" | "output" | "p" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "search" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "var" | "video" | "wbr" | "jodit" | "svg" | "path" | "font" | "jodit-media")[] undefined List of tags that will not be removed from the pasted HTML with INSERT_AS_TEXT mode
options.pasteHTMLActionList? (undefined | { value?: string | number | boolean ; text?: string })[] undefined Options when inserting HTML string
options.scrollToPastedContent? boolean undefined Scroll the editor to the pasted fragment
options.showPlaceholder? boolean undefined Show placeholder Example javascript const editor = Jodit.make('#editor', { showPlaceholder: false });
options.useInputsPlaceholder? boolean undefined Use a placeholder from original input field, if it was set Example javascript //<textarea id="editor" placeholder="start typing text ..." cols="30" rows="10"></textarea> const editor = Jodit.make('#editor', { useInputsPlaceholder: true });
options.placeholder? string undefined Default placeholder Example javascript const editor = Jodit.make('#editor', { placeholder: 'start typing text ...' });
options.hidePoweredByJodit? boolean undefined Hide the link to the Jodit site at the bottom of the editor
options.tableAllowCellResize? boolean undefined -
options.allowResizeX? boolean undefined -
options.allowResizeY? boolean undefined -
options.allowResizeTags? Object undefined Use true frame for editing iframe size
options.allowResizeTags.size? number undefined
options.allowResizeTags.[toStringTag]? string undefined -
options.allowResizeTags.add? Object undefined -
options.allowResizeTags.clear? Object undefined -
options.allowResizeTags.delete? Object undefined -
options.allowResizeTags.forEach? Object undefined -
options.allowResizeTags.has? Object undefined -
options.allowResizeTags.[iterator]? Object undefined -
options.allowResizeTags.entries? Object undefined -
options.allowResizeTags.keys? Object undefined -
options.allowResizeTags.values? Object undefined -
options.allowResizeTags.union? Object undefined -
options.allowResizeTags.intersection? Object undefined -
options.allowResizeTags.difference? Object undefined -
options.allowResizeTags.symmetricDifference? Object undefined -
options.allowResizeTags.isSubsetOf? Object undefined -
options.allowResizeTags.isSupersetOf? Object undefined -
options.allowResizeTags.isDisjointFrom? Object undefined -
options.resizer? Object undefined -
options.resizer.showSize? boolean undefined Show size
options.resizer.hideSizeTimeout? number undefined -
options.resizer.useAspectRatio? boolean | { size?: number ; [toStringTag]?: string ; add?: ; clear?: ; delete?: ; forEach?: ; has?: ; [iterator]?: ; entries?: ; keys?: ; values?: ; union?: ; intersection?: ; difference?: ; symmetricDifference?: ; isSubsetOf?: ; isSupersetOf?: ; isDisjointFrom?: } undefined 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 } });
options.resizer.forImageChangeAttributes? boolean undefined When resizing images, change not the styles but the width and height attributes
options.resizer.min_width? number undefined The minimum width for the editable element
options.resizer.min_height? number undefined The minimum height for the item being edited
options.useSearch? boolean undefined Enable custom search plugin search
options.search? Object undefined -
options.search.lazyIdleTimeout? number undefined -
options.search.useCustomHighlightAPI? boolean undefined 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)
options.search.fuzzySearch? Object undefined 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]; } } })
options.tableAllowCellSelection? boolean undefined -
options.select? Object undefined -
options.select.normalizeSelectionBeforeCutAndCopy? boolean undefined 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>
options.select.normalizeTripleClick? boolean undefined Normalize selection after triple click Example ts `<ul><li>|test</li><li>|pop</li></ul>` will be `<ul><li>|test|</li><li>pop</li</ul>|`
options.saveHeightInStorage? boolean undefined -
options.minWidth? string | number undefined -
options.minHeight? string | number undefined -
options.maxWidth? string | number undefined -
options.maxHeight? string | number undefined -
options.sourceEditor? "area" | "ace" | {} undefined -
options.sourceEditorNativeOptions? Object undefined Options for ace editor Example js Jodit.make('#editor', { showGutter: true, theme: 'ace/theme/idle_fingers', mode: 'ace/mode/html', wrap: true, § * highlightActiveLine: true })
options.sourceEditorNativeOptions.showGutter? boolean undefined -
options.sourceEditorNativeOptions.theme? string undefined -
options.sourceEditorNativeOptions.mode? string undefined -
options.sourceEditorNativeOptions.wrap? string | number | boolean undefined -
options.sourceEditorNativeOptions.highlightActiveLine? boolean undefined -
options.beautifyHTML? boolean undefined Beautify HTML then it possible
options.beautifyHTMLCDNUrlsJS? (undefined | string)[] undefined CDN URLs for HTML Beautifier
options.sourceEditorCDNUrlsJS? (undefined | string)[] undefined CDN URLs for ACE editor
options.speechRecognize? Object undefined -
options.speechRecognize.api? null | {} undefined -
options.speechRecognize.lang? string undefined 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
options.speechRecognize.continuous? boolean undefined 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
options.speechRecognize.interimResults? boolean undefined 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
options.speechRecognize.sound? boolean undefined On recognition error - make an error sound
options.speechRecognize.commands? Object undefined 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>', } } });
options.spellcheck? boolean undefined 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
options.showCharsCounter? boolean undefined -
options.countHTMLChars? boolean undefined -
options.countTextSpaces? boolean undefined -
options.showWordsCounter? boolean undefined -
options.toolbarSticky? boolean undefined Example javascript var editor = Jodit.make('#someid', { toolbarSticky: false })
options.toolbarDisableStickyForMobile? boolean undefined -
options.toolbarStickyOffset? number undefined 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 javascript var editor = Jodit.make('#someid', { toolbarStickyOffset: 100 })
options.specialCharacters? (undefined | string)[] undefined -
options.usePopupForSpecialCharacters? boolean undefined -
options.tab? Object undefined -
options.tab.tabInsideLiInsertNewList? boolean undefined Pressing Tab inside LI will add an internal list
options.table? Object undefined -
options.table.selectionCellStyle? string undefined -
options.table.useExtraClassesOptions? boolean undefined -
options.video? Object undefined -
options.video.parseUrlToVideoEmbed? Object undefined Custom function for parsing video URL to embed code javascript Jodit.make('#editor', { video: { // Defaul behavior parseUrlToVideoEmbed: (url, size) => Jodit.modules.Helpers.convertMediaUrlToVideoEmbed(url, size) } });
options.video.defaultWidth? number undefined Default width for video iframe. Default: 400
options.video.defaultHeight? number undefined Default height for video iframe. Default: 345
options.wrapNodes? Object undefined -
options.wrapNodes.exclude? Object undefined List of tags that should not be wrapped Default: new Set(['hr', 'style', 'br'])
options.wrapNodes.exclude.size? number undefined
options.wrapNodes.exclude.[toStringTag]? string undefined -
options.wrapNodes.exclude.add? Object undefined -
options.wrapNodes.exclude.clear? Object undefined -
options.wrapNodes.exclude.delete? Object undefined -
options.wrapNodes.exclude.forEach? Object undefined -
options.wrapNodes.exclude.has? Object undefined -
options.wrapNodes.exclude.[iterator]? Object undefined -
options.wrapNodes.exclude.entries? Object undefined -
options.wrapNodes.exclude.keys? Object undefined -
options.wrapNodes.exclude.values? Object undefined -
options.wrapNodes.exclude.union? Object undefined -
options.wrapNodes.exclude.intersection? Object undefined -
options.wrapNodes.exclude.difference? Object undefined -
options.wrapNodes.exclude.symmetricDifference? Object undefined -
options.wrapNodes.exclude.isSubsetOf? Object undefined -
options.wrapNodes.exclude.isSupersetOf? Object undefined -
options.wrapNodes.exclude.isDisjointFrom? Object undefined -
options.wrapNodes.emptyBlockAfterInit? boolean undefined If the editor is empty, then insert an empty paragraph into it javascript Jodit.make('#editor', { wrapNodes: { emptyBlockAfterInit: true } }); Default: true
options.showXPathInStatusbar? boolean undefined -

Returns

Jodit

Defined in

src/jodit.ts#177


isJoditAssigned

isJoditAssigned(element): element is HTMLElement & Object

Checks if the element has already been initialized when for Jodit

Parameters

Name Type
element HTMLElement

Returns

element is HTMLElement & Object

Defined in

src/jodit.ts#187


setNativeEditorValue

setNativeEditorValue(value): void

Set value to native editor

Parameters

Name Type
value string

Returns

void

Defined in

src/jodit.ts#445


synchronizeValues

synchronizeValues(): void

Returns

void

Defined in

src/jodit.ts#473


getEditorValue

getEditorValue(removeSelectionMarkers?, consumer?): string

Return editor value

Parameters

Name Type Default value
removeSelectionMarkers boolean true
consumer? string undefined

Returns

string

Defined in

src/jodit.ts#489


setEditorValue

setEditorValue(value?): void

Set editor html value and if set sync fill source element value
When method was called without arguments - it is a simple way to synchronize editor to element

Parameters

Name Type
value? string

Returns

void

Defined in

src/jodit.ts#553


getElementValue

getElementValue(): string

Return source element value

Returns

string

Defined in

src/jodit.ts#639


registerCommand

registerCommand<C>(commandNameOriginal, command, options?): IJodit

Register custom handler for command

Type parameters

Name Type
C extends string

Parameters

Name Type
commandNameOriginal C
command CustomCommand<IJodit, C>
options? Object
options.stopPropagation boolean

Returns

IJodit

Example

var jodit = Jodit.make('#editor);

jodit.setEditorValue('test test test');

jodit.registerCommand('replaceString', function (command, needle, replace) {
     var value = this.getEditorValue();
     this.setEditorValue(value.replace(needle, replace));
     return false; // stop execute native command
});

jodit.execCommand('replaceString', 'test', 'stop');

console.log(jodit.value); // stop test

// and you can add hotkeys for command
jodit.registerCommand('replaceString', {
   hotkeys: 'ctrl+r',
   exec: function (command, needle, replace) {
    var value = this.getEditorValue();
    this.setEditorValue(value.replace(needle, replace));
   }
});

Defined in

src/jodit.ts#700


registerHotkeyToCommand

registerHotkeyToCommand(hotkeys, commandName, shouldStop?): void

Register hotkey for command

Parameters

Name Type Default value
hotkeys string | string[] undefined
commandName string undefined
shouldStop boolean true

Returns

void

Defined in

src/jodit.ts#738


execCommand

execCommand(command, showUI?, value?, ...args): void

Execute command editor

Parameters

Name Type Description
command string command. It supports all the
showUI? boolean -
value? any -
...args unknown[] -

Returns

void

See

https://developer.mozilla.org/ru/docs/Web/API/Document/execCommand#commands and a number of its own
for example applyStyleProperty. Comand fontSize receives the second parameter px,
formatBlock and can take several options

Example

this.execCommand('fontSize', 12); // sets the size of 12 px
this.execCommand('underline');
this.execCommand('formatBlock', 'p'); // will be inserted paragraph
Defined in

src/jodit.ts#773


nativeExecCommand

nativeExecCommand(command, showUI?, value?): boolean

Exec native command

Parameters

Name Type
command string
showUI? boolean
value? any

Returns

boolean

Defined in

src/jodit.ts#865


lock

lock(name?): boolean

Disable selecting

Parameters

Name Type Default value
name string 'any'

Returns

boolean

Inherited from

ViewWithToolbar.lock

Defined in

src/jodit.ts#921


unlock

unlock(): boolean

Enable selecting

Returns

boolean

Inherited from

ViewWithToolbar.unlock

Defined in

src/jodit.ts#936


getMode

getMode(): Modes

Return current editor mode: Jodit.MODE_WYSIWYG, Jodit.MODE_SOURCE or Jodit.MODE_SPLIT

Returns

Modes

Defined in

src/jodit.ts#954


isEditorMode

isEditorMode(): boolean

Returns

boolean

Defined in

src/jodit.ts#958


getRealMode

getRealMode(): Modes

Return current real work mode. When editor in MODE_SOURCE or MODE_WYSIWYG it will
return them, but then editor in MODE_SPLIT it will return MODE_SOURCE if
Textarea(CodeMirror) focused or MODE_WYSIWYG otherwise

Returns

Modes

Example

var editor = Jodit.make('#editor');
console.log(editor.getRealMode());
Defined in

src/jodit.ts#973


setMode

setMode(mode): void

Set current mode

Parameters

Name Type
mode string | number

Returns

void

Defined in

src/jodit.ts#995


toggleMode

toggleMode(): void

Toggle editor mode WYSIWYG to TEXTAREA(CodeMirror) to SPLIT(WYSIWYG and TEXTAREA) to again WYSIWYG

Returns

void

Example

var editor = Jodit.make('#editor');
editor.toggleMode();
Defined in

src/jodit.ts#1064


setDisabled

setDisabled(isDisabled): void

Switch on/off the editor into the disabled state.
When disabled, the user is not able to change the editor content
This function firing the disabled event.

Parameters

Name Type
isDisabled boolean

Returns

void

Defined in

src/jodit.ts#1087


getDisabled

getDisabled(): boolean

Return true if editor in disabled mode

Returns

boolean

Defined in

src/jodit.ts#1105


setReadOnly

setReadOnly(isReadOnly): void

Switch on/off the editor into the read-only state.
When in readonly, the user is not able to change the editor content, but can still
use some editor functions (show source code, print content, or seach).
This function firing the readonly event.

Parameters

Name Type
isReadOnly boolean

Returns

void

Defined in

src/jodit.ts#1115


getReadOnly

getReadOnly(): boolean

Return true if editor in read-only mode

Returns

boolean

Defined in

src/jodit.ts#1135


focus

focus(): void

Returns

void

Defined in

src/jodit.ts#1139


addPlace

addPlace(source, options?): void | Promise<any>

Create and init current editable place

Parameters

Name Type
source string | HTMLElement
options? object

Returns

void | Promise<any>

Defined in

src/jodit.ts#1276


setCurrentPlace

setCurrentPlace(place): void

Set current place object

Parameters

Name Type
place IWorkPlace

Returns

void

Defined in

src/jodit.ts#1436


fetch

fetch<Response>(url, options?): Promise<IResponse<Response>>

Type parameters

Name Type
Response extends object = any

Parameters

Name Type
url string
options? Partial<AjaxOptions>

Returns

Promise<IResponse<Response>>

Defined in

src/jodit.ts#1612


destruct

destruct(): void

Jodit's Destructor. Remove editor, and return source input

Returns

void

Inherited from

ViewWithToolbar.destruct

Defined in

jodit/src/jodit.ts:1642