Last updated Monday, September 4, 2017

API

Config

Source: Config.ts

Config

Default Editor's Configuration

Source: Config.ts
Property
buttons

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

Type: Array<string|ControlType>
Default value: [ 'source', '|', 'bold', 'italic', '|', 'ul', 'ol', '|', 'font', 'fontsize', 'brush', 'paragraph', '|', 'image', 'video', 'table', 'link', '|', 'align','|', 'undo', 'redo', '|', 'hr', 'eraser', 'fullsize', 'about' ]
Source: Config.ts
Example 
new Jodit('#editor', {
    buttons: ['bold', 'italic', 'source'],
    buttonsMD: ['bold', 'italic'],
    buttonsXS: ['bold', 'fullsize'],
});
 
new Jodit('#editor2', {
    buttons: [{
        name: 'enty',
        icon: 'source',
        exec: function () {
            var dialog = new Jodit.modules.Dialog(this),
                div = document.createElement('div'),
                text = document.createElement('textarea');
            div.innerText = this.val();
            dialog.setTitle('Source code');
            dialog.setContent(text);
            dialog.setSize(400, 300);
            dom(text)
                .css({
                    width: '100%',
                    height: '100%'
                })
                .val(div.innerHTML.replace(/<br>/g, '\n'));
            dialog.{@link module:Dialog~open|open}();
        }
    }]
});
 
new Jodit('#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.selection.insertNode(Jodit.modules.Dom.create(key, ''));
            this.events.fire('errorMessage', ['Was inserted ' + value]);
       },
       template: function (key, value) {
           return '<div>' + value + '</div>';
       }
 });
buttonsMD

The list of buttons that appear in the editor's toolbar on medium places (≥ options.sizeMD)

Type: Array<string|ControlType>
Default value: [ 'source', '|', 'bold', 'italic', '|', 'ul', 'ol', '|', 'font', 'fontsize', 'brush', 'paragraph', '|', 'image', 'table', 'link', '|', 'align','|', 'undo', 'redo', '|', 'hr', 'eraser', 'fullsize' ]
Source: Config.ts
buttonsSM

The list of buttons that appear in the editor's toolbar on small places (≥ options.sizeSM)

Type: Array<string|ControlType>
Default value: [ 'source', '|', 'bold', 'italic', '|', 'ul', 'ol', '|', 'fontsize', 'brush', 'paragraph', '|', 'image', 'table', 'link', '|', 'align','|', 'undo', 'redo', '|', 'eraser', 'fullsize' ]
Source: Config.ts
buttonsXS

The list of buttons that appear in the editor's toolbar on extra small places (< options.sizeSM)

Type: Array<string|ControlType>
Default value: [ 'bold', 'image', '|', 'brush', 'paragraph', '|', 'align', '|', 'undo', 'redo', '|', 'eraser' ]
Source: Config.ts
colorPickerDefaultTab

The default tab color picker

Type: background|color
Default value: background
Source: Config.ts
Example 
 new Jodit('#editor2', {
    colorPickerDefaultTab: 'color'
})
controls

Behavior for buttons

Type: __index(key: string): ControlType
Source: Config.ts
debugLanguage

if true all Lang.i18n(key) return {key}

Type: boolean
Default value: false
Source: Config.ts
Example 
<script>
var editor = new Jodit('.editor', {
   debugLanguage: true
});

console.log(editor.i18n("Test")); // {Test}
</script>
defaultMode

Jodit.MODE_WYSIWYG The HTML editor allows you to write like MSWord, Jodit.MODE_AREA syntax highlighting source editor

Type: number
Default value: consts.MODE_WYSIWYG
Source: Config.ts
Example 
var editor = new Jodit('#editor', {
    defaultMode: Jodit.MODE_SPLIT
});
console.log(editor.getRealMode())
direction

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)

Type: string
Default value:
Source: Config.ts
Example 
new Jodit('.editor', {
   direction: 'rtl'
})
editorCssClass

Class name that can be appended to the editor

Type: false|string
Default value: false
Source: Config.ts
See

{@link Jodit.defaultOptions.iframeCSSLinks|iframeCSSLinks}

{@link Jodit.defaultOptions.iframeStyle|iframeStyle}
Example 
new Jodit('#editor', {
   editorCssClass: 'some_my_class'
});
<style>
.some_my_class p{
   line-height: 16px;
}
</style>
enter

Element that will be created when you press Enter

Type: P|DIV|BR
Default value: consts.PARAGRAPH
Source: Config.ts
events
Type: __index(key: string): Function
Source: Config.ts
extraButtons

This buttons list will be added to option.buttons

Type: Array<string|ControlType>
Default value: []
Source: Config.ts
height

Editor's height

Type: string|number
Default value: auto
Source: Config.ts
Example 
new Jodit('.editor', {
   height: '100%',
})
 
new Jodit('.editor', {
   height: 600, // equivalent for '600px'
})
 
new Jodit('.editor', {
   height: 'auto', // default - autosize
})
i18n

Collection of language pack data {en: {'Type something': 'Type something', ...}}

Type: any|string
Default value: en
Source: Config.ts
Example 
var editor = new Jodit('#editor', {
    language: 'ru',
    i18n: {
        ru: {
           'Type something': 'Начните что-либо вводить'
        }
    }
});
console.log(editor.i18n('Type something')) //Начните что-либо вводить
imageDefaultWidth

Image size defaults to a larger image

Type: number
Default value: 300
Source: Config.ts
language

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'

Type: string
Default value: auto
Source: Config.ts
Example 
<!-- include in you page lang file -->
<script src="jodit/lang/de.js"></script>
<script>
var editor = new Jodit('.editor', {
   language: 'de'
});
</script>
minHeight

Editor's min-height

Type: number|string
Default value: 100
Source: Config.ts
Example 
new Jodit('.editor', {
   minHeight: '30%' //min-height: 30%
})
 
new Jodit('.editor', {
   minHeight: 200 //min-height: 200px
})
removeButtons

Do not display these buttons that are on the list

Type: Array<string>
Default value: []
Source: Config.ts
Example 
new Jodit('#editor2', {
    removeButtons: ['hr', 'source']
});
saveModeInCookie

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

Type: boolean
Default value: false
Source: Config.ts
sizeLG

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

Type: number
Default value: 900
Source: Config.ts
sizeMD

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

Type: number
Default value: 700
Source: Config.ts
sizeSM

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

Type: number
Default value: 400
Source: Config.ts
spellcheck

Options specifies whether the editor is to have its spelling and grammar checked or not

Type: boolean
Default value: true
Source: Config.ts
See

