Jodit Editor 3

An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.

• Demo and Official site
• Playground - play with options
• Documentation
• Download&Changes

For old version, please follow here https://github.com/xdan/jodit2

Get Started

How use

Download latest 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="build/jodit.min.css">
<script type="text/javascript" src="build/jodit.min.js"></script>

CDN

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

USAGE

And some <textarea> element

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

After this, you can init Jodit plugin

var editor = new Jodit('#editor');
editor.value = '<p>start</p>';

With jQuery

$('textarea').each(function () {
    var editor = new Jodit(this);
    editor.value = '<p>start</p>';
});

For contributors:

git clone https://github.com/xdan/jodit.git
cd jodit
npm install

Run webpack Hot Reload server:

npm start

Demo will be available here

http://localhost:2000/

Build min files:

npm run build

Run tests:

karma start --browsers ChromeHeadless,IE,Firefox karma.conf.js

or

npm test

or

yarn test

For checking tests in browser, open URL:

http://localhost:2000/test/test.html

For testing FileBrowser and Uploader modules, need install PHP Connector

composer create-project --no-dev jodit/connector

Run test PHP server

php -S localhost:8181 -t ./

and set options for Jodit:

var editor = new Jodit('#editor', {
    uploader: {
        url: 'http://localhost:8181/index-test.php?action=fileUpload'
    },
    filebrowser: {
        ajax: {
            url: 'http://localhost:8181/index-test.php'
        }
    }
});

Create plugin

Jodit.plugins.yourplugin = function (editor) {
    editor.events.on('afterInit', function () {
        editor.seleciotn.insertHTMl('Text');
    });
}

Add custom button

var editor = new Jodit('.someselector', {
    extraButtons: [
        {
            name: 'insertDate',
            iconURL: 'http://xdsoft.net/jodit/logo.png',
            exec: function (editor) {
                editor.selection.insertHTML((new Date).toDateString());
            }
        }
    ]
})

Browser Support

• Internet Explorer 9
• Latest Chrome
• Latest Firefox
• Latest Safari
• Microsoft Edge

Contributing

This project is maintained by a community of developers. Contributions are welcome and appreciated. You can find Jodit on GitHub; feel free to start an issue or create a pull requests: https://github.com/xdan/jodit

License

Licensed under GNU General Public License v2.0 or later