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
Download the latest release or via npm:
npm install joditYou 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,/es2021with.min.jsextension: 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 the following two files:
<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><script type="importmap">
{
"imports": {
"autobind-decorator": "https://unpkg.com/[email protected]/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/[email protected]/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><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><link
rel="stylesheet"
href="https://unpkg.com/[email protected]/es2021/jodit.min.css"
/>
<script src="https://unpkg.com/[email protected]/es2021/jodit.min.js"></script>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>';Jodit.plugins.yourplugin = function (editor) {
editor.events.on('afterInit', function () {
editor.s.insertHTMl('Text');
});
};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!!!');
}
}
}
});For testing FileBrowser and Uploader modules, need install PHP Connector
composer create-project --no-dev jodit/connectorRun 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'
}
}
});- Internet Explorer 11
- Latest Chrome
- Latest Firefox
- Latest Safari
- Microsoft Edge
MIT
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