{@link http://www.w3schools.com/tags/att_global_spellcheck.asp}
tabIndex

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

Type: number
Default value: -1
Source: Config.ts
textIcons

Buttons in toolbat without SVG - only texts

Type: boolean
Default value: false
Source: Config.ts
Type

{boolean}
theme

Theme (can be "dark")

Type: string
Default value: default
Source: Config.ts
Example 
var editor  = new  Jodit(".dark_editor", {
     theme: "dark"
});
toolbar

Show toolbar

Type: boolean
Default value: true
Source: Config.ts
toolbarButtonSize

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

Type: small|middle|large
Default value: middle
Source: Config.ts
Example 
var editor  = new  Jodit(".dark_editor", {
     toolbarButtonSize: "small"
});
triggerChangeEvent

After all changes in editors for textarea will call change trigger

Type: boolean
Default value: true
Source: Config.ts
Example 
var editor = new Jodit('#editor');
document.getElementById('editor').addEventListener('change', function () {
     console.log(this.value);
})
useSplitMode

Use split mode

Type: boolean
Default value: false
Source: Config.ts
Type

{boolean}
width

Editor's width

Type: number|string
Default value: auto
Source: Config.ts
Example 
new Jodit('.editor', {
   width: '100%',
})
 
new Jodit('.editor', {
   width: 600, // equivalent for '600px'
})
 
new Jodit('.editor', {
   width: 'auto', // autosize
})
zIndex

z-index For editor

Type: number
Default value: 0
Source: Config.ts
Object literal
colors

The colors in HEX representation to select a color for the background and for the text in colorpicker

Example 
 new Jodit('#editor', {
    colors: ['#ff0000', '#00ff00', '#0000ff']
})
Source: Config.ts

Jodit

Source: Jodit.ts

Jodit

This class extends Component.

Class Jodit. Main class

Source: Jodit.ts
Constructor
constructor

Create instance of Jodit

Constructor
Source: Jodit.ts
Property
___plugins
Type: __index(key: string): JoditPlugin
Source: Jodit.ts
components
Type: any
Default value: []
Source: Jodit.ts
container
Type: HTMLDivElement
Source: Jodit.ts
Property{htmldivelement}

container main editor's box
doc
Type: HTMLDocument
Source: Jodit.ts
Property{htmldocument}

win
editor
Type: HTMLDivElement|HTMLBodyElement
Source: Jodit.ts
Property{htmldivelement|htmlbodyelement}

editor It contains the root element editor
element
Type: HTMLInputElement
Source: Jodit.ts
Property{htmlelement}

element It contains source element
events
Type: Events
Source: Jodit.ts
filebrowser
Type: FileBrowser
Source: Jodit.ts
Property

{FileBrowser} filebrowser
handlers
Type: handlers
Source: modules/Component.ts
helper
Type: any
Source: Jodit.ts
id
Type: string
Source: Jodit.ts
Property{string}

ID attribute for source element, id add {id}_editor it's editor's id
iframe
Type: HTMLIFrameElement
Source: Jodit.ts
Property{htmliframeelement}

iframe Iframe for iframe mode
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
mode
Type: number
Default value: consts.MODE_WYSIWYG
Source: Jodit.ts
options
Type: Config
Source: Jodit.ts
Property{config}

options All Jodit settings default + second arguments of constructor
progress_bar
Type: HTMLDivElement
Source: Jodit.ts
Property{htmldivelement}

progress_bar Progress bar
selection
Type: Selection
Source: Jodit.ts
Property

{Selection} selection
toolbar
Type: Toolbar
Source: Jodit.ts
uploader
Type: Uploader
Source: Jodit.ts
Property

{Uploader} uploader
version
Type: string
Default value: appVersion
Source: Jodit.ts
win
Type: Window
Source: Jodit.ts
Property{window}

win
workplace
Type: HTMLDivElement
Source: Jodit.ts
Property{htmldivelement}

workplace It contains source and wysiwyg editors
defaultOptions
Type: Config
Source: Jodit.ts
instances
Type: unknown
Source: Jodit.ts
lang
Type: any
Source: Jodit.ts
modules
Type: any
Source: Jodit.ts
plugins
Type: any
Source: Jodit.ts
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: Jodit.ts
execCommand 
execCommand(command: any, second: boolean, third: any): any
Method

execCommand
Fires

beforeCommand

afterCommand
Example 
this.execCommand('fontSize', 12); // sets the size of 12 px
this.execCommand('underline');
this.execCommand('formatBlock', 'p'); // will be inserted paragraph
Source: Jodit.ts
getEditorValue 
getEditorValue(): string
Source: Jodit.ts
getElementValue 
getElementValue(): string
Source: Jodit.ts
getInstance 
getInstance(moduleName: any, options: object): any
Source: Jodit.ts
getMode 
getMode(): number
Source: Jodit.ts
getRealMode 
getRealMode(): number
Example 
var editor = new Jodit('#editor');
console.log(editor.getRealMode());
Source: Jodit.ts
getVersion 
getVersion(): string

Return current version

Method

getVersion
Source: Jodit.ts
i18n 
i18n(key: string, params: Array<string|number>): string
Example 
var editor = new Jodit("#redactor", {
     langusage: 'ru'
});
console.log(editor.i18n('Cancel')) //Отмена;

Jodit.defaultOptions.language = 'ru';
console.log(Jodit.prototype.i18n('Cancel')) //Отмена

Jodit.lang.cs = {
   Cancel: 'Zrušit'
};
Jodit.defaultOptions.language = 'cs';
console.log(Jodit.prototype.i18n('Cancel')) //Zrušit

Jodit.lang.cs = {
   'Hello world': 'Hello \s Good \s'
};
Jodit.defaultOptions.language = 'cs';
console.log(Jodit.prototype.i18n('Hello world', 'mr.Perkins', 'day')) //Hello mr.Perkins Good day
Source: Jodit.ts
initPlugines 
initPlugines(): void
Source: Jodit.ts
isLocked 
isLocked(): boolean
Source: Jodit.ts
isLockedNotBy 
isLockedNotBy(name: string): boolean
Source: Jodit.ts
lock 
lock(name: string): void
Source: Jodit.ts
setEditorValue 
setEditorValue(value: string): void
Source: Jodit.ts
setElementValue 
setElementValue(value: string): void
Source: Jodit.ts
setMode 
setMode(mode: number): void
Fired

beforeSetMode

afterSetMode
Source: Jodit.ts
toggleMode 
toggleMode(): void
Example 
var editor = new Jodit('#editor');
editor.toggleMode();
Source: Jodit.ts
unlock 
unlock(): void
Source: Jodit.ts

JoditPlugin

Source: Jodit.ts
Property
destruct
Type: Function
Source: Jodit.ts
open
Type: Function
Source: Jodit.ts

constants

Source: constants.ts

ACCURACY

10
Type: 10
Source: constants.ts

EMULATE_DBLCLICK_TIMEOUT

300
Type: 300
Source: constants.ts

INVISIBLE_SPACE

&#65279;
Type: &#65279;
Source: constants.ts

INVISIBLE_SPACE_REG_EXP

 /[\uFEFF]/g
Type: RegExp
Source: constants.ts

IS_BLOCK

 /^(PRE|DIV|P|TD|TH|LI|H[1-6]|TABLE|BLOCKQUOTE)$/i
Type: RegExp
Source: constants.ts

KEY_BACKSPACE

8
Type: 8
Source: constants.ts

KEY_BOTTOM

40
Type: 40
Source: constants.ts

KEY_DELETE

46
Type: 46
Source: constants.ts

KEY_ENTER

13
Type: 13
Source: constants.ts

KEY_LEFT

37
Type: 37
Source: constants.ts

KEY_RIGHT

39
Type: 39
Source: constants.ts

KEY_TAB

9
Type: 9
Source: constants.ts

KEY_TOP

38
Type: 38
Source: constants.ts

KEY_Y

89
Type: 89
Source: constants.ts

KEY_Z

90
Type: 90
Source: constants.ts

MARKER_CLASS

jodit_selection_marker
Type: jodit_selection_marker
Source: constants.ts

MODE_SOURCE

2
Property

{int} MODE_SOURCE=2 html editor mode
Type: 2
Source: constants.ts

MODE_SPLIT

3
Property

{int} MODE_SPLIT=3 Source code editor and HTML editor both like {@link http://getuikit.com/docs/htmleditor.html|this}
Type: 3
Source: constants.ts

MODE_WYSIWYG

1
Property

{int} MODE_WYSIWYG=1 WYSIWYG editor mode
Type: 1
Source: constants.ts

NEARBY

5
Type: 5
Source: constants.ts

PARAGRAPH

P
Type: P
Source: constants.ts

SPACE_REG_EXP

 /[\s\n\t\r\uFEFF\u200b]+/g
Type: RegExp
Source: constants.ts

SPACE_REG_EXP_END

 /[\s\n\t\r\uFEFF\u200b]+$/g
Type: RegExp
Source: constants.ts

SPACE_REG_EXP_START

 /^[\s\n\t\r\uFEFF\u200b]+/g
Type: RegExp
Source: constants.ts

TEXT_PLAIN

 isIE() ? 'text' : 'text/plain'
Property

{string} TEXT_PLAIN='text/plain' For IE11 it will be 'text'. Need for dataTransfer.setData
Type: text|text/plain
Source: constants.ts

index

Source: index.ts

Jodit

 require('./Jodit').default
Type: any
Source: index.ts

context

 require.context('./styles/icons/', true, /\.svg$/)
Type: any
Source: index.ts

context2

 require.context('./modules/', true, /\.ts/)
Type: any
Source: index.ts

context3

 require.context('./langs/', true, /\.ts$/)
Type: any
Source: index.ts

plugins

 require.context('./plugins/', true, /\.ts/)
Type: any
Source: index.ts

langs/de

Source: langs/de.ts

langs/en

Source: langs/en.ts

langs/ru

Source: langs/ru.ts

modules/Ajax

Source: modules/Ajax.ts

Config

Source: modules/Ajax.ts
Config
Source: modules/Ajax.ts
Property
defaultAjaxOptions
Type: AjaxOptions
Source: modules/Ajax.ts

Ajax

This class extends Component.
Source: modules/Ajax.ts
Constructor
constructor
Source: modules/Ajax.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
options
Type: AjaxOptions
Source: modules/Ajax.ts
response
Type: string
Source: modules/Ajax.ts
status
Type: number
Source: modules/Ajax.ts
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
abort 
abort(): this
Source: modules/Ajax.ts
destruct 
destruct(): void
Source: modules/Component.ts
send 
send(): PseudoPromise
Source: modules/Ajax.ts

AjaxOptions

type AjaxOptions =  {
  async?: boolean,
  contentType?: string|false,
  data: __index(key: string): string|null|FormData,
  dataType?: string,
  headers?: __index(key: string): string,
  method?: string,
  url?: string,
  withCredentials?: boolean,
  xhr?: __call(): XMLHttpRequest,
}

XDomainRequest

Property

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

{object} defaultAjaxOptions.headers An object of additional header key/value pairs toWYSIWYG send along with requests using the XMLHttpRequest transport. Uses in {@link module:FileBrowser|FileBrowser} and {@link module:Uploader|Uploader}

{string} defaultAjaxOptions.dataType='json' json or text The type of data that you're expecting back from the server. if json the return value passes through the JSON.parse

{string} defaultAjaxOptions.method='GET' The HTTP method toWYSIWYG use for the request (e.g. "POST", "GET", "PUT")

{string} defaultAjaxOptions.url='' A string containing the URL toWYSIWYG which the request is sent

{string} defaultAjaxOptions.async=true By default, all requests are sent asynchronously (i.e. this is set toWYSIWYG true by default). If you need synchronous requests, set this option toWYSIWYG false

{object|string} defaultAjaxOptions.data=null Data toWYSIWYG be sent toWYSIWYG the server. It is converted toWYSIWYG a query string, if not already a string. It's appended toWYSIWYG the url for GET-requests

{string} defaultAjaxOptions.contentType='application/x-www-form-urlencoded; charset=UTF-8' When sending data toWYSIWYG the server, use this content type. Default is "application/x-www-form-urlencoded; charset=UTF-8", which is fine for most cases

{function} defaultAjaxOptions.error=function () {} A function toWYSIWYG be called if the request fails

{function} defaultAjaxOptions.success=function (resp) {} A function toWYSIWYG be called if the request succeeds

{function} defaultAjaxOptions.xhr=function () { return new XMLHttpRequest(); } Callback for creating the XMLHttpRequest object.
Type: any
Source: modules/Ajax.ts

modules/Component

Source: modules/Component.ts

Component

Source: modules/Component.ts
Constructor
constructor
Source: modules/Component.ts
Property
handlers
Type: __type
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: modules/Component.ts

modules/ContextMenu

Source: modules/ContextMenu.ts

ContextMenu

This class extends Component.

Module to generate context menu

Module

ContextMenu
Param

Jodit main object
Source: modules/ContextMenu.ts
Constructor
constructor
Source: modules/ContextMenu.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: modules/Component.ts
hide 
hide(): void

Hide context menu

Method

hide
Source: modules/ContextMenu.ts
show 
show(x: number, y: number, actions: Array<false|Action>): void
Method

show
Example 
parent.show(e.clientX, e.clientY, [{icon: 'bin', title: 'Delete', exec: function () { alert(1) }]);
Source: modules/ContextMenu.ts

Action

type Action =  {
  exec?: __call(this: ContextMenu, e: MouseEvent): false|void,
  icon?: string,
  title?: string,
}

modules/Cookie

Source: modules/Cookie.ts

Cookie

This class extends Component.
Source: modules/Cookie.ts
Constructor
constructor
Source: modules/Component.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: modules/Component.ts
get 
static get(name: string): string|null
Method

get
Example 
console.log(Jodit.modules.Cookie.get('somename'));
Source: modules/Cookie.ts
remove 
static remove(name: string): void
Method

remove
Example 
Jodit.modules.Cookie.remove('somename');
Source: modules/Cookie.ts
set 
static set(name: string|number, value: string|number, days: number): void
Method

set
Example 
Jodit.modules.Cookie.set('somename', somevalue, 5);
Source: modules/Cookie.ts

modules/Dialog

Source: modules/Dialog.ts

Config

Source: modules/Dialog.ts
Config
Source: modules/Dialog.ts
Property
dialog
Type: DialogOptions
Source: modules/Dialog.ts

Dialog

This class extends Component.

Module to generate dialog windows

Param

Jodit main object

Extend Options
Source: modules/Dialog.ts
Constructor
constructor
Source: modules/Dialog.ts
Property
dialog
Type: HTMLDivElement
Source: modules/Dialog.ts
Property

{HTMLDivElement} dialog
dialogbox
Type: HTMLDivElement
Source: modules/Dialog.ts
Property

{HTMLDivElement} dialogbox
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
close 
close(e: MouseEvent): void

Closes the dialog box , if you want to call the method {@link module:Dialog~destruct|destruct}

See

destroy
Method

close
Fires

beforeClose

afterClose
Example 
//You can close dialog two ways
var dialog = new Jodit.modules.Dialog();
dialog.open('Hello world!', 'Title');
var $close = Jodit.modules.helper.dom('<a href="javascript:void(0)" style="float:left;" class="jodit_button"><i class="icon icon-check"></i>&nbsp;' + Jodit.prototype.i18n('Ok') + '</a>');
$close.addEventListener('click', function () {
    dialog.close();
});
dialog.setFooter($close);
// and second way, you can close dialog from content
dialog.open('<a onclick="var event = doc.createEvent('HTMLEvents'); event.initEvent('close_dialog', true, true); this.dispatchEvent(event)">Close</a>', 'Title');
Source: modules/Dialog.ts
destruct 
destruct(): void
Source: modules/Dialog.ts
getMaxZIndexDialog 
getMaxZIndexDialog(): Dialog
Source: modules/Dialog.ts
isOpened 
isOpened(): boolean
Source: modules/Dialog.ts
maximization 
maximization(condition: boolean): boolean
Source: modules/Dialog.ts
open 
open(content: string|Element|Array<string|Element>, title: string|Element|Array<string|Element>, destroyAfter: boolean, modal: boolean): void
Fires

{@link event:beforeOpen} id returns 'false' then the window will not open

{@link event:afterOpen}
Source: modules/Dialog.ts
setContent 
setContent(content: string|Element|Array<string|Element>): void
Example 
var dialog = new Jodi.modules.Dialog(parent);
dialog.setTitle('Hello world');
dialog.setContent('<form onsubmit="alert(1);"><input type="text" /></form>');
dialog.open();
Source: modules/Dialog.ts
setFooter 
setFooter(content: string|Element|Array<string|Element>): void
Example 
var dialog = new Jodi.modules.Dialog(parent);
dialog.setTitle('Hello world');
dialog.setContent('<form><input id="someText" type="text" /></form>');
dialog.setFooter([
 $('<a class="jodit_button">OK</a>').click(function () {
     alert($('someText').val())
     dialog.close();
 })
]);
dialog.open();
Source: modules/Dialog.ts
setMaxZIndex 
setMaxZIndex(): void
Source: modules/Dialog.ts
setPosition 
setPosition(x: number, y: number): void
Source: modules/Dialog.ts
setSize 
setSize(w: number|string, h: number|string): void
Source: modules/Dialog.ts
setTitle 
setTitle(content: string|Element|Array<string|Element>): void
Example 
var dialog = new Jodi.modules.Dialog(parent);
dialog.setTitle('Hello world');
dialog.setTitle(['Hello world', '<button>OK</button>', $('<div>some</div>')]);
dialog.open();
Source: modules/Dialog.ts

DialogOptions

type DialogOptions =  {
  draggable?: boolean,
  fullsize?: boolean,
  fullsizeButton?: boolean,
  resizable?: boolean,
  zIndex?: number,
}

Alert

Alert(msg: string, title: string|Function, callback: Function): Dialog

Show alert dialog. Work without Jodit object

Method

Alert
Example 
Jodit.Alert("File was uploaded");
Jodit.Alert("File was uploaded", "Message");
Jodit.Alert("File was uploaded", function() {
   $('form').hide();
});
Jodit.Alert("File wasn't uploaded", "Error", function() {
   $('form').hide();
});
Source: modules/Dialog.ts

Confirm

Confirm(msg: string, title: string|__call(yes: boolean): void, callback: __call(yes: boolean): void): Dialog

Show confirm dialog. Work without Jodit object

Method

Confirm
Example 
Jodit.Confirm("Are you shure?", "Confirm Dialog", function (yes) {
    if (yes) {
        // do something
    }
});
Source: modules/Dialog.ts

Promt

Promt(msg: string, title: string|Function, callback: Function, placeholder: string): Dialog

Show promt dialog. Work without Jodit object

Method

Promt
Example 
Jodit.Promt("Enter your name", "Promt Dialog", function (name) {
    if (name.length < 3) {
        Jodit.Alert("The name must be at least 3 letters");
        return false;
    }
    // do something
});
Source: modules/Dialog.ts

modules/Dom

Source: modules/Dom.ts

Dom

Source: modules/Dom.ts
Method
after 
static after(elm: HTMLElement, newElement: HTMLElement|DocumentFragment): void
Source: modules/Dom.ts
all 
static all(node: Node, condition: __call(element: Node): boolean|void): Node
Source: modules/Dom.ts
canSplitBlock 
static canSplitBlock(node: any, win: Window): boolean
Source: modules/Dom.ts
closest 
static closest(node: Node, tags: string|Function|RegExp, root: HTMLElement): Node|HTMLTableElement|HTMLElement|false|HTMLTableCellElement
Source: modules/Dom.ts
contains 
static contains(root: Node, child: Node): boolean

Check root contains child

Source: modules/Dom.ts
create 
static create(nodeName: string, content: string, doc: Document): HTMLElement|Text
Method

create
Example 
var textnode = parent.node.create('text', 'Hello world');
var div = parent.node.create('div', '<img src="test.jpg">');
Source: modules/Dom.ts
each 
static each(elm: HTMLElement, callback: Function): void
Example 
parent.node.each(parent.selection.current(), function (node) {
 if (node.nodeType === Node.TEXT_NODE) {
     node.nodeValue = node.nodeValue.replace(Jodit.INVISIBLE_SPACE_REG_EX, '') // remove all of the text element codes invisible character
 }
});
Source: modules/Dom.ts
find 
static find(node: Node, condition: __call(element: Node): boolean, root: HTMLElement, recurse: boolean, sibling: string, child: string|false): false|Node
Source: modules/Dom.ts
isBlock 
static isBlock(node: any): boolean
Source: modules/Dom.ts
isEmptyTextNode 
static isEmptyTextNode(node: Node): boolean
Source: modules/Dom.ts
isNode 
static isNode(object: any, win: Window): boolean
Source: modules/Dom.ts
isOrContains 
static isOrContains(root: Node, child: Node): boolean

Check root contains child or equal child

Source: modules/Dom.ts
next 
static next(node: Node, condition: __call(element: Node): boolean, root: HTMLElement, withChild: Boolean): false|Node|HTMLElement|HTMLTableCellElement
Source: modules/Dom.ts
prev 
static prev(node: Node, condition: __call(element: Node): boolean, root: HTMLElement, withChild: Boolean): false|Node|HTMLElement|HTMLTableCellElement
Source: modules/Dom.ts
replace 
static replace(elm: HTMLElement, newTagName: string|HTMLElement, withAttributes: boolean, notMoveContent: boolean, doc: Document): HTMLElement
Example 
Jodit.modules.Dom.replace(parent.editor.getElementsByTagName('span')[0], 'p'); // Replace the first <span> element to the < p >
Source: modules/Dom.ts
unwrap 
static unwrap(node: Node): void
Source: modules/Dom.ts
up 
static up(node: Node, condition: Function, root: Node): false|Node|HTMLElement|HTMLTableCellElement|HTMLTableElement
Source: modules/Dom.ts
wrap 
static wrap(current: any, tag: Node|string, editor: Jodit): HTMLElement
Source: modules/Dom.ts

modules/Events

Source: modules/Events.ts

Events

This class extends Component.

The module editor's event manager

Source: modules/Events.ts
Constructor
constructor
Source: modules/Component.ts
Property
current
Type: string
Source: modules/Events.ts
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
stack
Type: Array<string>
Default value: []
Source: modules/Events.ts
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: modules/Component.ts
fire 
fire(object: any, eventOrArgs: string|Array<any>, args: Array<any>): false|void|any
Method

fire
Example 
var dialog = new Jodit.modules.Dialog(parent);
parent.on(dialog, 'afterClose', function () {
    dialog.destroy(); // will be removed from DOM
});
dialog.open('Hello world!!!');
Source: modules/Events.ts
off 
off(object: any, list: any, callback: Function): this
Method

off
Example 
var a = {name: "Anton"};
parent.events.on(a, 'open', function () {
    alert(this.name);
});

parent.events.fire(a, 'open');
parent.events.off(a, 'open');
var b = {name: "Ivan"}, hndlr = function () {
 alert(this.name);
};
parent.events.on(b, 'open close', hndlr);
parent.events.fire(a, 'open');
parent.events.off(a, 'open', hndlr);
parent.events.fire(a, 'close');
parent.events.on('someGlobalEvents', function () {
  console.log(this); // parent
});
parent.events.fire('someGlobalEvents');
parent.events.off('someGlobalEvents');
Source: modules/Events.ts
on 
on(objectOrEvent: any, list: any, callback: string|Function, onTop: boolean): this
Method

on
Example 
// set global handler
parent.on('beforeSetELementValue', function (data) {
    data.value = jQuery.trim(data.value);
});
Source: modules/Events.ts

modules/FileBrowser

Source: modules/FileBrowser.ts

Config

Source: modules/FileBrowser.ts
Config
Source: modules/FileBrowser.ts
Property
filebrowser
Type: FileBrowserOptions
Source: modules/FileBrowser.ts

FileBrowser

This class extends Component.
Source: modules/FileBrowser.ts
Constructor
constructor
Source: modules/FileBrowser.ts
Property
currentBaseUrl
Type: string
Default value:
Source: modules/FileBrowser.ts
currentPath
Type: string
Default value:
Source: modules/FileBrowser.ts
currentSource
Type: string
Default value: DEFAULT_SOURCE_NAME
Source: modules/FileBrowser.ts
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
options
Type: FileBrowserOptions
Source: modules/FileBrowser.ts
uploader
Type: Uploader
Source: modules/FileBrowser.ts
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
close 
close(): void

Close dialog

Method

close
Source: modules/FileBrowser.ts
create 
create(name: any, path: any, source: any): void

Create a directory on the server

Method

create
Source: modules/FileBrowser.ts
destruct 
destruct(): void
Source: modules/Component.ts
getPathByUrl 
getPathByUrl(url: string, success: __call(path: string, name: string, source: string): void, onFailed: __call(error: Error): void): void

Get path by url. You can use this method in another modules

Method

getPathByUrl
Source: modules/FileBrowser.ts
isOpened 
isOpened(): boolean
Source: modules/FileBrowser.ts
move 
move(filepath: string, path: string, source: string): void

Move a file / directory on the server

Method

move
Source: modules/FileBrowser.ts
open 
open(callback: __call(data: FileBrowserCallBcackData): void): void

It opens a web browser window

Method

open
Example 
var fb = new Jodit.modules.FileBrowser(parent);
fb.open(function (data) {
    var i;
    for (i = 0;i < data.files.length; i += 1) {
        parent.selection.insertImage(data.baseurl + data.files[i]);
    }
});
Source: modules/FileBrowser.ts
openImageEditor 
openImageEditor(href: string, name: string, path: string, source: string, onSuccess: Function, onFailed: __call(error: Error): void): void

Open Image Editor

Method

openImageEditor
Source: modules/FileBrowser.ts
remove 
remove(path: string, file: string, source: string): void
Method

remove
Source: modules/FileBrowser.ts
status 
status(message: string, success: boolean): void
Method

status
Example 
parent.filebrowser.status('There was an error uploading file', false);
Source: modules/FileBrowser.ts

ISource

Source: modules/FileBrowser.ts
Property
baseurl
Type: string
Source: modules/FileBrowser.ts
files
Type: Array<ISourceFile>
Source: modules/FileBrowser.ts
folders
Type: Array<string>
Source: modules/FileBrowser.ts
path
Type: string
Source: modules/FileBrowser.ts

ISourceFile

Property{object}

filebrowser module settings {@link module:FileBrowser|FileBrowser}
Property{int}

filebrowser.howLongShowMsg=3000 How long toWYSIWYG show an error message in the status bar (ms)
Property{boolean}

filebrowser.sort=function (a, b, sortBy, parent) { return b.changed - a.changed;} Items sort functions

filebrowser.sortBy='changed' Sort by field

filebrowser.filter=function (item, searchWord) { return item.name.toLowerCase().indexOf(searchWord.toLowerCase()) !== -1} Filter items

filebrowser.showFileName=true Show filename in thumbs

filebrowser.showFileSize=true Show filesize in thumbs

filebrowser.showFileChangeTime=true Show the last modification time in thumbs

filebrowser.editImage=true use {@link module:ImageEditor|Image editor module} - crop and resize image

filebrowser.preview=true Show preview button in context menu

filebrowser.showPreviewNavigation=true Show navigation buttons in preview

filebrowser.showSelectButtonInPreview=true Show select button in preview

filebrowser.contextMenu=true use context menu

filebrowser.createNewFolder=true The ability toWYSIWYG create a directory of the web browser

filebrowser.deleteFolder=true The ability toWYSIWYG delete directories from the web browser

filebrowser.moveFolder=true The ability toWYSIWYG move directories from the web browser

filebrowser.moveFile=true The ability toWYSIWYG move file from the web browser

filebrowser.showFoldersPanel=true Show folders panel
Property{px}

filebrowser.width=763px The width of the web browser

filebrowser.height=400px The height of the file browser
Property{array}

filebrowser.buttons="['upload', 'remove', 'update', 'select', 'edit', 'tiles', 'list']" Toolbar browser
Example 
var editor = new Jodit('#editor', {
    filebrowser: {
        buttons: ['upload', 'remove', 'update', {
            name: 'deleteall',
            icon: 'remove',
            exec: function () {
                $files.find('a').each(function () {
                    remove(editor.filebrowser.currentPath, $(this).data('name'));
                });
                editor.filebrowser.loadTree();
            },
       }],
   }
})
Property{function}

filebrowser.isSuccess method toWYSIWYG check - whether the response positive

filebrowser.getMessage method for receiving a message from the response
Example 
new Jodit('#editor', {
    filebrowser: {
         isSuccess: function (resp) {
             return resp.status == 1;
         },
         getMessage: function (resp) {
             return resp.message;
         },
    }
})
Property{string}

filebrowser.view='tiles' Filelist view - tiles or list
Property{object}

filebrowser.ajax The default settings for AJAX connections toWYSIWYG the server. Most of the settings like here {@link http://api.jquery.com/jQuery.ajax/|jQuery.ajax} but is not jQuery.ajax
Property{function(data)}

filebrowser.ajax.prepareData Method of preparation of data toWYSIWYG be sent toWYSIWYG the server

filebrowser.ajax.process The method of processing the data obtained after administration of the server. Must return this PlainObject format

 {
    files: resp.files || [], // {array} The names of files or folders, files can be ['image.jpg', 'image.jpg2', 'image3.jpg' ...] and [{file: 'image.jpg', thumb: '_thumbs/image.jpg'}, {file: 'image2.jpg', thumb: '_thumbs/image2.jpg'} ...]
    path: resp.path, // {string} Real relative path
    baseurl: resp.baseurl, // {string} Base url for filebrowser
    error: resp.error, // {int}
    msg: resp.msg // {string}
};
Property{string}

filebrowser.ajax.url='' Address entry point on the server for AJAX connection
Property{object}

filebrowser.ajax.data={} Default data toWYSIWYG send toWYSIWYG the server
Property{(json|text)}

filebrowser.ajax.dataType='json' The format of the returned data
Property{plainobject}

filebrowser.ajax.headers={} An object of additional header key/value pairs toWYSIWYG send along with requests using the XMLHttpRequest transport. The header X-Requested-With: XMLHttpRequest is always added, but its default XMLHttpRequest value can be changed here
Property{object}

filebrowser.resize Settings for AJAX connections toWYSIWYG the server toWYSIWYG resize image. By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} c параметром action=create

filebrowser.crop Settings for AJAX connections toWYSIWYG the server toWYSIWYG crop image. By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} c параметром action=create

filebrowser.create Settings for AJAX connections toWYSIWYG the server toWYSIWYG create the category . By default, the uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} c параметром action=create

filebrowser.move Settings for AJAX connections toWYSIWYG the server for the moving image or category . By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} c параметром action=move

