Jodit Editor

Pure-TypeScript WYSIWYG editor with a built-in file browser & image editor.

- [Builder](https://xdsoft.net/jodit/builder/) - [Playground - Play with Options](https://xdsoft.net/jodit/play.html) - [Documentation](https://xdsoft.net/jodit/docs/) - [Download & Changes](https://github.com/xdan/jodit/releases) - [Changelog](https://github.com/xdan/jodit/blob/main/CHANGELOG.md) - [Examples](https://xdan.github.io/jodit) - [TypeScript Starter](https://codesandbox.io/s/ggc6km) ## Get Started Download the latest [release](https://github.com/xdan/jodit/releases/latest) or via npm: ```sh npm install jodit ``` You will get the following files: - Inside `/esm`: ESM version of the editor (compatible with tools like webpack) - Inside `/es5`, `/es2015`, `/es2018`, `/es2021`: UMD bundled files (not minified) - Inside `/es5`, `/es2015`, `/es2018`, `/es2021` with `.min.js` extension: UMD bundled and minified files - `types/index.d.ts`: This file specifies the API of the editor. It is versioned, while everything else is considered private and may change with each release. ### Include Jodit in Your Project Include the following two files: #### ES5 Version: ```html ``` ES2021 Version (for modern browsers only): ```html ``` #### ESM Modules: ```html ``` The ESM modules automatically include only the [basic set of plugins](https://github.com/xdan/jodit/blob/main/tools/utils/resolve-alias-imports.ts#L59) and the English language. You can manually include additional plugins and languages as needed. ```html ``` ### Use a CDN #### cdnjs ```html ``` #### unpkg ```html ``` ### Usage Add a `textarea` element to your HTML: ```html ``` Initialize Jodit on the textarea: ```javascript const editor = Jodit.make('#editor'); editor.value = '

start

'; ``` ### Create plugin ```javascript Jodit.plugins.yourplugin = function (editor) { editor.events.on('afterInit', function () { editor.s.insertHTMl('Text'); }); }; ``` ### Add custom button ```javascript const editor = Jodit.make('.someselector', { extraButtons: [ { name: 'insertDate', iconURL: 'https://xdsoft.net/jodit/logo.png', exec: function (editor) { editor.s.insertHTML(new Date().toDateString()); editor.synchronizeValues(); // For history saving } } ] }); ``` or ```javascript const editor = Jodit.make('.someselector', { buttons: ['bold', 'insertDate'], controls: { insertDate: { name: 'insertDate', iconURL: 'https://xdsoft.net/jodit/logo.png', exec: function (editor) { editor.s.insertHTML(new Date().toDateString()); } } } }); ``` button with plugin ```javascript 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: 'https://xdsoft.net/jodit/logo.png', exec: function (editor) { editor.events.fire('someEvent', 'world!!!'); } } } }); ``` ## FileBrowser and Uploader For testing FileBrowser and Uploader modules, need install [PHP Connector](https://github.com/xdan/jodit-connectors) ```bash composer create-project --no-dev jodit/connector ``` Run test PHP server ```bash php -S localhost:8181 -t ./ ``` and set options for Jodit: ```javascript const editor = Jodit.make('#editor', { uploader: { url: 'http://localhost:8181/index-test.php?action=fileUpload' }, filebrowser: { ajax: { url: 'http://localhost:8181/index-test.php' } } }); ``` > **Using Jodit in a commercial product?** > Remove the "Powered by Jodit" mark and unlock 20+ premium plugins — Finder file manager, PDF & Word export, @mentions, AI Assistant and more. One-time license from $99. > > [**Compare plans →**](https://xdsoft.net/jodit/pro/) ## Browser Support - Internet Explorer 11 - Latest Chrome - Latest Firefox - Latest Safari - Microsoft Edge ## Star History

## License MIT