@techzolab/zodit

Zodit Editor 1

An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.

Get Started

How use

Download the latest release or

INSTALL VIA NPM

npm i @techzolab/zodit

or

yarn add @techzolab/zodit

Include just two files

ES5 Version

<link type="text/css" rel="stylesheet" href="build/zodit.min.css" />
<script type="text/javascript" src="build/zodit.min.js"></script>

ES2018 Version (if your users use only modern browsers)

<link type="text/css" rel="stylesheet" href="build/zodit.es2018.min.css" />
<script type="text/javascript" src="build/zodit.es2018.min.js"></script>

Use a CDN

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

USAGE

And some <textarea> element

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

After this, you can init Zodit plugin

var editor = Zodit.make('#editor');
editor.value = '<p>start</p>';

or

const editor = Zodit.make('#editor');
editor.value = '<p>start</p>';

with jQuery

$('textarea').each(function () {
	var editor = Zodit.make(this);
	editor.value = '<p>start</p>';
});

For contributors:

git clone https://github.com/techzolab/zodit.git
cd zodit
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 zodit/connector

Run test PHP server

php -S localhost:8181 -t ./

and set options for Zodit:

var editor = Zodit.make('#editor', {
	uploader: {
		url: 'http://localhost:8181/index-test.php?action=fileUpload'
	},
	filebrowser: {
		ajax: {
			url: 'http://localhost:8181/index-test.php'
		}
	}
});

Create plugin

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

Add custom button

var editor = Zodit.make('.someselector', {
	extraButtons: [
		{
			name: 'insertDate',
			iconURL: 'http://techzolab.net/opensource/zodit/logo.png',
			exec: function (editor) {
				editor.s.insertHTML(new Date().toDateString());
			}
		}
	]
});

or

var editor = Zodit.make('.someselector', {
	buttons: ['bold', 'insertDate'],
	controls: {
		insertDate: {
			name: 'insertDate',
			iconURL: 'http://techzolab.net/opensource/zodit/logo.png',
			exec: function (editor) {
				editor.s.insertHTML(new Date().toDateString());
			}
		}
	}
});

button with plugin

Zodit.plugins.add('insertText', function (editor) {
	editor.events.on('someEvent', function (text) {
		editor.s.insertHTMl('Hello ' + text);
	});
});

// or

Zodit.plugins.add('textLength', {
	init(editor) {
		const div = editor.create.div('zodit_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

Zodit.plugins.add(
	'textLength',
	class textLength {
		init(editor) {
			const div = editor.create.div('zodit_div');
			editor.container.appendChild(div);
			editor.events.on('change.textLength', () => {
				div.innerText = editor.value.length;
			});
		}
		destruct(editor) {
			editor.events.off('change.textLength');
		}
	}
);

var editor = Zodit.make('.someselector', {
	buttons: ['bold', 'insertText'],
	controls: {
		insertText: {
			iconURL: 'http://techzolab.net/opensource/zodit/logo.png',
			exec: function (editor) {
				editor.events.fire('someEvent', 'world!!!');
			}
		}
	}
});

Browser Support

• Internet Explorer 11
• Latest Chrome
• Latest Firefox
• Latest Safari
• Microsoft Edge

License

MIT