filebrowser.remove Settings for AJAX connections toWYSIWYG the server toWYSIWYG delete the image or category . By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} c параметром action=remove

filebrowser.folder Settings for AJAX connections toWYSIWYG the server toWYSIWYG download the list of categories . By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} c параметром action=folder

filebrowser.items Settings for AJAX connections toWYSIWYG the server toWYSIWYG download the image list in the specified category . By default uses {@link Jodit.defaultOptions.filebrowser.ajax|filebrowser.ajax} c параметром action=items

filebrowser.uploader=null Settings Module {@link module:Uploader|Uploader} for fast uploading images in category via Drag&Drop file in the file browser. The default settings of the module {@link module:Uploader|Uploader}
Example 
// default values
{
    isSuccess: function (resp) {
        return !resp.error;
    },
    getMessage: function (resp) {
        return resp.msg;
    },
    ajax: {
        url: '',
        async: true,
        data: {},
        contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
        headers : {},
        method : 'POST',
        processData  : true,
        dataType: 'json',
        headers: {},
        prepareData: function (data) {
            return data;
        },
        process: function (resp) {
            return {
                files: resp.files || [],
                path: resp.path,
                baseurl: resp.baseurl,
                error: resp.error,
                msg: resp.msg
            };
        }
    },
    resize: {
        data: {action: 'resize'},
    },
    crop: {
        data: {action: 'crop'},
    },
    create: {
        data: {action: 'create'},
    },
    move: {
        data: {action: 'move'},
    },
    remove: {
        data: {action: 'remove'},
    },
    items: {
        data: {action: 'items'},
    },
    folder: {
        data: {action: 'folder'},
    },
    uploader: null // use default Uploader's settings
}
 
