Jodit
- Hierarchy
- Implements
- STATUSES
- async
- uid
- ownerWindow
- TOOLBAR
- toolbar
- registeredButtons
- isView
- parent
- mods
- id
- components
- ES
- version
- esNext
- esModern
- create
- events
- OPTIONS
- isJodit
- fatMode
- plugins
- modules
- ns
- decorators
- constants
- instances
- lang
- core
- editorIsActive
- selection
- currentPlace
- places
- componentName
- ownerDocument
- od
- ow
- isReady
- isDestructed
- isInDestruct
- componentStatus
- toolbarContainer
- basePath
- buffer
- storage
- c
- e
- progressbar
- o
- isLocked
- isFullSize
- ready
- text
- defaultTimeout
- defaultOptions
- createInside
- element
- editor
- container
- workplace
- message
- statusbar
- iframe
- history
- editorWindow
- ew
- editorDocument
- ed
- options
- s
- uploader
- filebrowser
- mode
- value
- isFocused
- getFullElName
- get
- bindDestruct
- setStatus
- hookStatus
- isInstanceOf
- dlg
- confirm
- prompt
- alert
- getElm
- getElms
- afterSetMod
- setMod
- getMod
- setPanel
- getRegisteredButtonGroups
- registerButton
- unregisterButton
- i18n
- toggleFullSize
- isLockedNotBy
- getVersion
- getVersion
- getInstance
- className
- waitForReady
- atom
- make
- isJoditAssigned
- setNativeEditorValue
- synchronizeValues
- getEditorValue
- setEditorValue
- getElementValue
- registerCommand
- registerHotkeyToCommand
- execCommand
- nativeExecCommand
- lock
- unlock
- getMode
- isEditorMode
- getRealMode
- setMode
- toggleMode
- setDisabled
- getDisabled
- setReadOnly
- getReadOnly
- focus
- addPlace
- setCurrentPlace
- fetch
- destruct
jodit.Jodit
The base class of all Jodit UI components. Provides work with a life cycle.
Hierarchy
-
↳
Jodit
Implements
STATUSES
Static
STATUSES: Object
= STATUSES
Type declaration
Name | Type |
---|---|
beforeInit |
"beforeInit" |
ready |
"ready" |
beforeDestruct |
"beforeDestruct" |
destructed |
"destructed" |
Inherited from
Defined in
src/core/component/component.ts#40
async
async: IAsync
Implementation of
Inherited from
Defined in
src/core/component/component.ts#44
uid
Readonly
uid: string
Implementation of
Inherited from
Defined in
src/core/component/component.ts#59
ownerWindow
ownerWindow: Window
= window
The window in which jodit was created
Implementation of
Inherited from
Defined in
src/core/component/component.ts#109
TOOLBAR
TOOLBAR: IToolbarCollection
Inherited from
Defined in
src/core/view/view-with-toolbar.ts#35
toolbar
toolbar: IToolbarCollection
Implementation of
Inherited from
Defined in
src/core/view/view-with-toolbar.ts#36
registeredButtons
registeredButtons: Set
<IPluginButton
>
Implementation of
Inherited from
ViewWithToolbar.registeredButtons
Defined in
src/core/view/view-with-toolbar.ts#88
isView
Readonly
isView: true
Implementation of
Inherited from
Defined in
parent
parent: Nullable
<IViewBased
<IViewOptions
>> = null
Implementation of
Inherited from
Defined in
mods
Readonly
mods: IDictionary
<null
| string
| boolean
> = {}
Implementation of
Inherited from
Defined in
id
id: string
ID attribute for a source element, id add {id}_editor
it's editor's id
Implementation of
Inherited from
Defined in
components
Readonly
components: Set
<IComponent
<IViewBased
<IViewOptions
>>>
All created ViewComponent inside this view
Implementation of
Inherited from
Defined in
ES
Static
Readonly
ES: "es5"
| "es2015"
| "es2018"
| "es2021"
= ES
Inherited from
Defined in
version
Static
Readonly
version: string
= APP_VERSION
Inherited from
Defined in
esNext
Static
Readonly
esNext: boolean
= IS_ES_NEXT
Inherited from
Defined in
esModern
Static
Readonly
esModern: boolean
= IS_ES_MODERN
Inherited from
Defined in
create
Readonly
create: ICreate
Implementation of
Inherited from
Defined in
events
events: IEventEmitter
Implementation of
Inherited from
Defined in
OPTIONS
OPTIONS: IViewOptions
= View.defaultOptions
Implementation of
Inherited from
Defined in
isJodit
Readonly
isJodit: true
Define if object is Jodit
Implementation of
Inherited from
Defined in
fatMode
Static
fatMode: boolean
= FAT_MODE
Defined in
plugins
Static
Readonly
plugins: IPluginSystem
= pluginSystem
Defined in
modules
Static
modules: modules
Defined in
ns
Static
ns: modules
Defined in
decorators
Static
Readonly
decorators: IDictionary
<Function
> = {}
Defined in
constants
Static
Readonly
constants: constants
= constants
Defined in
instances
Static
Readonly
instances: IDictionary
<IJodit
> = instances
Defined in
lang
Static
Readonly
lang: any
= lang
Defined in
core
Static
Readonly
core: Object
Type declaration
Name | Type |
---|---|
Plugin |
typeof Plugin |
Defined in
editorIsActive
editorIsActive: boolean
= false
Editor has focus in this time
Implementation of
Defined in
selection
Readonly
selection: Selection
Implementation of
Defined in
currentPlace
currentPlace: IWorkPlace
Implementation of
Defined in
places
places: IWorkPlace
[]
Implementation of
Defined in
componentName
get
componentName(): string
Returns
string
Implementation of
Defined in
src/core/component/component.ts#46
ownerDocument
get
ownerDocument(): Document
The document in which jodit was created
Returns
Implementation of
Defined in
src/core/component/component.ts#95
od
get
od(): Document
Shortcut for this.ownerDocument
Returns
Implementation of
Defined in
src/core/component/component.ts#102
ow
get
ow(): Window
Returns
Implementation of
Defined in
src/core/component/component.ts#110
isReady
get
isReady(): boolean
Component is ready for work
Returns
boolean
Implementation of
Defined in
src/core/component/component.ts#145
isDestructed
get
isDestructed(): boolean
Component was destructed
Returns
boolean
Implementation of
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
Defined in
src/core/component/component.ts#160
componentStatus
get
componentStatus(): ComponentStatus
Current component status
Returns
Implementation of
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
Defined in
src/core/component/component.ts#217
toolbarContainer
get
toolbarContainer(): HTMLElement
Container for toolbar
Returns
Implementation of
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
Defined in
buffer
get
buffer(): IStorage
<StorageValueType
>
Some extra data inside editor
Returns
See
copyformat plugin
Implementation of
Defined in
storage
get
storage(): IStorage
<StorageValueType
>
Container for persistent set/get value
Returns
Implementation of
Defined in
c
get
c(): this
["create"
]
Short alias for create
Returns
this
["create"
]
Implementation of
Defined in
e
get
e(): this
["events"
]
Short alias for events
Returns
this
["events"
]
Implementation of
Defined in
progressbar
get
progressbar(): IProgressBar
progress_bar Progress bar
Returns
Implementation of
Defined in
o
get
o(): this
["options"
]
Short alias for options
Returns
this
["options"
]
Implementation of
Defined in
isLocked
get
isLocked(): boolean
View is locked
Returns
boolean
Implementation of
Defined in
isFullSize
get
isFullSize(): boolean
View is in fullSize
Returns
boolean
Implementation of
Defined in
ready
Returns
Defined in
text
get
text(): string
Plain text editor's value
Returns
string
Implementation of
Defined in
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
Defined in
defaultOptions
get
defaultOptions(): Config
Default settings
Returns
Defined in
createInside
get
createInside(): ICreate
Returns
Implementation of
Defined in
element
get
element(): HTMLElement
element It contains source element
Returns
Implementation of
Defined in
editor
get
editor(): HTMLDivElement
| HTMLBodyElement
editor It contains the root element editor
Returns
HTMLDivElement
| HTMLBodyElement
Implementation of
Defined in
set
editor(editor
): void
Parameters
Name | Type |
---|---|
editor |
HTMLDivElement | HTMLBodyElement |
Returns
void
Implementation of
Defined in
container
get
container(): HTMLDivElement
Container for all staff
Returns
Implementation of
Defined in
set
container(container
): void
Parameters
Name | Type |
---|---|
container |
HTMLDivElement |
Returns
void
Implementation of
Defined in
workplace
get
workplace(): HTMLDivElement
workplace It contains source and wysiwyg editors
Returns
Implementation of
Defined in
message
get
message(): IMessages
Returns
Implementation of
Defined in
statusbar
get
statusbar(): IStatusBar
Statusbar module
Returns
Implementation of
Defined in
iframe
get
iframe(): void
| HTMLIFrameElement
iframe Iframe for iframe mode
Returns
void
| HTMLIFrameElement
Implementation of
Defined in
set
iframe(iframe
): void
Parameters
Name | Type |
---|---|
iframe |
void | HTMLIFrameElement |
Returns
void
Implementation of
Defined in
history
get
history(): IHistory
Returns
Implementation of
Defined in
editorWindow
get
editorWindow(): Window
In iframe mode editor's window can be different by owner
Returns
Implementation of
Defined in
set
editorWindow(win
): void
Parameters
Name | Type |
---|---|
win |
Window |
Returns
void
Implementation of
Defined in
ew
get
ew(): this
["editorWindow"
]
Alias for this.ew
Returns
this
["editorWindow"
]
Implementation of
Defined in
editorDocument
get
editorDocument(): Document
In iframe mode editor's window can be different by owner
Returns
Implementation of
Defined in
ed
get
ed(): this
["editorDocument"
]
Alias for this.ew
Returns
this
["editorDocument"
]
Implementation of
Defined in
options
get
options(): Config
options All Jodit settings default + second arguments of constructor
Returns
Implementation of
Defined in
set
options(opt
): void
Parameters
Name | Type |
---|---|
opt |
Config |
Returns
void
Implementation of
Defined in
s
get
s(): this
["selection"
]
Alias for this.selection
Returns
this
["selection"
]
Implementation of
Defined in
uploader
get
uploader(): IUploader
Returns
Implementation of
Defined in
filebrowser
get
filebrowser(): IFileBrowser
<IFileBrowserOptions
>
Returns
IFileBrowser
<IFileBrowserOptions
>
Implementation of
Defined in
mode
get
mode(): Modes
Editor's mode
Returns
Implementation of
Defined in
set
mode(mode
): void
Parameters
Name | Type |
---|---|
mode |
Modes |
Returns
void
Implementation of
Defined in
value
get
value(): string
HTML value
Returns
string
Implementation of
Defined in
set
value(html
): void
Parameters
Name | Type |
---|---|
html |
string |
Returns
void
Implementation of
Defined in
isFocused
get
isFocused(): boolean
Returns
boolean
Implementation of
Defined in
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
Defined in
src/core/component/component.ts#65
getFullElName(elementName
, mod
): string
Parameters
Name | Type |
---|---|
elementName |
string |
mod |
string |
Returns
string
Inherited from
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
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
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
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
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
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
Defined in
src/core/component/component.ts#283
dlg
dlg(this
, options?
): IDialog
Parameters
Name | Type |
---|---|
this |
IViewBased <IViewOptions > & IDlgs |
options? |
IDialogOptions |
Returns
Inherited from
Defined in
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
Inherited from
Defined in
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
Inherited from
Defined in
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
Inherited from
Defined in
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
Inherited from
Defined in
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
Inherited from
Defined in
afterSetMod
afterSetMod(name
, value
): void
Parameters
Name | Type |
---|---|
name |
string |
value |
ModType |
Returns
void
Inherited from
Defined in
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
Defined in
getMod
getMod(this
, name
): ModType
Get BEM class modification value
Parameters
Name | Type |
---|---|
this |
IMods |
name |
string |
Returns
Inherited from
Defined in
setPanel
setPanel(element
): void
Change panel container
Parameters
Name | Type |
---|---|
element |
string | HTMLElement |
Returns
void
Inherited from
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
Defined in
toggleFullSize
toggleFullSize(isFullSize?
): void
Parameters
Name | Type |
---|---|
isFullSize? |
boolean |
Returns
void
Inherited from
ViewWithToolbar.toggleFullSize
Defined in
isLockedNotBy
isLockedNotBy(name
): boolean
Parameters
Name | Type |
---|---|
name |
string |
Returns
boolean
Inherited from
Defined in
getVersion
getVersion(): string
Return current version
Returns
string
Inherited from
Defined in
getVersion
getVersion(): string
Returns
string
Inherited from
Defined in
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
Defined in
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
Defined in
className
className(): string
Returns
string
Inherited from
Defined in
waitForReady
waitForReady(): Promise
<IJodit
>
Return promise for ready actions
Returns
Example
const jodit = Jodit.make('#editor');
await jodit.waitForReady();
jodit.e.fire('someAsyncLoadedPluginEvent', (test) => {
alert(test);
});
Defined in
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
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 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 |
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
Defined in
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
setNativeEditorValue
setNativeEditorValue(value
): void
Set value to native editor
Parameters
Name | Type |
---|---|
value |
string |
Returns
void
Defined in
synchronizeValues
synchronizeValues(): void
Returns
void
Defined in
getEditorValue
getEditorValue(removeSelectionMarkers?
, consumer?
): string
Return editor value
Parameters
Name | Type | Default value |
---|---|---|
removeSelectionMarkers |
boolean |
true |
consumer? |
string |
undefined |
Returns
string
Defined in
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
getElementValue
getElementValue(): string
Return source element value
Returns
string
Defined in
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
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
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
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
nativeExecCommand
nativeExecCommand(command
, showUI?
, value?
): boolean
Exec native command
Parameters
Name | Type |
---|---|
command |
string |
showUI? |
boolean |
value? |
any |
Returns
boolean
Defined in
lock
lock(name?
): boolean
Disable selecting
Parameters
Name | Type | Default value |
---|---|---|
name |
string |
'any' |
Returns
boolean
Inherited from
Defined in
unlock
unlock(): boolean
Enable selecting
Returns
boolean
Inherited from
Defined in
getMode
getMode(): Modes
Return current editor mode: Jodit.MODE_WYSIWYG, Jodit.MODE_SOURCE or Jodit.MODE_SPLIT
Returns
Defined in
isEditorMode
isEditorMode(): boolean
Returns
boolean
Defined in
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
Example
var editor = Jodit.make('#editor');
console.log(editor.getRealMode());
Defined in
setMode
setMode(mode
): void
Set current mode
Parameters
Name | Type |
---|---|
mode |
string | number |
Returns
void
Defined in
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
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
getDisabled
getDisabled(): boolean
Return true if editor in disabled mode
Returns
boolean
Defined in
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
getReadOnly
getReadOnly(): boolean
Return true if editor in read-only mode
Returns
boolean
Defined in
focus
focus(): void
Returns
void
Defined in
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
setCurrentPlace
setCurrentPlace(place
): void
Set current place object
Parameters
Name | Type |
---|---|
place |
IWorkPlace |
Returns
void
Defined in
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
Defined in
destruct
destruct(): void
Jodit's Destructor. Remove editor, and return source input
Returns
void
Inherited from
Defined in
jodit/src/jodit.ts:1642