Jodit Editor 3
An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.
- Demo and Official site
- Playground - play with options
- Documentation
- Download&Changes
- Changelog
- Examples
For old version, please follow here https://github.com/xdan/jodit2
Get Started
How use
Download latest release or
INSTALL VIA NPM
npm install jodit
or
yarn add jodit
Include just two files
ES5 Version
<link type="text/css" rel="stylesheet" href="build/jodit.min.css"/>
<script type="text/javascript" src="build/jodit.min.js"></script>
ES2018 Version (if your users use only modern browsers)
<link type="text/css" rel="stylesheet" href="build/jodit.es2018.min.css"/>
<script type="text/javascript" src="build/jodit.es2018.min.js"></script>
CDN
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.3.1/jodit.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.3.1/jodit.min.js"></script>
USAGE
And some <textarea>
element
<textarea id="editor" name="editor"></textarea>
After this, you can init Jodit plugin
var editor = new Jodit('#editor');
editor.value = '<p>start</p>';
or
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
With jQuery
$('textarea').each(function () {
var editor = new Jodit(this);
editor.value = '<p>start</p>';
});
For contributors:
git clone https://github.com/xdan/jodit.git
cd jodit
npm install
Run webpack Hot Reload server:
npm start
Demo will be available here
http://localhost:2000/
Build min files:
npm run build
Run tests:
karma start --browsers ChromeHeadless,IE,Firefox karma.conf.js
or
npm test
or
yarn 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:
var editor = new Jodit('#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
var editor = new Jodit('.someselector', {
extraButtons: [
{
name: 'insertDate',
iconURL: 'http://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.s.insertHTML((new Date).toDateString());
}
}
]
})
or
var editor = new Jodit('.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')
}
});
var editor = new Jodit('.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
Licensed under GNU General Public License v2.0 or later or MIT or Commercial
Jodit is licensed under a triple license system (MIT or GPL version 2-or-later or Commercial). This means you are free to choose with which of these licenses you want to use this library.
It does not mean what for commercial products you need Commercial
license. You can use any of these licenses in commercial and non commercial products.