Jodit WYSIWYG editor

Jodit Editor 3

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

Build Status npm version npm

Get Started

How use

Download the latest release or

INSTALL VIA NPM

npm install jodit

You will get:

  • inside /esm: ESM version of the editor (compatible with e.g. webpack)
  • inside /(es5|es2015|es2018|es2021)/*.js: UMD bundled, not minified
  • inside /(es5|es2015|es2018|es2021)/*.min.js: UMD bundled, and minified
  • types/index.d.ts: this specifies the API of the editor (this is what is actually versioned, everything else is considered private and might break with any release).

Include just two files

ES5 Version

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

es2021 Version (if your users use only modern browsers)

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

esm modules

<script type="importmap">
  {
    "imports": {
      "autobind-decorator": "https://unpkg.com/autobind-decorator@2.4.0/lib/esm/index.js"
    }
  }
</script>
<link rel="stylesheet" href="./node_modules/jodit/es2021/jodit.min.css"/>
<script type="module">
  import {Jodit} from "./node_modules/jodit/esm/index.js"
  Jodit.make('#editor', {
    width: 600,
    height: 400,
  });
</script>

ESM automatically connects only the basic set of plugins and only English. You can connect the necessary plugins and languages yourself:

<script type="importmap">
  {
    "imports": {
      "autobind-decorator": "https://unpkg.com/autobind-decorator@2.4.0/lib/esm/index.js"
    }
  }
</script>
<link rel="stylesheet" href="./node_modules/jodit/es2021/jodit.min.css"/>
<script type="module">
  import {Jodit} from "./node_modules/jodit/esm/index.js"
  import "./node_modules/jodit/esm/plugins/add-new-line/add-new-line.js"
  import "./node_modules/jodit/esm/plugins/fullsize/fullsize.js"
  import de from "./node_modules/jodit/esm/langs/de.js"

  Jodit.langs.de = de;

  Jodit.make('#editor', {
    width: 600,
    height: 400,
    language: 'de'
  });
</script>

Use a CDN

cdnjs

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.24/es2021/jodit.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.0-beta.24/es2021/jodit.min.js"></script>

unpkg

<link
    rel="stylesheet"
    href="https://unpkg.com/jodit@4.0.0-beta.24/es2021/jodit.min.css"
/>
<script src="https://unpkg.com/jodit@4.0.0-beta.24/es2021/jodit.min.js"></script>

USAGE

And some <textarea> element

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

After this, you can init Jodit plugin

const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';

with jQuery

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

For contributors:

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

Run webpack Hot Reload server:

npm start

Demo will be available here

http://localhost:2000/

Build min files:

make build

Build without some plugins:

make build es=es2021 uglify=true excludePlugins="about,source,bold,image,xpath,stat,class-span,color,clean-html,file,focus,enter,backspace,media,preview,pint,redo-undo,resize-cells,search,spellcheck,table"

Build without some languages:

make build es=es2021 uglify=true excludeLanguages="ru,ar,cs_cz,de,es,fa,fr,he,hu,id,it,ja,ko,nl,pl,pt_br,ru,tr,zh_cn,zh_tw"

Run tests:

make test browsers ChromeHeadless,IE,Firefox

or

make test

or

npm 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:

const editor = Jodit.make('#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.s.insertHTMl('Text');
    });
};

Add custom button

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

or

const editor = Jodit.make('.someselector', {
    buttons: ['bold', 'insertDate'],
    controls: {
        insertDate: {
            name: 'insertDate',
            iconURL: 'http://xdsoft.net/jodit/logo.png',
            exec: function (editor) {
                editor.s.insertHTML(new Date().toDateString());
            }
        }
    }
});

button with plugin

Jodit.plugins.add('insertText', function (editor) {
    editor.events.on('someEvent', function (text) {
        editor.s.insertHTMl('Hello ' + text);
    });
});

// or

Jodit.plugins.add('textLength', {
    init(editor) {
        const div = editor.create.div('jodit_div');
        editor.container.appendChild(div);
        editor.events.on('change.textLength', () => {
            div.innerText = editor.value.length;
        });
    },
    destruct(editor) {
        editor.events.off('change.textLength');
    }
});

// or use class

Jodit.plugins.add(
    'textLength',
    class textLength {
        init(editor) {
            const div = editor.create.div('jodit_div');
            editor.container.appendChild(div);
            editor.events.on('change.textLength', () => {
                div.innerText = editor.value.length;
            });
        }
        destruct(editor) {
            editor.events.off('change.textLength');
        }
    }
);

const editor = Jodit.make('.someselector', {
    buttons: ['bold', 'insertText'],
    controls: {
        insertText: {
            iconURL: 'http://xdsoft.net/jodit/logo.png',
            exec: function (editor) {
                editor.events.fire('someEvent', 'world!!!');
            }
        }
    }
});

Browser Support

  • Internet Explorer 11
  • 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

MIT

Jodit PRO

If you like Jodit - try Jodit PRO

On This Page