An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.
Download the latest release or
npm install jodit
or
yarn add jodit
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>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.24.2/jodit.es2018.min.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/jodit@3.24.2/build/jodit.es2018.min.css"
/>
<script src="https://unpkg.com/jodit@3.24.2/build/jodit.es2018.min.js"></script>
And some <textarea>
element
<textarea id="editor" name="editor"></textarea>
After this, you can init Jodit plugin
var editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
or
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';
with jQuery
$('textarea').each(function () {
var editor = Jodit.make(this);
editor.value = '<p>start</p>';
});
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
Build without some plugins:
webpack --progress --mode production --env es=es2018 --env uglify=true --env excludePlugins="about,source,bold,image,xpath,stat,class-span,color,clean-html,file,focus,enter,backspace,media,preview,pint,redo-undo,resize-cells,search,spellcheck,table"
Build without some languages:
webpack --progress --mode production --env es=es2018 --env uglify=true --env excludeLanguages="ru,ar,cs_cz,de,es,fa,fr,he,hu,id,it,ja,ko,nl,pl,pt_br,ru,tr,zh_cn,zh_tw"
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 = Jodit.make('#editor', {
uploader: {
url: 'http://localhost:8181/index-test.php?action=fileUpload'
},
filebrowser: {
ajax: {
url: 'http://localhost:8181/index-test.php'
}
}
});
Jodit.plugins.yourplugin = function (editor) {
editor.events.on('afterInit', function () {
editor.s.insertHTMl('Text');
});
};
var editor = Jodit.make('.someselector', {
extraButtons: [
{
name: 'insertDate',
iconURL: 'http://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.s.insertHTML(new Date().toDateString());
}
}
]
});
or
var editor = Jodit.make('.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 = Jodit.make('.someselector', {
buttons: ['bold', 'insertText'],
controls: {
insertText: {
iconURL: 'http://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.events.fire('someEvent', 'world!!!');
}
}
}
});
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
MIT
If you like Jodit - try Jodit PRO