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

Read more

you can here

• Jodit Joomla editor
• Jodit Yii2

Download last release or

bower install jodit

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>

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

And some <textarea> element

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

After this, you can init Jodit plugin

new Jodit('#editor');

npm install
npm run build

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

Added zIndex option

var editor = new Jodir('.editor', {
    zIndex: 10000
})

• Fix table editor in iframe mode
• Fix styles

• Added useIframeResizer option for resize IFRAME tag
• Added offsetTopForAssix option. 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

var editor = new Jodit('#editor', {
    offsetTopForAssix: 74
});

Without affix offset With affix offset

Added Embed video button. Added vimeo or youtube video embeded code.

When you insert text into the editor from another site, all the images are from a remote site. Before Jodit, it was quite uncomfortable: first I had to download the image from a remote resource, and then upload it to your site, then replace the image in the editor. In 2.5.54 it can be done in 3 clicks

Note. Need update PHP Connector

Added Jodit.focus method

var editor = new Jodit('.redactor');
editor.focus();

Added OK button in Alert dialog

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();   
});

Jodit.Promt("Enter your name", function (name) {
    if (name.length < 3) {
        Jodit.Alert("The name must be at least 3 letters");
        return false;
    }
    // do something
});
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
});

Jodit.Confirm("Are you shure?", function (yes) {
    if (yes) {
        // do something
    }
});

First step for Mobile friendly sizeLG,sizeMD,sizeSM and sets of buttons for different sizes editors.

Note. this is not the width of the device, the width of the editor

• buttons The list of buttons that appear in the editor's toolbar on large places (≥ options.sizeLG).
• buttonsMD The list of buttons that appear in the editor's toolbar on medium places (≥ options.sizeMD).
• buttonsSM The list of buttons that appear in the editor's toolbar on small places (≥ options.sizeSM).
• buttonsXS The list of buttons that appear in the editor's toolbar on extra small places (< options.sizeSM).

var editor = new Jodit('#some-editor', {
    sizeLG: 900,
    sizeMD: 700,
    sizeSM: 400,

    buttons: [
        'source', '|',
        'bold',
        'italic', '|',
        'ul',
        'ol', '|',
        'font',
        'fontsize',
        'brush',
        'paragraph', '|',
        'image',
        'table',
        'link', '|',
        'left',
        'center',
        'right',
        'justify', '|',
        'undo', 'redo', '|',
        'hr',
        'eraser',
        'fullsize',
        'about'
    ],
    buttonsMD: [
        'source', '|',
        'bold',
        'italic', '|',
        'ul',
        'ol', '|',
        'font',
        'fontsize',
        'brush',
        'paragraph', '|',
        'image',
        'table',
        'link', '|',
        'left',
        'center',
        'right',
        'justify', '|',
        'undo', 'redo', '|',
        'hr',
        'eraser',
        'fullsize'
    ],
    buttonsSM: [
        'bold',
        'italic', '|',
        'ul',
        'ol', '|',
        'fontsize',
        'brush',
        'paragraph', '|',
        'image',
        'table',
        'link', '|',
        'left',
        'center',
        'right', '|',
        'undo', 'redo', '|',
        'eraser',
        'fullsize'
    ],
    buttonsXS: [
        'bold',
        'image', '|',
        'brush',
        'paragraph', '|',
        'left',
        'center',
        'right', '|',
        'undo', 'redo', '|',
        'eraser'
    ],
});

• More comfortable colorpicker

• Added Helper.normalizeColor
• Fixed Helper.colorToHex now for transparent color it will return NaN

• Fixed bug in Image Resizer when border was less than Image
• Rename Selection.setCursorTo to Selection.moveCursorTo
• Fixed style for Dialog resizer

Fix a few bugs in JJE

• In Helper module added [isHTML] method. Used plugin insertHTML
• Added simple plugin insertHTML and him option askBeforePasteHTML - Ask before paste HTML in WYSIWYG mode. Try insert in WYSIWYG mode some HTML source

