!Jodit WYSIWYG editor

Jodit Editor

Jodit Editor is an excellent WYSIWYG editor written in pure TypeScript
without the use of additional libraries. It includes a file editor and image editor.


- Demo and Official site
- PRO Version
- Builder
- Playground - Play with Options
- Documentation
- Download & Changes
- Changelog
- Examples
- TypeScript Starter

Get Started

How to Use

Download the latest release 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.

$3

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 and the English language.
You can manually include additional plugins and languages as needed.

`html


`

$3

#### cdnjs

`html
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.7.6/es2021/jodit.min.css"
/>

`

#### unpkg

`html
rel="stylesheet"
href="https://unpkg.com/jodit@4.7.6/es2021/jodit.min.css"
/>

`

$3

Add a textarea element to your HTML:

`html

`

Initialize Jodit on the textarea:

`javascript
const editor = Jodit.make('#editor');
editor.value = '

start

';
`

$3

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

$3

`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

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

Browser Support

- Internet Explorer 11
- Latest Chrome
- Latest Firefox
- Latest Safari
- Microsoft Edge

License

MIT