Namespace: defaultOptions

defaultOptions

Default Editor's Configuration

Options


autofocus

Name Type Default Description
autofocus boolean false true After loading the page into the editor once the focus is set

beautyHTML

Name Type Default Description
beautyHTML boolean true Beautify HTML code. Plugin Beautifier

buttons

Name Type Description
buttons array 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
buttonsMD array The list of buttons that appear in the editor's toolbar on medium places (≥ options.sizeMD).
buttonsSM array The list of buttons that appear in the editor's toolbar on small places (≥ options.sizeSM).
buttonsXS array The list of buttons that appear in the editor's toolbar on extra small places (< options.sizeSM).
buttons.button string | object Button. Clicking has the next priority popap, exec, list
icon string <optional>
If there 'temp' button, then the tag is of the form <a class="icon icon-temp">. Of the existing can be used: addcolumn, addrow, attachment, bin, bold, brush, cancel, check, source, eraser, folder, font, fullsize, image, indent-decrease, indent-increase, italic, link, ol, ul, list2, lock, menu, merge, hr, center, justify, left, right, pencil, paragraph, plus, redo, resize, shrink, splitg, splitv, strikethrough, table, fontsize, underline, undo, unlock, update, upload, valign
iconURL string <optional>
If you want to address , you can set a background image for the button . This icon should be 16 * 16 px
exec function <optional>
This function will be executed when the button is pressed . this it is the main instance Jodit
popap function <optional>
By pressing a button the window falls , the contents of which will be something that will return 'popap'
tooltip string <optional>
Description hover button
command string <optional>
The command to execute when the button is pressed. allowed all команды а также несколько нестандартных (см. execCommand)
tags array <optional>
Tag list when the cursor is to be highlighted on this button
list array | object <optional>
Drop-down list. A hash or array . You must specify the command which will be submitted to the hash key (array value) (see .execCommand) or define 'exec' function. See example
template function <optional>
The method that will be called for each element button.list
Default Value:
  • ['source', '|', 'bold', 'italic', '|', 'ul', 'ol', '|', 'font', 'fontsize', 'brush', 'paragraph', '|','image', 'video', 'table', 'link', '|', 'left', 'center', 'right', 'justify', '|', 'undo', 'redo', '|', 'hr', 'eraser', 'fullsize']
Examples
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);
            $(text)
                .css({
                    width: '100%',
                    height: '100%'
                })
                .val(div.innerHTML.replace(/<br>/g, '\n'));
            dialog.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: function (e, control, $btn) {
            var key = control.args[0],
               value = control.args[1];
            if (key === 'clear') {
                this.val('');
                return;
            }
            this.selection.insertNode(this.enterkey.createNewBlock(key));
            this.events.fire('errorPopap', ['Was inserted ' + value]);
       },
       template: function (key, value) {
           return '<div>' + value + '</div>';
       }
 });

cleanHTML

Name Type Description
cleanHTML object cleanHTML's options
cleanOnPaste boolean true clean pasted html
replaceNBSP boolean true Replace &nbsp; to plain space
allowTags boolean false The allowTags option defines which elements will remain in the edited text when the editor saves. You can use this to limit the returned HTML to a subset.
Examples
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.val('Sorry! <strong>Goodby</strong> <span>mr.</span> <a style="color:red" href="http://xsoft.net">Freeman</a>');
console.log(editor.val()); //Sorry! <a href="http://xsoft.net">Freeman</a>
var editor = Jodit('#editor', {
    allowTags: {
        p: true,
        a: {
            href: true
        },
        table: true,
        tr: true,
        td: true,
        img: {
            src: '1.png'
        }
    }
});

cleanWhitespace

Name Type Default Description
cleanWhitespace boolean true Remove all helpers symbols in document. textProcessor's options

codeMirror

Name Type Default Description
codeMirror boolean true Use codeMirror insted usual textarea. codeMirror's options

codeMirrorOptions

Name Type Default Description
codeMirrorOptions plainObject {...} Options for codeMiror

codeMirrorUrlCSS

Name Type Default Description
codeMirrorUrlCSS string //cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.min.css CSS CDN URL for codeMirror plugin

codeMirrorUrlJS

Name Type Default Description
codeMirrorUrlJS string //cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/codemirror.min.js CDN URL for codeMirror plugin

codeMirrorXMLUrl

Name Type Default Description
codeMirrorXMLUrl string //cdnjs.cloudflare.com/ajax/libs/codemirror/5.17.0/mode/xml/xml.min.js CDN URL for codeMirror plugin HTML mode

colorPickerDefaultTab