(function ($) {
    "use strict";
    Jodit.defaultOptions = $.extend(true, Jodit.defaultOptions, {
        /**
         * @property {boolean} askBeforePasteHTML=true Ask before paste HTML in WYSIWYG mode
         */
        askBeforePasteHTML: true
    });

    /**
     * Ask before paste HTML source
     *
     * @module insertHTML
     */
    Jodit.plugins.insertHTML = function (parent) {
        if (parent.options.askBeforePasteHTML) {
            parent.events.on('beforePaste', function (event) {
                if (event && event.clipboardData && event.clipboardData.getData && event.clipboardData.types[0] === 'text/plain') {
                    var html = event.clipboardData.getData('text/plain');
                    if (parent.helper.isHTML(html)) {
                        Jodit.Confirm('Your code is similar to HTML. Paste as HTML?', 'Paste as HTML', function (agree) {
                            if (agree) {
                                parent.selection.insertHTML(html);
                            } else {
                                parent.selection.insertHTML(parent.helper.htmlspecialchars(html));
                            }
                            parent.syncCode(true);
                        });
                        return false;
                    }
                }
            });
        }
    };
}(Jodit.modules.Dom));

Fix #issue 11 in file: mode CDN CodeMirror not working

• Added Filter in FileBrowser
• Added SortBy in FileBrowser

• Fixed bug in Beautifier plugin. When in source mode, start comment enter <!-- Browser stops responding.
• Added tiles and list switcher in filebrowser

• In PHP FileBrowser connector added MaxFileSize option
• Fixed popap error in filebrowser

Fix Splitmode autohaight Fix syncronize code in TableProcessor module

Fix bug in Dialog.Confirm

Jodit.Confirm("Are you shure?", "Confirm", function (success) {
    if (success) {
        alert("Agree");
    }
});

• Fixed IE11's bug http://xdsoft.net/jodit/doc/module-Jodit.html#comment-2866837441
• Added textIcons options - Use text instead of icons. In IE9 it is default - true Example

var editor = new Jodit("#example2_0", {
    textIcons: true,
    removeButtons: [
        "hr",
        "ol",
        "about",
        "italic",
        "format",
        "fullsize",
        "justify"
    ]
});

Dom Module is now compatible with jQuery objects

var a = jQuery("<a href="#link">Link</a>");
jodit.modules.Dom('.selector').append(a);
jodit.modules.Dom(jQuery("#someid")).val();
jodit.modules.Dom("#someid").val();

But you must remember that Jodit.modules.Dom! = JQuery

• Added expand button In filebrowser
• Added fullsize and fullsizeButton options

• Fix Dom.prev method
• Added navigation and select in preview
• Added showSelectButtonInPreview and showPreviewNavigation

Added cleanHTML.allowTags option.

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>

Or you can use PlainObject. This code equivalent to the top

var editor = Jodit('#editor', {
    allowTags: {
        p: true,
        a: {
            href: true
        },
        table: true,
        tr: true,
        td: true,
        img: {
            src: '1.png'
        }
    }
});

Fixed bug in Image plugin

Fixed bug in JJE

• Fixed a few styles

• Fixed package.json

• Added in FileBrowser sort options
• Jodit.Promt and Jodit.Alert by default set focus to OK button

Jodit.Promt('Enter your name', function (name) {
    if (!name.length) {
        Jodit.Alert('You need enter 3 chars');
        return false;
    }
    //... some logic
});

• Fix $config bug in JJE
• Added a few options in JJE plugin

Added edit button in Image Properties Dialog

• Added file info in filebrowser
• Added showFileName,showFileSize,showFileChangeTime

• Dom module was rewrited and was fixed afew bugs
• In OEM and Pro added Image Editor module resize and crop image. You can try here

• Added contextmenu module.
• Added context menu in FileBrowser
• Added preview in FilwBrowser

• Fixed TableProcessor's bugs. In a situation did not appear resizer cells and the resizer throughout the table.

• Fixed z-index Popap
• Fixed behavior of selection table cells

Fixed copy-paste html behavior

Fixed bug on after type Enter

Fixed bug with insert OL tag and Fixed Dom module work with Text node

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

var editor  = new  Jodit("#editor", {
    toolbarButtonSize: "small"   
});

• Added node.create method

var editor = new Jodit('.jodit'),
    node = editor.node.create('text', 'Hellow world');
editor.selection.insertNode(node);

• Added link plugin. And its options
  • processPastedLink Wrap inserted link in <a href="link">link</a>
  • openLinkDialogAfterPost Open Link dialog after post
  • removeLinkAfterFormat When the button is pressed to clean format, if it was done on the link is removed like command unlink
• Replace format icon

Fixed Base icons issue

Fast Fixed in JJE Fixed a lot of bugs in Jodit

• Fixed a lot of bugs in Dom module
• Fixed a lot of bugs in TableProcessor module
• Replace PNG icon on SVG sprite
• Added new module Icons
• Added theme Dark
• Fixed bug Popap's module
• Divide one less file by modules

• Added Cookie module
• Added saveModeInCookie if it is true that the current mode is saved in a cookie , and is restored after a reload of the page
• In Joomla Jodit Editor(JJE) added corresponding option saveModeInCookie Download Jodit Joomla editor

• Fixed issue with input[type=checkbox] and Dom.attr method
• Release Joomla Jodit Editor (JJE) Download JJE

• Added option cleanHTML.cleanOnPaste The plugin cleanHTML 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.
• Added beforePaste,processPaste,afterPaste events

Added iframeBaseUrl option - Base URL where the root directory for iframe mode

Added spellcheck option specifies whether the editor is to have its spelling and grammar checked or not

Added removeEmptyBlocks option - Remove empty blocks

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()); //''

