Awesome
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:
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:
<link type="text/css" rel="stylesheet" href="es2015/jodit.min.css" />
<script type="text/javascript" src="es2015/jodit.min.js"></script>
ES2021 Version (for modern browsers only):
<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>
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.
<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.1/es2021/jodit.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.1/es2021/jodit.min.js"></script>
unpkg
<link
rel="stylesheet"
href="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.css"
/>
<script src="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.js"></script>
Usage
Add a textarea
element to your HTML:
<textarea id="editor" name="editor"></textarea>
Initialize Jodit on the textarea:
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
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: 'https://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.s.insertHTML(new Date().toDateString());
editor.synchronizeValues(); // For history saving
}
}
]
});
or
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
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
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'
}
}
});
Browser Support
- Internet Explorer 11
- Latest Chrome
- Latest Firefox
- Latest Safari
- Microsoft Edge
License
MIT