new Jodit('#editor2', {
        filebrowser: {
            isSuccess: function (resp) {
                return resp.length !== 0;
            },
            getMessage: function (resp) {
                return resp;
            },
            ajax: {
                url: 'ajax.php',
                method: 'GET',
                dataType: 'text',
                headers: {
                    'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                data: {
                    someparameter: 1
                },
                prepareData: function (data) {
                    data.someparameter++;
                    return data;
                },
                process: function (resp) {
                    return resp.split('|'); // return items list
                },
            }
        }
    })
 
new Jodit('#jodit', {
       uploader: {
           url: 'connector/upload.php',
           baseurl: 'images/'
       },
       filebrowser: {
           create: {
               url: 'connector/create.php',
           },
           move: {
               url: 'connector/move.php',
           },
           remove: {
               url: 'connector/remove.php',
           },
           items: {
               url: 'connector/items.php',
           },
           folder: {
               url: 'connector/tree.php',
           }
       }
   });
Source: modules/FileBrowser.ts
Property
changed
Type: string
Source: modules/FileBrowser.ts
file
Type: string
Source: modules/FileBrowser.ts
size
Type: string
Source: modules/FileBrowser.ts
thumb
Type: string
Source: modules/FileBrowser.ts

ISourcesFiles

Source: modules/FileBrowser.ts