• Fixed critical bug in Safari (window.performance)
• Fixed bug when editor can get selection from another place

Added direction option. 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).

Fixed styles bugs

When filebrowser.showFoldersPanel === false show 4 colums in filelist

• Added filebrowser.moveFolder option. Allow/deny move folder
• Added filebrowser.moveFile option. Allow/deny move file
• Added filebrowser.showFoldersPanel option. Hide/show folders panel in filebrowser

Fixed Filebrowser uploader's options bug. Previously , you had to either use a general Uploader module settings , or override them completely

var editor = new Jodit('.redactor', {
    filebrowser: {
        uploader: null
    },
    uploader: {
        url: 'uploader.php',
        format: 'json',
    }
});

// or
var editor = new Jodit('.redactor', {
    filebrowser: {
        uploader:  {
            url: 'uploader.php',
            format: 'json',
            filesVariableName: 'fils',
            //... all options from [uploader](http://xdsoft.net/jodit/doc/Jodit.defaultOptions.html#uploader)
        }
    }
});

Now you can just override some of your settings

var editor = new Jodit('.redactor', {
    filebrowser: {
        uploader: {
            url: 'uploader2.php',
        }
    },
    uploader: {
        url: 'uploader.php',
    }
});

• Fixed i18n bug
• useSplitMode set default false
• Fixed toolbar width after fullsize mode
• Fixed #issue5

Fast fix

• Added plugin Fullsize. Now you can change fullsize mode

var editor = new Jodit();
editor.events.fire('toggleFullsize');
editor.events.fire('toggleFullsize', [true]); // fullsize
editor.events.fire('toggleFullsize', [false]); // usual mode

• Added globalFullsize (default true) if true, after fullsize - all parents element get jodit_fullsize_box class (z-index: 100000 !important;)
• Fixed focus bug

• Fixed placeholder style
• Fixed Dom.css then

<div class="idclass" style="margin-top:20px;"></div>

Jodit.modules.Dom('.idclass').css('margin-top');//has returned string `20px` 
Jodit.modules.Dom('.idclass').css('margin-top');//now it returns int `20` 

• Fixed placeholder style. Placeholder placed in a separate module Placeholder
• Added showPlaceholder option
• Added useInputsPlaceholder option
• Added placeholder option

Added uploader.data option. Data to be sent to the server like POST parameters

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

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

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

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)
    }
})

Fixed #issues1

Fixed dialog's module when was opened Promt window, after Enter submit the form and the page reloaded. Fixed 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();

Fixed bug when Dialog module was used without Jodit context

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

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

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

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

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';    
});

Fixed bug with inserting table

Work with table became faster

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

Fixed toolbar width fot fullsize mode

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

Fixed connector problem and Fixed item's style in filebrowser

Switched on FontAwesome icons

Added copy-paste image file for FireFox

Fixed copy-paste for FireFox

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

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'}

Fixed conflict between textProcessor and Beatyfier plugins

Fixed BACKSPACE entering behavior. And Fixed ie10 support

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

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

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

Fixed dialog bug

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

We got rid of jQuery

Fixed bug in filebrowser

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

Fixed bug with uploader and filebrowser

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

Added About button

First release

• Download
• Options
• How to create module for Jodit Editor
• Uploader options and Drag and Drop files
• Filebrowser
• ElFinder Integrate
• Group