Download the latest release or
npm install uniditor
yarn add uniditES5 Version
<link type="text/css" rel="stylesheet" href="build/unidit.min.css" />
<script type="text/javascript" src="build/unidit.min.js"></script>ES2018 Version (if your users use only modern browsers)
<link type="text/css" rel="stylesheet" href="build/unidit.es2018.min.css" />
<script type="text/javascript" src="build/unidit.es2018.min.js"></script><link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/unidit/3.11.2/unidit.es2018.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/unidit/3.11.2/unidit.es2018.min.js"></script>And some <textarea> element
<textarea id="editor" name="editor"></textarea>After this, you can init Unidit plugin
var editor = new Unidit('#editor');
editor.value = '<p>start</p>';or
const editor = Unidit.make('#editor');
editor.value = '<p>start</p>';with jQuery
$('textarea').each(function () {
var editor = new Unidit(this);
editor.value = '<p>start</p>';
});git clone https://github.com/nzldev/unidit.git
cd unidit
npm installRun webpack Hot Reload server:
npm startDemo will be available here
http://localhost:2000/
Build min files:
npm run buildRun tests:
karma start --browsers ChromeHeadless,IE,Firefox karma.conf.jsor
npm testor
yarn testFor 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 unidit/connectorRun test PHP server
php -S localhost:8181 -t ./and set options for Unidit:
var editor = new Unidit('#editor', {
uploader: {
url: 'http://localhost:8181/index-test.php?action=fileUpload'
},
filebrowser: {
ajax: {
url: 'http://localhost:8181/index-test.php'
}
}
});Unidit.plugins.yourplugin = function (editor) {
editor.events.on('afterInit', function () {
editor.s.insertHTMl('Text');
});
};var editor = new Unidit('.someselector', {
extraButtons: [
{
name: 'insertDate',
iconURL: 'http://nazrul.dev/pacakges/unidit/logo.png',
exec: function (editor) {
editor.s.insertHTML(new Date().toDateString());
}
}
]
});or
var editor = new Unidit('.someselector', {
buttons: ['bold', 'insertDate'],
controls: {
insertDate: {
name: 'insertDate',
iconURL: 'http://nazrul.dev/pacakges/unidit/logo.png',
exec: function (editor) {
editor.s.insertHTML(new Date().toDateString());
}
}
}
});button with plugin
Unidit.plugins.add('insertText', function (editor) {
editor.events.on('someEvent', function (text) {
editor.s.insertHTMl('Hello ' + text);
});
});
// or
Unidit.plugins.add('textLength', {
init(editor) {
const div = editor.create.div('unidit_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
Unidit.plugins.add(
'textLength',
class textLength {
init(editor) {
const div = editor.create.div('unidit_div');
editor.container.appendChild(div);
editor.events.on('change.textLength', () => {
div.innerText = editor.value.length;
});
}
destruct(editor) {
editor.events.off('change.textLength');
}
}
);
var editor = new Unidit('.someselector', {
buttons: ['bold', 'insertText'],
controls: {
insertText: {
iconURL: 'http://nazrul.dev/pacakges/unidit/logo.png',
exec: function (editor) {
editor.events.fire('someEvent', 'world!!!');
}
}
}
});- Internet Explorer 11
- Latest Chrome
- Latest Firefox
- Latest Safari
- Microsoft Edge
This project is maintained by a community of developers. Contributions are welcome and appreciated. You can find Unidit on GitHub; feel free to start an issue or create a pull requests: https://github.com/nzldev/unidit
MIT