ExecButton

type ExecButton =  {
  exec: Function,
  icon?: string,
  name?: string,
}

FileBrowserAjaxOptions

type FileBrowserAjaxOptions =  {
  async?: boolean,
  cache?: boolean,
  contentType?: string,
  data: __index(key: string): string,
  dataType?: string,
  headers?: __index(key: string): string,
  method?: string,
  prepareData?: __call(this: Uploader, data: __index(key: string): string): __index(key: string): string,
  process?: __call(this: Uploader, resp: FileBrowserAnswer): FileBrowserAnswer,
  processData?: boolean,
  url?: string,
}

FileBrowserAnswer

type FileBrowserAnswer =  {
  data: {
    code: number,
    messages?: Array<string>,
    name: string,
    path: string,
    source: string,
    sources: ISourcesFiles,
  },
  success: boolean,
  time: string,
}

FileBrowserCallBcackData

type FileBrowserCallBcackData =  {
  baseurl: string,
  files: Array<string>,
}

FileBrowserOptions

type FileBrowserOptions =  {
  ajax: FileBrowserAjaxOptions,
  buttons: Array<string|Function|ExecButton>,
  contextMenu: boolean,
  create: FileBrowserAjaxOptions,
  createNewFolder: boolean,
  crop: FileBrowserAjaxOptions,
  deleteFolder: boolean,
  editImage: boolean,
  filter: __call(item: any, search: any): boolean,
  folder: FileBrowserAjaxOptions,
  getMessage: __call(resp: FileBrowserAnswer): string,
  getThumbTemplate: __call(this: FileBrowser, item: ISourceFile, source: ISource, source_name: string): string,
  getlocalfilebyurl: FileBrowserAjaxOptions,
  height: number,
  howLongShowMsg: number,
  isSuccess: __call(resp: FileBrowserAnswer): boolean,
  items: FileBrowserAjaxOptions,
  move: FileBrowserAjaxOptions,
  moveFile: boolean,
  moveFolder: boolean,
  preview: boolean,
  remove: FileBrowserAjaxOptions,
  resize: FileBrowserAjaxOptions,
  showFileChangeTime: boolean,
  showFileName: boolean,
  showFileSize: boolean,
  showFoldersPanel: boolean,
  showPreviewNavigation: boolean,
  showSelectButtonInPreview: boolean,
  sort: __call(a: any, b: any, sortBy: any, editor: Jodit): number,
  sortBy: string,
  uploader: null,
  view: string,
  width: number,
}

DEFAULT_SOURCE_NAME

default
Type: default
Source: modules/FileBrowser.ts

ITEM_CLASS

jodit_filebrowser_files_item
Type: jodit_filebrowser_files_item
Source: modules/FileBrowser.ts

modules/Helpers

Source: modules/Helpers.ts

eachCallback

type eachCallback =  __call(key: number|string, value: any|Array<any>): boolean|void

$$temp

1
Type: number
Source: modules/Helpers.ts

$$

$$(selector: string, root: HTMLElement|HTMLDocument): Array<HTMLElement>
Source: modules/Helpers.ts

appendScript

appendScript(url: string, callback: __call(this: HTMLScriptElement, e: Event): any, className: string): void
Source: modules/Helpers.ts

asArray

asArray(a: any): Array
Source: modules/Helpers.ts

browser

browser(browser: string): boolean|string

Module returns method that is used to determine the browser

Params

{Object} parent main Jodit object
Example 
console.log(editor.helper.browser('mse'));
console.log(editor.helper.browser('chrome'));
console.log($editor.helper.browser('opera'));
console.log(editor.helper.browser('firefox'));
console.log(editor.helper.browser('mse') && editor.helper.browser('version') > 10);
Source: modules/Helpers.ts

camelCase

camelCase(key: string): string
Source: modules/Helpers.ts

cleanFromWord

cleanFromWord(text: string): string

The method automatically cleans up content from Microsoft Word and other HTML sources to ensure clean, compliant content that matches the look and feel of the site

Source: modules/Helpers.ts

clear

clear(value: any, removeEmptyBlocks: boolean): string

Clear HTML

Method

clear
Source: modules/Helpers.ts

colorToHex

colorToHex(color: string): string|false

Converts rgba text representation of color in hex

Example 
var p = document.createElement('p');
p.style.color = '#ffffff';
console.log(p.getAttribute('style')); // color: rgb(255, 255, 255);
console.log(colorTohex(p.style.color)); // #ffffff
Source: modules/Helpers.ts

convertMediaURLToVideoEmbed

convertMediaURLToVideoEmbed(url: any, width: number, height: number): any

Javascript url pattern converter replace youtube/vimeo url in embed code

Source: modules/Helpers.ts

css

css(element: HTMLElement, key: string|any, value: string|number): string|number

Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element

Source: modules/Helpers.ts

ctrlKey

ctrlKey(e: MouseEvent|KeyboardEvent): boolean

CTRL pressed

Source: modules/Helpers.ts

debounce

debounce(fn: any, timeout: number, invokeAsap: boolean, ctx: any): (Anonymous function)

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called

Method

debounce
Example 
var jodit = new Jodit('.editor');
Jodit.modules.Dom("input").on('keydown', jodit.helper.debounce(function() {
    // Do expensive things
}, 100));
Source: modules/Helpers.ts

defaultLanguage

defaultLanguage(language: string): string
Source: modules/Helpers.ts

dom

dom(html: string|HTMLElement, doc: Document): HTMLElement

Create DOM element from HTML text

Source: modules/Helpers.ts

each

each(obj: Array|any, callback: eachCallback): false|object
Source: modules/Helpers.ts

extend

extend(args: Array<any>): any
Source: modules/Helpers.ts

formatUrl

formatUrl(url: string): string
Source: modules/Helpers.ts

fromCamelCase

fromCamelCase(key: string): string
Source: modules/Helpers.ts

getContentWidth

getContentWidth(element: HTMLElement, win: Window): number
Source: modules/Helpers.ts

hexToRgb

hexToRgb(hex: string): {
  b: number,
  g: number,
  r: number,
}|null
Method

hexToRgb
Source: modules/Helpers.ts

htmlentities

htmlentities(text: string): string

Convert all <,>,",' characters to HTML entities

Method

htmlentities
Source: modules/Helpers.ts

htmlspecialchars

htmlspecialchars(html: string): string

Convert special characters to HTML entities

Method

htmlspecialchars
Source: modules/Helpers.ts

humanSizeToBytes

humanSizeToBytes(human: any): any

Converts from human readable file size (kb,mb,gb,tb) to bytes

Method

humanSizeToBytes
Source: modules/Helpers.ts

inArray

inArray(needle: string|number, haystack: Array<number|string>): boolean
Source: modules/Helpers.ts

isHTML

isHTML(str: any): boolean

Check if a string is html or not

Method

isHTML
Source: modules/Helpers.ts

isIE

isIE(): boolean
Source: modules/Helpers.ts

isPlainObject

isPlainObject(obj: any): boolean
Source: modules/Helpers.ts

isURL

isURL(str: any): boolean

Check if a string is a url

Method

isURL
Source: modules/Helpers.ts

isWindow

isWindow(obj: any): boolean
Source: modules/Helpers.ts

normalizeColor

normalizeColor(colorInput: string): string|false

Convert rgba and short HEX color to Full text color. #fff to #FFFFFF

Method

normalizeColor
Source: modules/Helpers.ts

normalizeSize

normalizeSize(value: string|number): string

Normalize value to CSS meters

Method

normalizeSize
Source: modules/Helpers.ts

normilizeCSSValue

normilizeCSSValue(key: string, value: string|number): string|number
Source: modules/Helpers.ts

offset

offset(elm: HTMLElement, jodit: Jodit, recurse: boolean): {
  height: number,
  left: number,
  top: number,
  width: number,
}

Calc relative offset by start editor field

Method

offset
Source: modules/Helpers.ts

parseQuery

parseQuery(queryString: string): __index(key: string): string

Parse query string

Source: modules/Helpers.ts

pathNormalize

pathNormalize(path: any): any
Source: modules/Helpers.ts

sprintf

sprintf(args: Array<any>): any
Source: modules/Helpers.ts

throttle

throttle(fn: Function, timeout: number, ctx: any): (Anonymous function)

Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds

Method

throttle
Example 
var jodit = new Jodit('.editor');
jodit.__on(document.body, 'scroll', jodit.helper.throttle(function() {
    // Do expensive things
}, 100));
Source: modules/Helpers.ts

trim

trim(value: string): string

It clears the line of all auxiliary invisible characters , from the spaces and line breaks , tabs from the beginning and end of the line

Source: modules/Helpers.ts

type

type(obj: any): string
Source: modules/Helpers.ts

urlNormalize

urlNormalize(url: any): any
Source: modules/Helpers.ts

val

val(elm: HTMLInputElement|HTMLElement, selector: string, value: string): string
Source: modules/Helpers.ts

modules/ImageEditor

Source: modules/ImageEditor.ts

Config

Source: modules/ImageEditor.ts
Config
Source: modules/ImageEditor.ts
Property
imageeditor
Type: ImageEditorOptions
Source: modules/ImageEditor.ts

ImageEditor

This class extends Component.

The module allows you toWYSIWYG edit the image: resize or cut any part of it

Source: modules/ImageEditor.ts
Constructor
constructor
Source: modules/ImageEditor.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
onSave
Type: Function
Source: modules/ImageEditor.ts
options
Type: ImageEditorOptions
Source: modules/ImageEditor.ts
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: modules/Component.ts
hide 
hide(): void

Hide image editor

Method

hide
Source: modules/ImageEditor.ts
open 
open(url: string, save: __call(newname: string|void, box: ActionBox, success: Function, failed: __call(error: Error): void): void): void

Open image editor

Method

open
Example 
var jodit = new Jodit('.editor', {
    imageeditor: {
        crop: false,
        closeAfterSave: true,
        width: 500
    }
});
jodit.imageeditor.open('http://xdsoft.net/jodit/images/test.png', function (name, data, success, failed) {
    var img = jodit.node.create('img');
    img.setAttribute('src', 'http://xdsoft.net/jodit/images/test.png');
    if (box.action !== 'resize') {
         return failed('Sorry it is work only in resize mode. For croping use FileBrowser');
    }
    img.style.width = data.w;
    img.style.height = data.h;
    jodit.selection.insertNode(img);
    success();
});
Source: modules/ImageEditor.ts

