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
• PRO Version
• Playground - play with options
• Documentation
• Download&Changes
• Changelog
• Examples

Get Started

How use

Download latest release or

INSTALL VIA NPM

npm install jodit

or

yarn add jodit

Include just two files

ES5 Version

<linktype="text/css" rel="stylesheet" href="build/jodit.min.css"/><scripttype="text/javascript" src="build/jodit.min.js"></script>

ES2018 Version (if your users use only modern browsers)

<linktype="text/css" rel="stylesheet" href="build/jodit.es2018.min.css"/><scripttype="text/javascript" src="build/jodit.es2018.min.js"></script>

CDN

<linkrel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.4.25/jodit.min.css"/><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jodit/3.4.25/jodit.min.js"></script>

USAGE

And some <textarea> element

<textareaid="editor" name="editor"></textarea>

After this, you can init Jodit plugin

vareditor=newJodit('#editor');editor.value='<p>start</p>';

or

consteditor=Jodit.make('#editor');editor.value='<p>start</p>';

With jQuery

$('textarea').each(function(){vareditor=newJodit(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:

vareditor=newJodit('#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

vareditor=newJodit('.someselector',{extraButtons: [{name: 'insertDate',iconURL: 'http://xdsoft.net/jodit/logo.png',exec: function(editor){editor.s.insertHTML((newDate).toDateString());}}]})

or

vareditor=newJodit('.someselector',{buttons: ['bold','insertDate'],controls: {insertDate: {name: 'insertDate',iconURL: 'http://xdsoft.net/jodit/logo.png',exec: function(editor){editor.s.insertHTML((newDate).toDateString());}}}})

button with plugin

Jodit.plugins.add('insertText',function(editor){editor.events.on('someEvent',function(text){editor.s.insertHTMl('Hello '+text);});});// orJodit.plugins.add('textLength',{init(editor){constdiv=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 classJodit.plugins.add('textLength',classtextLength{init(editor){constdiv=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')}});vareditor=newJodit('.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

MIT