jodit
Version:
Jodit is awesome and usefully wysiwyg editor with filebrowser
172 lines (141 loc) • 4.32 kB
Markdown
# Jodit Editor 3
An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.
[](https://travis-ci.org/xdan/jodit)
[](https://badge.fury.io/js/jodit)
[](https://www.npmjs.com/package/jodit)
[](https://gitter.im/xdan/jodit?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
* [Demo and Official site](https://xdsoft.net/jodit/)
* [Playground - play with options](https://xdsoft.net/jodit/play.html)
* [Documentation](https://xdsoft.net/jodit/doc/)
* [Download&Changes](https://github.com/xdan/jodit/releases)
> For old version, please follow here [https://github.com/xdan/jodit2](https://github.com/xdan/jodit2)
## Get Started
## How use
Download latest [release](https://github.com/xdan/jodit/releases/latest) or
### INSTALL VIA BOWER
```bash
bower install jodit
```
### INSTALL VIA NPM
```bash
npm install jodit
```
Include just two files
```xml
<link type="text/css" rel="stylesheet" href="build/jodit.min.css">
<script type="text/javascript" src="build/jodit.min.js"></script>
```
### CDN
```xml
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jodit/3.2.46/jodit.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.2.46/jodit.min.js"></script>
```
### USAGE
And some `<textarea>` element
```xml
<textarea id="editor" name="editor"></textarea>
```
After this, you can init Jodit plugin
```javascript
var editor = new Jodit('#editor');
editor.value = '<p>start</p>';
```
With jQuery
```javascript
$('textarea').each(function () {
var editor = new Jodit(this);
editor.value = '<p>start</p>';
});
```
## For contributors:
```bash
git clone https://github.com/xdan/jodit.git
cd jodit
npm install
```
Run webpack Hot Reload server:
```bash
npm start
```
Demo will be available here
```
http://localhost:2000/
```
Build min files:
```bash
npm run build
```
Run tests:
```bash
karma start --browsers ChromeHeadless,IE,Firefox karma.conf.js
```
or
```bash
npm test
```
or
```bash
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](https://github.com/xdan/jodit-connectors)
```bash
composer create-project --no-dev jodit/connector
```
Run test PHP server
```bash
php -S localhost:8181 -t ./
```
and set options for Jodit:
```javascript
var editor = new Jodit('#editor', {
uploader: {
url: 'http://localhost:8181/index-test.php?action=fileUpload'
},
filebrowser: {
ajax: {
url: 'http://localhost:8181/index-test.php'
}
}
});
```
### Create plugin
```javascript
Jodit.plugins.yourplugin = function (editor) {
editor.events.on('afterInit', function () {
editor.seleciotn.insertHTMl('Text');
});
}
```
### Add custom button
```javascript
var editor = new Jodit('.someselector', {
extraButtons: [
{
name: 'insertDate',
iconURL: 'http://xdsoft.net/jodit/logo.png',
exec: function (editor) {
editor.selection.insertHTML((new Date).toDateString());
}
}
]
})
```
## 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
Licensed under GNU General Public License v2.0 or later or MIT or [Commercial](https://xdsoft.net/jodit/commercial/)
Jodit is licensed under a triple license system (MIT or GPL version 2-or-later or Commercial). This means you are free to choose with which of these licenses you want to use this library.
It does not mean what for commercial products you need `Commercial` license. You can use any of these licenses in commercial and non commercial products.