ActionBox

type ActionBox =  {
  action: string,
  box: {
    h: number,
    w: number,
    x?: number,
    y?: number,
  },
}

ImageEditorOptions

type ImageEditorOptions =  {
  closeAfterSave: boolean,
  crop: boolean,
  cropDefaultHeight: string|number,
  cropDefaultWidth: string|number,
  cropUseRatio: boolean,
  height: string|number,
  resize: boolean,
  resizeMinHeight: number,
  resizeMinWidth: number,
  resizeUseRatio: boolean,
  width: string|number,
}

modules/Observer

Source: modules/Observer.ts

Config

Property{object}

observer module settings {@link Observer|Observer}
Property{int}

observer.timeout=100 Delay on every change
Source: modules/Observer.ts
Config
Source: modules/Observer.ts
Property
observer
Type: 
{
  timeout: number,
}
Source: modules/Observer.ts

Command

Source: modules/Observer.ts
Constructor
constructor
Source: modules/Observer.ts
Method
execute 
execute(): void
Source: modules/Observer.ts
redo 
redo(): void
Source: modules/Observer.ts
undo 
undo(): void
Source: modules/Observer.ts

Observer

This class extends Component.

The module monitors the status of the editor and creates / deletes the required number of Undo / Redo shots . To track changes in use {@link https://developer.mozilla.org/ru/docs/Web/API/MutationObserver|MutationObserver}

Module

Observer
See

{@link module:Snapshot|Snapshot}
Params

{Jodit} parent Jodit main object
Source: modules/Observer.ts
Constructor
constructor
Source: modules/Observer.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
snapshot
Type: Snapshot
Source: modules/Observer.ts
Property{snapshot}

snapshot
stack
Type: Stack
Source: modules/Observer.ts
Property

{Stack} stack
Method
___changeHandler 
___changeHandler(): void
Source: modules/Observer.ts
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
___onChange 
___onChange(): void
Source: modules/Observer.ts
block 
block(block: boolean|number): void

Do not remember changes toWYSIWYG the stack Redo / Undo when it is not needed. For example, if group operations, it is best toWYSIWYG remember only the result of the last operation . However, in some operations itself Jodit launches block (true) and off you do not need toWYSIWYG own . therefore You can use 1 and 0. 1 - Set the value toWYSIWYG true, but it will remember the current value . A 0 - restore the current value

Example 
parent.__nativeObserver.block(1);// если value has been true when you call parent.__nativeObserver.block(0); it will still be true
parent.selection.insertImage('some.png');
parent.selection.insertImage('some2.png');
parent.selection.insertImage('some4.png', 'Some image');
parent.__nativeObserver.block(0); // restore the value that was before parent.__nativeObserver.block(1)
parent.$editor.find('img').css('border', '1px solid #ccc'); // the stack will be filled soon , the last state
Source: modules/Observer.ts
changed 
changed(): void

There has been a change in the stack Undo/Redo

Method

changed
Source: modules/Observer.ts
destruct 
destruct(): void
Source: modules/Observer.ts
redo 
redo(): void
Method

redo
Source: modules/Observer.ts
undo 
undo(): void
Method

undo
Source: modules/Observer.ts

modules/PseudoPromise

Source: modules/PseudoPromise.ts

PseudoPromise

Source: modules/PseudoPromise.ts
Constructor
constructor
Source: modules/PseudoPromise.ts
Property
isFulfilled
Type: any
Default value: null
Source: modules/PseudoPromise.ts
Method
catch 
catch(onRejected: Function): this
Source: modules/PseudoPromise.ts
then 
then(onFulfilled: Function|null, onRejected: Function): this
Source: modules/PseudoPromise.ts

REJECT

0
Type: unknown
Source: modules/PseudoPromise.ts

RESOLVE

1
Type: 1
Source: modules/PseudoPromise.ts

modules/Selection

Source: modules/Selection.ts

Selection

This class extends Component.
Source: modules/Selection.ts
Constructor
constructor
Source: modules/Component.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
applyCSS 
applyCSS(cssRules: __index(key: string): string, nodeName: string, options: __index(key: string): string|Array<string>|__index(key: string): __call(editor: Jodit, value: string): boolean): void

Apply some css rules for all selections. It method wraps selections in nodeName tag

Source: modules/Selection.ts
clear 
clear(): void
Source: modules/Selection.ts
current 
current(): false|Node
Source: modules/Selection.ts
cursorInTheEdge 
cursorInTheEdge(start: boolean, parentBlock: HTMLElement|Function|false, inverse: boolean): boolean
Source: modules/Selection.ts
destruct 
destruct(): void
Source: modules/Component.ts
eachSelection 
eachSelection(callback: Function): void
Source: modules/Selection.ts
focus 
focus(): boolean

Set focus in editor

Source: modules/Selection.ts
insertCursorAtPoint 
insertCursorAtPoint(x: number, y: number): boolean
Method

insertAtPoint
Source: modules/Selection.ts
insertHTML 
insertHTML(html: number|string|Node): void
Example 
parent.selection.insertHTML('<img src="image.png"/>');
Source: modules/Selection.ts
insertImage 
insertImage(url: any, styles: __index(key: string): string): void
Fired

afterInsertImage
Source: modules/Selection.ts
insertNode 
insertNode(node: Node, insertCursorAfter: boolean): void
Source: modules/Selection.ts
isCollapsed 
isCollapsed(): boolean
Source: modules/Selection.ts
isFocused 
isFocused(): boolean
Source: modules/Selection.ts
marker 
marker(atStart: boolean, range: Range): HTMLSpanElement
Source: modules/Selection.ts
restore 
restore(selectionInfo: Array<markerInfo>|null): void
Source: modules/Selection.ts
save 
save(): Array<markerInfo>
Source: modules/Selection.ts
select 
select(node: Node, inward: boolean): void
Source: modules/Selection.ts
setCursorAfter 
setCursorAfter(node: any): Text
Source: modules/Selection.ts
setCursorBefore 
setCursorBefore(node: any): Text
Source: modules/Selection.ts
setCursorIn 
setCursorIn(node: any, inStart: boolean): void
Source: modules/Selection.ts

markerInfo

type markerInfo =  {
  collapsed: boolean,
  endId?: string,
  endMarker?: string,
  startId: string,
  startMarker: string,
}

modules/Snapshot

Source: modules/Snapshot.ts

Snapshot

This class extends Component.

Module for creating snapshot of editor which includes html content and the current selection

Source: modules/Snapshot.ts
Constructor
constructor
Source: modules/Component.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: modules/Component.ts
make 
make(): SnapshotType
Source: modules/Snapshot.ts
restore 
restore(snapshot: SnapshotType): void
See

make
Source: modules/Snapshot.ts
equal 
static equal(first: SnapshotType, second: SnapshotType): boolean
Source: modules/Snapshot.ts

RangeType

type RangeType =  {
  endContainer: Array<number>,
  endOffset: number,
  startContainer: Array<number>,
  startOffset: number,
}

SnapshotType

type SnapshotType =  {
  html: string,
  range: RangeType,
}

modules/Table

Source: modules/Table.ts

Table

Source: modules/Table.ts
Method
addSelected 
static addSelected(td: HTMLTableCellElement): void
Source: modules/Table.ts
appendColumn 
static appendColumn(table: HTMLTableElement, j: number, after: boolean): void
Source: modules/Table.ts
appendRow 
static appendRow(table: HTMLTableElement, line: false|HTMLTableRowElement, after: boolean): void
Source: modules/Table.ts
formalCoordinate 
static formalCoordinate(table: HTMLTableElement, cell: HTMLTableCellElement, max: boolean): Array<number>
Source: modules/Table.ts
formalMatrix 
static formalMatrix(table: HTMLTableElement, callback: __call(cell: HTMLTableCellElement, row: number, col: number, colSpan: number, rowSpan: number): false|void): Array<Array<HTMLTableCellElement>>
Source: modules/Table.ts
getAllSelectedCells 
static getAllSelectedCells(table: HTMLElement|HTMLTableElement): Array<HTMLTableCellElement>
Source: modules/Table.ts
getColumnsCount 
static getColumnsCount(table: HTMLTableElement): number
Source: modules/Table.ts
getRowsCount 
static getRowsCount(table: HTMLTableElement): number
Source: modules/Table.ts
getSelectedBound 
static getSelectedBound(table: any, selectedCells: any): Array<Array<number>>
Source: modules/Table.ts
mergeSelected 
static mergeSelected(table: HTMLTableElement): void
Source: modules/Table.ts
normalizeTable 
static normalizeTable(table: HTMLTableElement): void
Source: modules/Table.ts
removeColumn 
static removeColumn(table: HTMLTableElement, j: number): void
Source: modules/Table.ts
removeRow 
static removeRow(table: HTMLTableElement, rowIndex: number): void
Source: modules/Table.ts
restoreSelection 
static restoreSelection(td: HTMLTableCellElement): void
Source: modules/Table.ts
setColumnWidthByDelta 
static setColumnWidthByDelta(table: HTMLTableElement, j: number, delta: number, noUnmark: boolean, ___marked: Array<HTMLTableCellElement>): void
Source: modules/Table.ts
splitHorizontal 
static splitHorizontal(table: HTMLTableElement): void
Source: modules/Table.ts
splitVertical 
static splitVertical(table: HTMLTableElement): void
Source: modules/Table.ts

JODIT_SELECTED_CELL_MARKER

data-jodit-selected-cell
Type: data-jodit-selected-cell
Source: modules/Table.ts

modules/Toolbar

Source: modules/Toolbar.ts

Toolbar

This class extends Component.
Source: modules/Toolbar.ts
Constructor
constructor
Source: modules/Toolbar.ts
Property
container
Type: HTMLDivElement
Source: modules/Toolbar.ts
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
icons
Type: unknown
Source: modules/Toolbar.ts
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
addButton 
addButton(item: string|ControlType, controlOption: ControlType, content: string, target: HTMLElement): HTMLLIElement
Source: modules/Toolbar.ts
build 
build(buttons: Array<ControlType|string>, container: HTMLElement, target: HTMLElement): void
Source: modules/Toolbar.ts
closeAll 
closeAll(): void
Source: modules/Toolbar.ts
destruct 
destruct(): void
Source: modules/Component.ts
openList 
openList(btn: HTMLLIElement): void
Source: modules/Toolbar.ts
openPopup 
openPopup(btn: HTMLLIElement|HTMLAnchorElement, content: string|HTMLElement|false, rightAlign: boolean): void
Source: modules/Toolbar.ts
getIcon 
static getIcon(name: string, defaultValue: string|false): any
Source: modules/Toolbar.ts

ButtonType

type ButtonType =  {
  btn: HTMLLIElement,
  control: ControlType,
  name: string,
}

ControlType

type ControlType =  {
  args?: Array<any>,
  cols?: number,
  command?: string,
  controlName?: string,
  css?: __index(key: string): string|Array<string>|__index(key: string): __call(editor: Jodit, value: string): boolean,
  exec?: __call(editor: Jodit, current: Node|false, control: ControlType, originalEvent: Event, btn: HTMLLIElement): void,
  icon?: string,
  iconURL?: string,
  list?: __index(key: string): string|Array<string>,
  mode?: number,
  name?: string,
  options?: any,
  popup?: __call(editor: Jodit, current: Node|false, control: ControlType, close: Function): string|HTMLElement|false,
  tagRegExp?: RegExp,
  tags?: Array<string>,
  template?: __call(editor: Jodit, key: string, value: string): string,
  tooltip?: string,
}

modules/Undo

Source: modules/Undo.ts

Stack

Source: modules/Undo.ts
Method
canRedo 
canRedo(): boolean
Source: modules/Undo.ts
canUndo 
canUndo(): boolean
Source: modules/Undo.ts
changed 
changed(): void
Source: modules/Undo.ts
execute 
execute(command: Command): void
Source: modules/Undo.ts
redo 
redo(): void
Source: modules/Undo.ts
save 
save(): void
Source: modules/Undo.ts
undo 
undo(): void
Source: modules/Undo.ts

modules/Uploader

Source: modules/Uploader.ts

Config

Source: modules/Uploader.ts
Config
Source: modules/Uploader.ts
Property
enableDragAndDropFileToEditor
Type: boolean
Source: modules/Uploader.ts
uploader
Type: UploaderOptions
Source: modules/Uploader.ts

Uploader

This class extends Component.
Source: modules/Uploader.ts
Constructor
constructor
Source: modules/Uploader.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
bind 
bind(form: HTMLElement, handlerSuccess: HandlerSuccess, handlerError: HandlerError): void
Method

bind
Example 
var $form = jQuery('<form><input type="text" typpe="file"></form>');
jQuery('body').append($form);
Jodit.editors.someidfoeditor.uploader.bind($form, function (files) {
    var i;
    for (i = 0; i < data.files.length; i += 1) {
        parent.selection.insertImage(data.files[i])
    }
});
Source: modules/Uploader.ts
buildData 
buildData(data: FormData|__index(key: string): string): FormData|__index(key: string): string
Source: modules/Uploader.ts
destruct 
destruct(): void
Source: modules/Component.ts
send 
send(data: FormData|__index(key: string): string, success: __call(resp: UploaderAnswer): void): void
Source: modules/Uploader.ts
sendFiles 
sendFiles(files: FileList|Array<File>, handlerSuccess: HandlerSuccess, handlerError: HandlerError, process: Function): boolean
Source: modules/Uploader.ts
setPath 
setPath(path: string): void
Method

setPath
Source: modules/Uploader.ts
setSource 
setSource(source: string): void
Method

setSource
Source: modules/Uploader.ts
uploadRemoteImage 
uploadRemoteImage(url: string, handlerSuccess: HandlerSuccess, handlerError: HandlerError): void
Source: modules/Uploader.ts
dataURItoBlob 
static dataURItoBlob(dataURI: string): Blob
Source: modules/Uploader.ts

HandlerError

type HandlerError =  __call(e: Error): void

HandlerSuccess

type HandlerSuccess =  __call(resp: UploaderData): void

UploaderAnswer

type UploaderAnswer =  {
  data: UploaderData,
  success: boolean,
  time: string,
}

UploaderData

type UploaderData =  {
  baseurl?: string,
  files?: Array<string>,
  messages?: Array<string>,
  newfilename?: string,
  path?: string,
}

UploaderOptions

type UploaderOptions =  {
  data: null|any,
  defaultHandlerError: HandlerError,
  defaultHandlerSuccess: HandlerSuccess,
  error: __call(e: Error): void,
  format: string,
  getMessage: __call(resp: UploaderAnswer): string,
  headers?: __index(key: string): string,
  isSuccess: __call(resp: UploaderAnswer): boolean,
  prepareData: __call(formData: FormData): any,
  process: __call(resp: UploaderAnswer): UploaderData,
  url: string,
}

modules/Widget

Source: modules/Widget.ts

Widget

Source: modules/Widget.ts
ImageSelectorCallbacks
type ImageSelectorCallbacks =  {
  filebrowser?: __call(data: FileBrowserCallBcackData): void,
  upload?: __call(this: Jodit, data: FileBrowserCallBcackData): void,
  url?: __call(this: Jodit, url: string, alt: string): void,
}
ColorPickerWidget
ColorPickerWidget(editor: Jodit, callback: __call(newColor: string): void, coldColor: string): HTMLDivElement

Build color picker

Example 
$tabs = TabsWidget(editor, {
   'Text' : ColorPickerWidget(editor, function (color) {
        box.style.color = color;
    }, box.style.color),
    'Background' : ColorPickerWidget(editor, function (color) {
        box.style.backgroundColor = color;
    }, box.style.backgroundColor),
});
Source: modules/Widget.ts
ImageSelectorWidget
ImageSelectorWidget(editor: Jodit, callbacks: ImageSelectorCallbacks, elm: HTMLElement): HTMLDivElement
Constructor
Source: modules/Widget.ts
TabsWidget
TabsWidget(editor: Jodit, tabs: __index(key: string): string|HTMLElement|Function, state: {
  ___activeTab: string,
}): HTMLDivElement

Build tabs system

Example 
let tabs = widget.create('Tabs', {
   'Images': '<div>Images</div>',
   'Title 2': editor.helper.dom('<div>Some content</div>'),
   'Color Picker': ColorPickerWidget(editor, function (color) {
        box.style.color = color;
    }, box.style.color),
});
Source: modules/Widget.ts

plugins/addNewLine

Source: plugins/addNewLine.ts

Config

Source: plugins/addNewLine.ts
Config
Source: plugins/addNewLine.ts
Property
addNewLine
Type: boolean
Source: plugins/addNewLine.ts
addNewLineTagsTriggers
Type: Array<string>
Source: plugins/addNewLine.ts

default

default(editor: Jodit): void
Source: plugins/addNewLine.ts

plugins/autofocus

Source: plugins/autofocus.ts

Config

Source: plugins/autofocus.ts
Config
Source: plugins/autofocus.ts
Property
autofocus
Type: boolean
Source: plugins/autofocus.ts

default

default(editor: Jodit): void
Source: plugins/autofocus.ts

plugins/backspace

Source: plugins/backspace.ts

default

default(editor: Jodit): void
Source: plugins/backspace.ts

plugins/bold

Source: plugins/bold.ts

default

default(editor: Jodit): void
Source: plugins/bold.ts

plugins/cleanHTML

Source: plugins/cleanHTML.ts

Config

Property

{object} cleanHTML {@link module:cleanHTML|cleanHTML}'s options

{boolean} cleanHTML.cleanOnPaste=true clean pasted html

{boolean} cleanHTML.replaceNBSP=true Replace &nbsp; toWYSIWYG plain space

{boolean} cleanHTML.allowTags=false The allowTags option defines which elements will remain in the edited text when the editor saves. You can use this toWYSIWYG limit the returned HTML toWYSIWYG a subset
Example 
var jodit = new Jodit('#editor', {
   cleanHTML: {
      cleanOnPasteL false
   }
});
 
var editor = Jodit('#editor', {
    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` atrribute == '1.png'
});
editor.setEditorValue('Sorry! <strong>Goodby</strong> <span>mr.</span> <a style="color:red" href="http://xdsoft.net">Freeman</a>');
console.log(editor.getEditorValue()); //Sorry! <a href="http://xdsoft.net">Freeman</a>
 
var editor = Jodit('#editor', {
    allowTags: {
        p: true,
        a: {
            href: true
        },
        table: true,
        tr: true,
        td: true,
        img: {
            src: '1.png'
        }
    }
});
Source: plugins/cleanHTML.ts
Config
Source: plugins/cleanHTML.ts
Property
cleanHTML
Type: 
{
  allowTags: false|string|__index(key: string): string,
  cleanOnPaste: boolean,
  replaceNBSP: boolean,
}
Source: plugins/cleanHTML.ts

default

default(editor: Jodit): void
Source: plugins/cleanHTML.ts

plugins/color

Source: plugins/color.ts

default

default(editor: Jodit): void
Source: plugins/color.ts

plugins/enter

Source: plugins/enter.ts

default

default(editor: Jodit): void
Source: plugins/enter.ts

insertParagraph

insertParagraph(editor: Jodit, fake: Node, wrapperTag: string): HTMLElement

Insert default paragraph

Source: plugins/enter.ts

plugins/errorMessages

Source: plugins/errorMessages.ts

Config

Source: plugins/errorMessages.ts
Config
Source: plugins/errorMessages.ts
Property
showMessageErrorOffsetPx
Type: number
Source: plugins/errorMessages.ts
showMessageErrorTime
Type: number
Source: plugins/errorMessages.ts
showMessageErrors
Type: boolean
Source: plugins/errorMessages.ts

default

default(editor: Jodit): void
Source: plugins/errorMessages.ts

plugins/font

Source: plugins/font.ts

default

default(editor: Jodit): void
Source: plugins/font.ts

plugins/formatBlock

Source: plugins/formatBlock.ts

default

default(editor: Jodit): void
Source: plugins/formatBlock.ts

plugins/fullsize

Source: plugins/fullsize.ts

Config

Property{boolean}

fullsize=false true Editor toWYSIWYG open toWYSIWYG full screen

globalFullsize=true if true, after fullsize - all editors element get jodit_fullsize_box class (z-index: 100000 !important;)
Example 
var editor = new jodit({
    fullsize: true // fullsize editor
});
 
var editor = new Jodit();
editor.events.fire('toggleFullsize');
editor.events.fire('toggleFullsize', [true]); // fullsize
editor.events.fire('toggleFullsize', [false]); // usual mode
Source: plugins/fullsize.ts
Config
Source: plugins/fullsize.ts
Property
fullsize
Type: boolean
Source: plugins/fullsize.ts
globalFullsize
Type: boolean
Source: plugins/fullsize.ts

default

default(editor: Jodit): void
Source: plugins/fullsize.ts

plugins/iframe

Source: plugins/iframe.ts

Config

Source: plugins/iframe.ts
Config
Source: plugins/iframe.ts
Property
iframe
Type: boolean
Source: plugins/iframe.ts
iframeBaseUrl
Type: false|string
Source: plugins/iframe.ts
iframeCSSLinks
Type: Array<string>
Source: plugins/iframe.ts
iframeStyle
Type: string
Source: plugins/iframe.ts

default

default(editor: Jodit): void
Source: plugins/iframe.ts

plugins/imageInlineToolbar

Source: plugins/imageInlineToolbar.ts

default

default(editor: Jodit): void
Source: plugins/imageInlineToolbar.ts

plugins/imageProcessor

Source: plugins/imageProcessor.ts

JODIT_IMAGE_PROCESSOR_BINDED

__jodit_imageprocessor_binded
Type: __jodit_imageprocessor_binded
Source: plugins/imageProcessor.ts

default

default(editor: Jodit): void
Source: plugins/imageProcessor.ts

plugins/imageProperties

Source: plugins/imageProperties.ts

Config

Property{object}

image Plugin {@link module:Image|Image}'s options
Property{boolean}

image.openOnDblClick=true Open editing dialog after double click on image

image.editSrc=true Show edit 'src' input

image.useImageEditor=true Show crop/resize btn

image.editTitle=true Show edit 'title' input

image.editAlt=true Show edit 'alt' input

image.editLink=true Show edit image link's options

image.editSize=true Show edit image size's inputs

image.editMargins=true Show edit margin inputs

image.editStyle=true Show style edit input

image.editClass=true Show edit classNames input

image.editId=true Show edit ID input

image.editAlign=true Show Alignment selector

image.showPreview=true Show preview image

image.selectImageAfterClose=true Select image after close dialog
Example 
var editor = new Jodit('#editor', {
    image: {
        editSrc: false,
        editLink: false
    }
});
Source: plugins/imageProperties.ts
Config
Source: plugins/imageProperties.ts
Property
image
Type: 
{
  editAlign: boolean,
  editAlt: boolean,
  editClass: boolean,
  editId: boolean,
  editLink: boolean,
  editMargins: boolean,
  editSize: boolean,
  editSrc: boolean,
  editStyle: boolean,
  editTitle: boolean,
  openOnDblClick: boolean,
  selectImageAfterClose: boolean,
  showPreview: boolean,
  useImageEditor: boolean,
}
Source: plugins/imageProperties.ts

default

default(editor: Jodit): void
Source: plugins/imageProperties.ts

plugins/inlinePopup

Source: plugins/inlinePopup.ts

Config

Source: plugins/inlinePopup.ts
Config
Source: plugins/inlinePopup.ts
Property
popup
Type: __index(key: string): Array<ControlType|string>
Source: plugins/inlinePopup.ts

default

default(editor: Jodit): void
Source: plugins/inlinePopup.ts

plugins/justify

Source: plugins/justify.ts

default

default(editor: Jodit): void
Source: plugins/justify.ts

plugins/link

Source: plugins/link.ts

Config

Property

{object} link {@link module:link|link} plugin's options

{boolean} link.followOnDblClick=true Follow lnk address after dblclick

{boolean} link.processVideoLink=true Replace inserted youtube/vimeo link toWYSIWYG iframe

{boolean} link.processPastedLink=true Wrap inserted link in <a href="link">link</a>

{boolean} link.openLinkDialogAfterPost=true Open Link dialog after post

{boolean} link.removeLinkAfterFormat=true When the button is pressed toWYSIWYG clean format, if it was done on the link is removed like command unlink
Source: plugins/link.ts
Config
Source: plugins/link.ts
Property
link
Type: 
{
  followOnDblClick: boolean,
  openLinkDialogAfterPost: boolean,
  processPastedLink: boolean,
  processVideoLink: boolean,
  removeLinkAfterFormat: boolean,
}
Source: plugins/link.ts

default

default(jodit: Jodit): void
Module

plugins/link
Source: plugins/link.ts

plugins/mobile

Source: plugins/mobile.ts

Config

Source: plugins/mobile.ts
Config
Source: plugins/mobile.ts
Property
mobileTapTimeout
Type: number
Source: plugins/mobile.ts

default

default(editor: Jodit): void
Source: plugins/mobile.ts

plugins/orderedlist

Source: plugins/orderedlist.ts

default

default(editor: Jodit): void
Source: plugins/orderedlist.ts

plugins/paste

Source: plugins/paste.ts

Config

Property{boolean}

askBeforePasteHTML=true Ask before paste HTML in WYSIWYG mode
Source: plugins/paste.ts
Config
Source: plugins/paste.ts
Property
askBeforePasteHTML
Type: boolean
Source: plugins/paste.ts

default

default(editor: Jodit): void
Module

insertHTML
Source: plugins/paste.ts

plugins/placeholder

Source: plugins/placeholder.ts

Config

Property

{boolean} showPlaceholder=true Show placeholder
Example 
var editor = new Jodit('#editor', {
   showPlaceholder: false
});
Source: plugins/placeholder.ts
Config
Source: plugins/placeholder.ts
Property
placeholder
Type: string
Source: plugins/placeholder.ts
showPlaceholder
Type: boolean
Source: plugins/placeholder.ts
useInputsPlaceholder
Type: boolean
Source: plugins/placeholder.ts

default

default(editor: Jodit): void
Source: plugins/placeholder.ts

plugins/redoundo

Source: plugins/redoundo.ts

default

default(editor: Jodit): void
Source: plugins/redoundo.ts

plugins/resizer

Source: plugins/resizer.ts

Config

Property{boolean}

useIframeResizer=true Use true frame for editing iframe size
Source: plugins/resizer.ts
Config
Source: plugins/resizer.ts
Property
resizer
Type: 
{
  min_height: number,
  min_width: number,
}
Source: plugins/resizer.ts
useIframeResizer
Type: boolean
Source: plugins/resizer.ts
useImageResizer
Type: boolean
Source: plugins/resizer.ts
useTableResizer
Type: boolean
Source: plugins/resizer.ts

default

default(editor: Jodit): void
Source: plugins/resizer.ts

plugins/size

Source: plugins/size.ts

Config

Source: plugins/size.ts
Config
Source: plugins/size.ts
Property
allowResizeX
Type: boolean
Source: plugins/size.ts
allowResizeY
Type: boolean
Source: plugins/size.ts

default

default(editor: Jodit): void
Source: plugins/size.ts

plugins/source

Source: plugins/source.ts

Config

Source: plugins/source.ts
Config
Source: plugins/source.ts
Property
beautifyHTML

Beautify HTML then it possible

Type: boolean
Source: plugins/source.ts
beautifyHTMLCDNUrlsJS

CDN URLs for HTML Beautifier

Type: Array<string>
Source: plugins/source.ts
sourceEditorCDNUrlsJS

CDN URLs for ACE editor

Type: Array<string>
Source: plugins/source.ts
sourceEditorNativeOptions

Options for ace editor

Type: 
{
  highlightActiveLine: boolean,
  mode: string,
  showGutter: boolean,
  theme: string,
  wrap: string|boolean|number,
}
Source: plugins/source.ts
useAceEditor

Use ACE editor instead of usual textarea

Type: boolean
Source: plugins/source.ts

default

This class extends Component.

Plug-in change simple textarea on CodeMirror editor in Source code mode

Module

codeMirror
Source: plugins/source.ts
Constructor
constructor
Source: plugins/source.ts
Property
aceEditor
Type: Editor
Source: plugins/source.ts
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
mirror
Type: HTMLTextAreaElement
Source: plugins/source.ts
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: modules/Component.ts
setMirrorSelectionRange 
setMirrorSelectionRange(start: number, end: number): void
Source: plugins/source.ts

plugins/table

Source: plugins/table.ts

Config

Source: plugins/table.ts
Config
Source: plugins/table.ts
Property
useTableProcessor

Use module {@link TableProcessor|TableProcessor}

Type: boolean
Source: plugins/table.ts

TableProcessor

This class extends Component.
Source: plugins/table.ts
Constructor
constructor
Source: plugins/table.ts
Property
handlers
Type: handlers
Source: modules/Component.ts
jodit
Type: Jodit
Source: modules/Component.ts
Property{jodit}

parent
Method
___fire 
___fire(element: Document|Element|HTMLElement|Window, event: string|Event|MouseEvent, doc: Document): void
Source: modules/Component.ts
___off 
___off(element: false|Document|Element|HTMLElement|Window|Array, event: string|false): this
Source: modules/Component.ts
___on 
___on(element: Document|Element|HTMLElement|Window|Array<HTMLElement|Window>, event: string, selectorOrCallback: false|string|Function, callback: Function): this
Source: modules/Component.ts
destruct 
destruct(): void
Source: plugins/table.ts
observe 
observe(table: HTMLTableElement): void
Source: plugins/table.ts
isCell 
static isCell(tag: HTMLElement): boolean
Source: plugins/table.ts

plugins/tableKeyboardNavigation

Source: plugins/tableKeyboardNavigation.ts

default

default(editor: Jodit): void
Source: plugins/tableKeyboardNavigation.ts

polyfills

Source: polyfills.ts