Jodit WYSIWYG Editor

Editor and FileBrowser - Jodit. Pure javascript. No libraries! Lightweight:~32kB gzipped.

Non-commercial free.

Download or Buy

<textarea id="editor" name="editor"></textarea> <script> var editor = new Jodit('#editor', { uploader: { url: '../connector/index.php?action=upload', process: function (resp) { resp.baseurl = '/jodit/files/'; return resp; } }, filebrowser: { ajax: { url: '../connector/index.php', process: function (resp) { resp.baseurl = '/jodit/files/'; return resp; }, } } }); </script>

Get Started

How use

Download last release or

INSTALL VIA BOWER

bower install jodit

INSTALL VIA NPM

npm install jodit

Include just two files

<link type="text/css" rel="stylesheet" href="jodit.min.css">
<script type="text/javascript" src="jodit.min.js"></script>

CDN

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/2.3.30/jodit.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/2.3.30/jodit.min.js"></script>

USAGE

And some <textarea> element

<textarea id="editor" name="editor"></textarea>

After this, you can init Jodit plugin

new Jodit('#editor');

Browser Support

Latest Chrome (desktop)
Latest Firefox (desktop only)
Latest Safari (desktop)
Latest Opera (webkit)
Internet Explorer 10
Microsoft Edge

Changelog

2.3.31

Added editorCssClass option - Class name that can be appended to the editor Fixed internacionalization

2.3.30

Added triggerChangeEvent option Fix uploader's options - When the uploader is not configured, the editor still displays images upload button

2.3.29

Add Dom.defaultAjaxOptions.async By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false

2.3.28

Added headers option in {@link module:FileBrowser|FileBrowser} and {@link module:Uploader|Uploader}. But primarily in {@link module:Dom|Dom}

var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    editor = new Jodit("#redactor", {
        uploader: {
            url: '../connector/index.php?action=upload',
            headers: {
                'X-CSRF-Token': token
            }
        },
        filebrowser: {
            ajax: {
                url: '../connector/index.php',
                headers: {
                    'X-CSRF-Token': token
                }
            }
        },
    });
// or replace global options
Jodit.modules.Dom.defaultAjaxOptions.headers = {
    headers: {
        'X-CSRF-Token': token
    }
};

Jodit.modules.Dom.ajax({
    url: 'data.json',
    headers: {
        'Accept-Language': 'en-US,en;q=0.8,ru;q=0.6,de;q=0.4,ja;q=0.2'
    },
    success: function (resp) {
        console.log(resp)
    }
})

2.3.27

Fixed #issues1

2.3.24

Fix dialog's module when was opened Promt window, after Enter submit the form and the page reloaded. Fix connector's bugs Update Jodit.i18n method. Now it can be used staticly

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 1$ Good 2$'
};
Jodit.defaultOptions.language = 'cs';
console.log(Jodit.prototype.i18n('Hello world', 'mr.Perkins', 'day')) //Hello mr.Perkins Good day

Fixed Jodit.destroy method

var editor = new Jodit('.jodit');
editor.destroy();

2.3.22

Fix bug when Dialog module was used without Jodit context

Jodit.Alert('Hello world!!!');

2.3.20

Fix dialog's module zIndex manage. Fix Dom.css method bug. That example has not worked.

Jodit.modules.Dom('.someelement').css('z-index', 1000)

2.3.19

Fix bug in Uploader module when http://sitename.net/jodit///files/fg.jpg was replaced http:/sitename.net/jodit/files/fg.jpg

2.3.18

Added afterInsertImage event - triggered after image was inserted selection.insertImage. This method can executed from Filebrowser or Uploader

var editor = new Jodit("#redactor");
editor.events.on('afterInsertImage', function (image) {
    image.className = 'bloghead4';    
});

2.3.15

Fix bug with inserting table

2.3.14

Work with table became faster

2.3.12

Fix filbrowser bug. When a new file is uploaded file list has not been updated
Added dialog.zIndex option

2.3.11

Fix toolbar width fot fullsize mode

2.3.10

Fix CodeMirror bug on download XML parser
Fix CodeMirror bug endless cycle
Fix overflow behavior in fullsize mode

2.3.8

Fix connector problem and fix item's style in filebrowser

2.3.3

Switched on FontAwesome icons

2.3.0

Added copy-paste image file for FireFox

2.2.6

Fix copy-paste for FireFox

2.2.5

Added copy-paste support by clipboard image. Try paste print screen.

2.2.4

Added the ability in the file browser to obtain data about the file not as a string and as an object with parameters {file: 'name.jpg', thumb: '_thumbs/name.jpg'}

2.2.3

Fix conflict between textProcessor and Beatyfier plugins

2.2.2

Fix BACKSPACE entering behavior. And fix ie10 support

2.2.0

Added iframe, iframeStyle, iframeIncludeJoditStyle, iframeCSSLinks, width, height, minHeight. iframe by default false. When this option is enabled, the editor's content will be placed in an iframe and isolated from the rest of the page. width and height you can set size fot editor

2.1.0

Added internationalization. Read more http://xdsoft.net/jodit/doc/Jodit.defaultOptions.html#.language

2.0.9

Added Split mode. Added useSplitMode options (default true) Example here

2.0.8

Fix dialog bug

2.0.4

Added CodeMirror plugin. Enable by default {@link defaultOptions~codeMirror.|options.codeMirror}

2.0.0

We got rid of jQuery

1.2.1

Fix bug in filebrowser

1.2.0

Fix bug when selection.insertHTML dosn't work without focus

1.1.0

Fix bug with uploader and filebrowser

1.0.6

If source textarea has placeholder attribute then Jodit use it how placeholder

1.0.4

Added About button

1.0.1

First release