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