Name Type Default Description
colorPickerDefaultTab 'background' | 'color' 'background' The default tab color picker
Example
new Jodit('#editor2', {
    colorPickerDefaultTab: 'color'
})

colors

Name Type Description
colors array 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']
})

controls :Object

Behavior for buttons
Type:
  • Object

defaultMode

Name Type Default Description
efaultMode Jodit.MODE_WYSIWYG | Jodit.MODE_AREA | Jodit.MODE_SPLIT Jodit.MODE_SPLIT Jodit.MODE_WYSIWYG The HTML editor allows you to write like MSWord, Jodit.MODE_AREA syntax highlighting source editor
Example
var editor = new Jodit('#editor', {
    defaultMode: Jodit.MODE_SPLIT
});
console.log(editor.getRealMode())

dialog

Name Type Description
dialog object module settings Dialog
zIndex int 1000 Default Z-index for dialog window. Dialog's settings
resizable boolean true This dialog can resize by trigger
draggable boolean true This dialog can move by header
fullsize boolean false A dialog window will open in full screen by default
fullsizeButton boolean false In header will shown expand button

direction

Name Type Default Description
direction string '' The writing direction of the language which is used to create editor content. Allowed values are: '' (an empty string) – Indicates that content direction will be the same as either the editor UI direction or the page element direction. 'ltr' – Indicates a Left-To-Right text direction (like in English). 'rtl' – Indicates a Right-To-Left text direction (like in Arabic).
Example
new Jodit('.editor', {
   direction: 'rtl'   
})

editorCssClass

Name Type Default Description
editorCssClass string | false false Class name that can be appended to the editor
Since:
  • 2.3.31
See:
Example
<script>
new Jodit('#editor', {
   editorCssClass: 'some_my_class'  
});
</script>
<style>
.some_my_class p{
   line-height: 16px;
}
</style>

enableDragAndDropFileToEditor

Name Type Default Description
enableDragAndDropFileToEditor boolean true Enable drag and drop file to editor

enter

Name Type Default Description
enter Jodit.ENTER_P | Jodit.ENTER_DIV | Jodit.ENTER_BR Jodit.ENTER_P Element that will be created when you press Enter
See:

filebrowser

