jodit

Jodit is awesome and usefully wysiwyg editor with filebrowser

  • jodit

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
jodit
1,2591593.19.311 days ago6 years agoMinified + gzip package size for jodit in KB

Readme

Jodit WYSIWYG editor
Jodit Editor 3
An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.
Build Status npm version npm

Get Started

How use

Download the 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>

Use a CDN

cdnjs

<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.18.9/jodit.es2018.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/3.18.9/jodit.es2018.min.js"></script>

unpkg

<link
	rel="stylesheet"
	href="https://unpkg.com/jodit@3.18.9/build/jodit.es2018.min.css"
/>
<script src="https://unpkg.com/jodit@3.18.9/build/jodit.es2018.min.js"></script>

USAGE

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>';
});

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

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'
		}
	}
});

Create plugin

Jodit.plugins.yourplugin = function (editor) {
	editor.events.on('afterInit', function () {
		editor.s.insertHTMl('Text');
	});
};

Add custom button

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!!!');
			}
		}
	}
});

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