An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.
For old version, please follow here https://github.com/xdan/jodit2
npm install
Run webpack Hot Reload server:
npm start
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 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=upload'
},
filebrowser: {
ajax: {
url: 'http://localhost:8181/index-test.php'
}
}
});
And some <textarea>
element
<textarea id="editor" name="editor"></textarea>
After this, you can init Jodit plugin
var editor = new Jodit('#editor');
editor.setEditorValue('<p>start</p>')
With jQuery
$('textarea').each(function (elm) {
var editor = new Jodit(elm);
editor.setEditorValue('<p>start</p>')
});
Jodit.plugins.yourplugin = function (editor) {
editor.events.on('afterInit', function () {
editor.seleciotn.insertHTMl('Text');
});
}
var editor = new Jodit('.someselector', {
buttons: Jodit.defaultOptions.buttons.concat([
{
name: 'insertDate',
iconURL: 'http://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.selection.insertHTML((new Date).toDateString());
}
}
])
})
- Internet Explorer 9
- Latest Chrome
- Latest Firefox
- Latest Safari
- Microsoft Edge
- Added mobile plugin. It fixes the problem when the user on the Iphone Safari clicks on the element, the editor instead putting the cursor there, selects the word and looks for its definition
- Separate response logic in mobile plugin
- Added option - extraButtons
var editor = new Jodit('#table_editor_interface', {
extraButtons: [
{
name: 'adddate',
exec: function (editor) {
var a = editor.doc.createTextNode('111');
editor.selection.insertNode(a);
}
}
]
});
- Now work options buttonsXS,buttonsSM and buttonsMD for responsible interface
- Restore selection after change mode. It is very usefully
- Fixed bug in source plugin - when user does not need ace editor. Simple textarea had been created with bug.
- Iframe functional was separated in plugin
- Restored
iframe
mode. It need for adding another stylesheets in editor.
- Now
options
.language
by default equalauto
. It means that after init Jodit, it try define page language (<html lang="de">
), if it is impossible, editor define language by browser.language. - Added
options
.debugLanguage
=false
if true, editro ignoreoptions
.language
andeditor.i18n(key)
return'{key}'
- Restore inline toolbar for Images and Tables