Name Type Description
filebrowser object module settings FileBrowser
howLongShowMsg int 3000 How long to show an error message in the status bar (ms)
sort boolean function (a, b, sortBy, parent) { return b.changed - a.changed;} Items sort functions
sortBy boolean 'changed' Sort by field
filter boolean function (item, searchWord) { return item.name.toLowerCase().indexOf(searchWord.toLowerCase()) !== -1} Filter items
showFileName boolean true Show filename in thumbs
showFileSize boolean true Show filesize in thumbs
showFileChangeTime boolean true Show the last modification time in thumbs
editImage boolean true use Image editor module - crop and resize image
preview boolean true Show preview button in context menu
showPreviewNavigation boolean true Show navigation buttons in preview
showSelectButtonInPreview boolean true Show select button in preview
contextMenu boolean true use context menu
createNewFolder boolean true The ability to create a directory of the web browser
deleteFolder boolean true The ability to delete directories from the web browser
moveFolder boolean true The ability to move directories from the web browser
moveFile boolean true The ability to move file from the web browser
showFoldersPanel boolean true Show folders panel
width px 763px The width of the web browser
height px 400px The height of the file browser
buttons array "['upload', 'remove', 'update', 'select', 'edit', 'tiles', 'list']" Toolbar browser
isSuccess function method to check - whether the response positive
getMsg function method for receiving a message from the response
view string 'tiles' Filelist view - `tiles` or `list`
ajax object The default settings for AJAX connections to the server. Most of the settings like here jQuery.ajax but is not jQuery.ajax
prepareData function Method of preparation of data to be sent to the server
process function 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} };`
url string '' Address entry point on the server for AJAX connection
data object {} Default data to send to the server
dataType json | text 'json' The format of the returned data
headers PlainObject {} An object of additional header key/value pairs to 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.
resize object Settings for AJAX connections to the server to resize image. By default, the uses filebrowser.ajax c параметром action=create
crop object Settings for AJAX connections to the server to crop image. By default, the uses filebrowser.ajax c параметром action=create
create object Settings for AJAX connections to the server to create the category . By default, the uses filebrowser.ajax c параметром action=create
move object Settings for AJAX connections to the server for the moving image or category . By default uses filebrowser.ajax c параметром action=move
remove object Settings for AJAX connections to the server to delete the image or category . By default uses filebrowser.ajax c параметром action=remove
folder object Settings for AJAX connections to the server to download the list of categories . By default uses filebrowser.ajax c параметром action=folder
items object Settings for AJAX connections to the server to download the image list in the specified category . By default uses filebrowser.ajax c параметром action=items
uploader object null Settings Module Uploader for fast uploading images in category via Drag&Drop file in the file browser. The default settings of the module Uploader
Examples
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();
            },
       }],
   }   
})
new Jodit('#editor', {
    filebrowser: {
         isSuccess: function (resp) {
             return resp.status == 1;
         },
         getMsg: function (resp) {
             return resp.message;
         },
    }   
})
// default values
{
    isSuccess: function (resp) {
        return !resp.error;
    },
    getMsg: function (resp) {
        return resp.msg;
    },
    ajax: {
        url: '',
        async: true,
        beforeSend: function () {
            return 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;
            },
            getMsg: 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',
           }
       }
   });

fullsize

Name Type Default Description
fullsize boolean false true Editor to open to full screen
globalFullsize boolean true if true, after `fullsize` - all parents element get jodit_fullsize_box class (z-index: 100000 !important;)
Examples
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   

height

Name Type Default Description
height string | int 'auto' Editor's height
Examples
new Jodit('.editor', {
   height: '100%',   
})
new Jodit('.editor', {
   height: 600, // equivalent for '600px'
})
new Jodit('.editor', {
   height: 'auto', // autosize   
})

i18n

Name Type Default Description
i18n PlainObject Jodit.lang Collection of language pack data {en: {'Type something': 'Type something', ...}}
Example
var editor = new Jodit('#editor', {
    language: 'ru',
    i18n: {
        ru: {
           'Type something': 'Начните что-либо вводить'
        }
    }   
});
console.log(editor.i18n('Type something')) //Начните что-либо вводить

iframe

Name Type Default Description
iframe boolean false When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page.
Example
new Jodit('#editor', {
   iframe: true,
   iframeStyle: 'html{margin: 0px;}body{padding:10px;background:transparent;color:#000;position:relative;z-index: 2;user-select:auto;margin:0px;overflow:hidden;}body:after{content:"";clear:both;display:block}',
})

iframeBaseUrl

Name Type Default Description
iframeBaseUrl boolean | string false Base URL where the root directory for iframe mode
Example
new Jodit('#editor', {
   iframe: true,
   iframeBaseUrl: 'http://xdsoft.net/jodit/docs/',
})

Name Type Default Description
iframeCSSLinks array '[]' Custom stylesheet files to be used inside the iframe to display content.
Example
new Jodit('#editor', {
   iframe: true,
   iframeCSSLinks: ['styles/default.css'],
})

iframeIncludeJoditStyle

Name Type Default Description
iframeIncludeJoditStyle string true Include jodit.min.css in iframe document
Deprecated:
  • since version 2.3.31

iframeStyle

Name Type Default Description
iframeStyle string 'html{margin: 0px;}body{padding:10px;background:transparent;color:#000;position:relative;z-index: 2;user-select:auto;margin:0px;overflow:auto;}body:after{content:"";clear:both;display:block}table{width:100%;border-collapse:collapse} th,td{border:1px solid #ccc;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}p{margin-top:0;}' Custom style to be used inside the iframe to display content.
Example
new Jodit('#editor', {
   iframe: true,
   iframeStyle: 'html{margin: 0px;}',
})

image

Name Type Description
image object Plugin Image's options
openOnDblClick boolean true Open editing dialog after double click on image
editSrc boolean true Show edit 'src' input
useImageEditor boolean true Show crop/resize btn
editTitle boolean true Show edit 'title' input
editAlt boolean true Show edit 'alt' input
editLink boolean true Show edit image link's options
editSize boolean true Show edit image size's inputs
editMargins boolean true Show edit margin inputs
editStyle boolean true Show style edit input
editClass boolean true Show edit classNames input
editId boolean true Show edit ID input
editAlign boolean true Show Alignment selector
showPreview boolean true Show preview image
selectimageAfterClose boolean true Select image after close dialog
Example
var editor = new Jodit('#editor', {
    image: {
        editSrc: false,
        editLink: false
    }
});      

imageDefaultWidth

Name Type Default Description
imageDefaultWidth int 300 Image size defaults to a larger image

imageprocessor

Name Type Description
imageprocessor object module Settings ImageProcessor

language

Name Type Default Description
language string en Language by default
Example
// include in you page lang file
<script src="jodit/lang/de.js"></script>
<script>
vae editor = new Jodit('.editor', {
   language: 'de'   
});
</script>

Name Type Description
link object `link` plugin's options
processVideoLink boolean true Replace inserted youtube/vimeo link to `iframe`
processPastedLink boolean true Wrap inserted link in <a href="link">link</a>
openLinkDialogAfterPost boolean true Open Link dialog after post
removeLinkAfterFormat boolean true When the button is pressed to clean format, if it was done on the link is removed like command `unlink`

minHeight

Name Type Default Description
height string | int 100 Editor's min-height
Examples
new Jodit('.editor', {
   minHeight: '30%' //min-height: 30%
})
new Jodit('.editor', {
   minHeight: 200 //min-height: 200px
})

observer

Name Type Description
observer object module settings Observer
subtree boolean true Whether for a tree change objects
childList boolean true Whether the changes in the child objects
characterData boolean true Whether the changes in the text attribute data
attributes boolean true Whether for attribute changes

offsetTopForAssix

Name Type Default Description
offsetTopForAssix int 0 For example, in Joomla, the top menu bar closes Jodit toolbar when scrolling. Therefore, it is necessary to move the toolbar Jodit by this amount [more](http://xdsoft.net/jodit/doc/#2.5.57)
Since:
  • 2.4.57

popap

Name Type Description
popap object module Settings Popap
img array List of buttons to the toolbar pop-up window in the image
table array List of buttons to the toolbar pop-up window at the tables
Example
new Jodit('#editor', {
    popap: {
        img: [
            {name: 'bin'},
            {
                 name: 'pencil',
                 exec: function (image) {
                     if (Jodit.plugins.image.open) {
                         Jodit.plugins.image.open.call(image);
                     }
                 }
             }
        ],
        table: [
             'splitv',
             'splitg', "\n",
             'merge', "|",
             {
                 name: 'bin',
                 list: {
                     'bin': 'Delete table',
                     'binrow': 'Delete row',
                     'bincolumn': 'Delete column',
                     'empty': 'Empty cell'
                 }
             }
        ]
    }
});

removeButtons

Name Type Description
removeButtons array Do not display those buttons that are on the list
Example
new Jodit('#editor2', {
    removeButtons: ['hr', 'source']
});

removeEmptyBlocks

Name Type Default Description
removeEmptyBlocks boolean true Remove empty blocks
Since:
  • 2.3.47
Example
var editor = new Jodit('#editor', {
   removeEmptyBlocks: false
});
editor.val(' ');// add space in editor
console.log(editor.val()); //<p>&nbsp;</p>

editor.options.removeEmptyBlocks = true;
editor.val(' ');
console.log(editor.val()); //''

removeEmptyNodes

Name Type Default Description
removeEmptyNodes boolean true Remove empty text nodes. textProcessor's options

resizer

Name Type Description
resizer object module Settings Resizer
min_width int 10 The minimum width for the editable element
min_height int 10 The minimum height for the item being edited

saveModeInCookie

Name Type Default Description
saveModeInCookie boolean false if it is true that the current mode is saved in a cookie , and is restored after a reload of the page
Since:
  • 2.3.59

showPopapErrorOffsetPx

Name Type Default Description
showPopapErrorOffsetPx int 3 Offset fo message

showPopapErrors

Name Type Default Description
showPopapErrors boolean true Use plugin ErrorPopaps

showPopapErrorTime

Name Type Default Description
showPopapErrorTime int 3000 How long show messages

sizeLG

Name Type Default Description
sizeLG int 900 The width of the editor, accepted as the biggest. Used to the responsive version of the editor
Since:
  • 2.5.49

sizeMD

Name Type Default Description
sizeMD int 700 The width of the editor, accepted as the medium. Used to the responsive version of the editor
Since:
  • 2.5.49

sizeSM

Name Type Default Description
sizeSM int 700 The width of the editor, accepted as the small. Used to the responsive version of the editor
Since:
  • 2.5.49

spellcheck

Name Type Default Description
spellcheck boolean true options specifies whether the editor is to have its spelling and grammar checked or not
Since:
  • 2.3.48
See:

syncCodeTimeout

Name Type Default Description
syncCodeTimeout int 30 timeout synchronize data between the editor , source element and source code editor
Since:
  • 2.4.16

tabIndex

Name Type Default Description
tabIndex int -1 The tabindex global attribute is an integer indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation, and if so, at what position. It can take several values

tableprocessor

Name Type Description
tableprocessor Object module Settings TableProcessor
accuracy int 10 The accuracy to which you want to bring floats . For example, the column width
resizerOffset int 20 The module TableProcessor when you hover on the boundary of the cell will show resize cursor . How far from the border to show the cursor

textIcons

Name Type Default Description
textIcons boolean false Use text instead of icons. In IE9 it is default - true
Example
var editor = new Jodit('#editor', {
   textIcons: true    
});

theme

Name Type Default Description
theme string default Theme (can be "dark")
Since:
  • 2.4.2
Example
var editor  = new  Jodit(".dark_editor", {
     theme: "dark"   
});

toolbar

Name Type Default Description
toolbar boolean true true Show toolbar

toolbarButtonSize

Name Type Default Description
toolbarButtonSize string middle Size of icons in the toolbar (can be "small", "middle", "large")
Since:
  • 2.4.12
Example
var editor  = new  Jodit(".dark_editor", {
     toolbarButtonSize: "small"   
});

triggerChangeEvent

Name Type Default Description
triggerChangeEvent boolean true After all changes in editors for textarea will call change trigger
Since:
  • 2.3.30
Example
new Jodit('#editor');
document.getElementById('editor').addEventListener('change', function () {
     console.log(this.value);   
})

uploader

Name Type Description
uploader object Uploader's settings
url string Point of entry for file uploader
format string 'json' The format of the received data
headers string null An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport. See Dom.defaultAjaxOptions
filesVariableName string 'files' Name for request variable. This name very important for server side. if filesVariableName='images' you need expect $_FILES['images']
pathVariableName string 'path' Name for request variable. This variable will content relative path for uploading image
prepareData function Before send file will called this function. First argument it gets [new FormData ()](https://developer.mozilla.org/en/docs/Web/API/FormData), you can use this if you want add some POST parameter.
data plainobject | false false POST parameters.
isSuccess function Check if received data was positive
getMsg function If you need display a message use this
process function The method of processing data received from the server. Must return this PlainObject format `{ { files: resp.files || [], // {array} The names of uploaded files. Field name uploader.filesVariableName path: resp.path, // {string} Real relative path baseurl: resp.baseurl, // {string} Base url for filebrowser error: resp.error, // {int} msg: resp.msg // {string} };`
error function Process negative situation. For example file wasn't uploaded because of file permoission
defaultHandlerSuccess function Default success result processor. In first param it get `uploader.process` result
defaultHandlerError function Default error result processor
Tutorials:
Examples
new Jodit('#editor', {
     uploader: {
         prepareData: function (formdata) {
             formdata.append('id', 24); // $_POST['id'] on server
             formdata.append('name', 'Some parameter');  // $_POST['name'] on server
         }
     }
});
new Jodit('#editor', {
    uploader: {
        url: 'connector/index.php?action=upload',
        format: 'json',
        headers: {
            'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        pathVariableName: 'path',
        filesVariableName: 'files',
        prepareData: function (data) {
            data.append('id', 24); // 
        },
        data: {
             csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
        isSuccess: function (resp) {
            return !resp.error;
        },
        getMsg: function (resp) {
            return resp.msg;
        },
        process: function (resp) {
             return {
                 files: resp[this.options.uploader.filesVariableName] || [],
                 path: resp.path,
                 baseurl: resp.baseurl,
                 error: resp.error,
                 msg: resp.msg
             };
        },
       defaultHandlerSuccess: function (data, resp) {
           var i, field = this.options.uploader.filesVariableName;
           if (data[field] && data[field].length) {
               for (i = 0; i < data[field].length; i += 1) {
                   this.selection.insertImage(data.baseurl + data[field][i]);
               }
           }
        },
        error: function (e) {
            this.events.fire('errorPopap', [e.getMessage(), 'error', 4000])
        }
    }
})

useIframeResizer

Name Type Default Description
useIframeResizer boolean true Use true frame for editing iframe size. Uses in Resizer module

useImageProcessor

Name Type Default Description
useImageProcessor boolean true true Use module ImageProcessor

useImageResizer

Name Type Default Description
useImageResizer boolean true Use true image editing frame size. Uses in Resizer module

useSplitMode

Name Type Default Description
useSplitMode boolean false Use in Jodit.toggleMode Jodit.MODE_SPLIT mode

useTableProcessor

Name Type Default Description
useTableProcessor boolean true true Use module TableProcessor

useTableResizer

Name Type Default Description
useTableResizer boolean true Use true frame for editing table size. Uses in Resizer module

width

Name Type Default Description
width string | int 'auto' Editor's width
Examples
new Jodit('.editor', {
   width: '100%',   
})
new Jodit('.editor', {
   width: 600, // equivalent for '600px'
})
new Jodit('.editor', {
   width: 'auto', // autosize   
})

wrapSingleTextNodes

Name Type Default Description
wrapSingleTextNodes boolean true Wrap single text nodes in paragraph. textProcessor's options

zIndex

Name Type Default Description
zIndex int 0 zindex For editor
Since:
  • 2.5.61