272 lines
6.5 KiB
Markdown
272 lines
6.5 KiB
Markdown
|
|
|
|
# Jodit Editor
|
|
|
|
Jodit Editor is an excellent WYSIWYG editor written in pure TypeScript
|
|
without the use of additional libraries. It includes a file editor and image editor.
|
|
|
|
[](https://github.com/xdan/jodit/actions/workflows/tests.yml)
|
|
[](https://badge.fury.io/js/jodit)
|
|
[](https://www.npmjs.com/package/jodit)
|
|
[](https://www.npmjs.com/package/jodit-react)
|
|
|
|
- [Demo and Official site](https://xdsoft.net/jodit/)
|
|
- [PRO Version](https://xdsoft.net/jodit/pro/)
|
|
- [Builder](https://xdsoft.net/jodit/builder/)
|
|
- [Playground - Play with Options](https://xdsoft.net/jodit/play.html)
|
|
- [Documentation](https://xdsoft.net/jodit/docs/)
|
|
- [Download & Changes](https://github.com/xdan/jodit/releases)
|
|
- [Changelog](https://github.com/xdan/jodit/blob/main/CHANGELOG.md)
|
|
- [Examples](https://xdan.github.io/jodit)
|
|
- [TypeScript Starter](https://codesandbox.io/s/ggc6km)
|
|
|
|
## Get Started
|
|
|
|
## How to Use
|
|
|
|
Download the latest [release](https://github.com/xdan/jodit/releases/latest) or via npm:
|
|
|
|
```sh
|
|
npm install jodit
|
|
```
|
|
|
|
You will get the following files:
|
|
|
|
- Inside `/esm`: ESM version of the editor (compatible with tools like webpack)
|
|
- Inside `/es5`, `/es2015`, `/es2018`, `/es2021`: UMD bundled files (not minified)
|
|
- Inside `/es5`, `/es2015`, `/es2018`, `/es2021` with `.min.js` extension: UMD bundled and minified files
|
|
- `types/index.d.ts`: This file specifies the API of the editor. It is versioned, while everything else is considered private and may change with each release.
|
|
|
|
### Include Jodit in Your Project
|
|
|
|
Include the following two files:
|
|
|
|
#### ES5 Version:
|
|
|
|
```html
|
|
<link type="text/css" rel="stylesheet" href="es2015/jodit.min.css" />
|
|
<script type="text/javascript" src="es2015/jodit.min.js"></script>
|
|
```
|
|
|
|
ES2021 Version (for modern browsers only):
|
|
|
|
```html
|
|
<link type="text/css" rel="stylesheet" href="es2021/jodit.min.css" />
|
|
<script type="text/javascript" src="es2021/jodit.min.js"></script>
|
|
```
|
|
|
|
#### ESM Modules:
|
|
|
|
```html
|
|
<link rel="stylesheet" href="./node_modules/jodit/es2021/jodit.min.css" />
|
|
<script type="module">
|
|
import { Jodit } from './node_modules/jodit/esm/index.js';
|
|
Jodit.make('#editor', {
|
|
width: 600,
|
|
height: 400
|
|
});
|
|
</script>
|
|
```
|
|
|
|
The ESM modules automatically include only the [basic set of plugins](https://github.com/xdan/jodit/blob/main/tools/utils/resolve-alias-imports.ts#L59) and the English language.
|
|
You can manually include additional plugins and languages as needed.
|
|
|
|
```html
|
|
<link rel="stylesheet" href="./node_modules/jodit/es2021/jodit.min.css" />
|
|
<script type="module">
|
|
import { Jodit } from './node_modules/jodit/esm/index.js';
|
|
import './node_modules/jodit/esm/plugins/add-new-line/add-new-line.js';
|
|
import './node_modules/jodit/esm/plugins/fullsize/fullsize.js';
|
|
|
|
// Or import all plugins
|
|
import './node_modules/jodit/esm/plugins/all.js';
|
|
|
|
import de from './node_modules/jodit/esm/langs/de.js';
|
|
|
|
Jodit.langs.de = de;
|
|
|
|
Jodit.make('#editor', {
|
|
width: 600,
|
|
height: 400,
|
|
language: 'de'
|
|
});
|
|
</script>
|
|
```
|
|
|
|
### Use a CDN
|
|
|
|
#### cdnjs
|
|
|
|
```html
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.7.6/es2021/jodit.min.css"
|
|
/>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.7.6/es2021/jodit.min.js"></script>
|
|
```
|
|
|
|
#### unpkg
|
|
|
|
```html
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/jodit@4.7.6/es2021/jodit.min.css"
|
|
/>
|
|
<script src="https://unpkg.com/jodit@4.7.6/es2021/jodit.min.js"></script>
|
|
```
|
|
|
|
### Usage
|
|
|
|
Add a `textarea` element to your HTML:
|
|
|
|
```html
|
|
<textarea id="editor" name="editor"></textarea>
|
|
```
|
|
|
|
Initialize Jodit on the textarea:
|
|
|
|
```javascript
|
|
const editor = Jodit.make('#editor');
|
|
editor.value = '<p>start</p>';
|
|
```
|
|
|
|
### Create plugin
|
|
|
|
```javascript
|
|
Jodit.plugins.yourplugin = function (editor) {
|
|
editor.events.on('afterInit', function () {
|
|
editor.s.insertHTMl('Text');
|
|
});
|
|
};
|
|
```
|
|
|
|
### Add custom button
|
|
|
|
```javascript
|
|
const editor = Jodit.make('.someselector', {
|
|
extraButtons: [
|
|
{
|
|
name: 'insertDate',
|
|
iconURL: 'https://xdsoft.net/jodit/logo.png',
|
|
exec: function (editor) {
|
|
editor.s.insertHTML(new Date().toDateString());
|
|
editor.synchronizeValues(); // For history saving
|
|
}
|
|
}
|
|
]
|
|
});
|
|
```
|
|
|
|
or
|
|
|
|
```javascript
|
|
const editor = Jodit.make('.someselector', {
|
|
buttons: ['bold', 'insertDate'],
|
|
controls: {
|
|
insertDate: {
|
|
name: 'insertDate',
|
|
iconURL: 'https://xdsoft.net/jodit/logo.png',
|
|
exec: function (editor) {
|
|
editor.s.insertHTML(new Date().toDateString());
|
|
}
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
button with plugin
|
|
|
|
```javascript
|
|
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');
|
|
}
|
|
}
|
|
);
|
|
|
|
const editor = Jodit.make('.someselector', {
|
|
buttons: ['bold', 'insertText'],
|
|
controls: {
|
|
insertText: {
|
|
iconURL: 'https://xdsoft.net/jodit/logo.png',
|
|
exec: function (editor) {
|
|
editor.events.fire('someEvent', 'world!!!');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## FileBrowser and Uploader
|
|
|
|
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
|
|
const editor = Jodit.make('#editor', {
|
|
uploader: {
|
|
url: 'http://localhost:8181/index-test.php?action=fileUpload'
|
|
},
|
|
filebrowser: {
|
|
ajax: {
|
|
url: 'http://localhost:8181/index-test.php'
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## Browser Support
|
|
|
|
- Internet Explorer 11
|
|
- Latest Chrome
|
|
- Latest Firefox
|
|
- Latest Safari
|
|
- Microsoft Edge
|
|
|
|
## License
|
|
|
|
MIT
|