Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xdan/jodit
Jodit - Best WYSIWYG Editor for You
https://github.com/xdan/jodit
ace-editor editor filebrowser html imageeditor jodit rich-text-editor typescript wysiwyg wysiwyg-editor wysiwyg-html-editor
Last synced: 9 days ago
JSON representation
Jodit - Best WYSIWYG Editor for You
- Host: GitHub
- URL: https://github.com/xdan/jodit
- Owner: xdan
- License: mit
- Created: 2017-07-24T15:06:37.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-10-10T14:18:26.000Z (29 days ago)
- Last Synced: 2024-10-11T21:33:13.225Z (28 days ago)
- Topics: ace-editor, editor, filebrowser, html, imageeditor, jodit, rich-text-editor, typescript, wysiwyg, wysiwyg-editor, wysiwyg-html-editor
- Language: TypeScript
- Homepage: https://xdsoft.net/jodit/
- Size: 70.2 MB
- Stars: 1,668
- Watchers: 54
- Forks: 351
- Open Issues: 288
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Security: SECURITY.md
Awesome Lists containing this project
- awesome-wysiwyg - Jodit - Rich HTML WYSIWYG Editor and FileBrowser. (Standalone)
- awesome-web-editor - jodit - Jodit - Best WYSIWYG Editor for You. (Rich text editor)
- awesome-wysiwyg-editors - Jodit - 丰富的 HTML WYSIWYG 编辑器和文件浏览器。  (独立的)
- best-of-react - GitHub - 28% open · ⏱️ 02.06.2024): (Editor Components)
README
# 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)
- [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
```
ES2021 Version (for modern browsers only):
```html
```
#### ESM Modules:
```html
{
"imports": {
"autobind-decorator": "https://unpkg.com/[email protected]/lib/esm/index.js"
}
}
import { Jodit } from './node_modules/jodit/esm/index.js';
Jodit.make('#editor', {
width: 600,
height: 400
});
```
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
{
"imports": {
"autobind-decorator": "https://unpkg.com/[email protected]/lib/esm/index.js"
}
}
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';
import de from './node_modules/jodit/esm/langs/de.js';
Jodit.langs.de = de;
Jodit.make('#editor', {
width: 600,
height: 400,
language: 'de'
});
```
### Use a CDN
#### cdnjs
```html
```
#### unpkg
```html
```
### Usage
Add a `textarea` element to your HTML:
```html
```
Initialize Jodit on the textarea:
```javascript
const editor = Jodit.make('#editor');
editor.value = '
start
';
```
### 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