Skip to content

xdan/jodit

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2,963 Commits
.github
.github
 
 
docker
docker
 
 
docs
docs
 
 
examples
examples
 
 
public
public
 
 
src
src
 
 
test
test
 
 
tests
tests
 
 
tools
tools
 
 
.editorconfig
.editorconfig
 
 
.gitignore
.gitignore
 
 
.npmrc
.npmrc
 
 
.nvmrc
.nvmrc
 
 
.prettierrc.json
.prettierrc.json
 
 
.stylelintrc
.stylelintrc
 
 
CHANGELOG.md
CHANGELOG.md
 
 
CONTRIBUTING.md
CONTRIBUTING.md
 
 
JODIT-DEVELOPMENT-GUIDE.md
JODIT-DEVELOPMENT-GUIDE.md
 
 
LICENSE.txt
LICENSE.txt
 
 
Makefile
Makefile
 
 
README.md
README.md
 
 
SECURITY.md
SECURITY.md
 
 
eslint.config.mjs
eslint.config.mjs
 
 
index.d.ts
index.d.ts
 
 
index.html
index.html
 
 
make.js
make.js
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
playwright.config.ts
playwright.config.ts
 
 
tsconfig.esm.json
tsconfig.esm.json
 
 
tsconfig.json
tsconfig.json
 
 
tsdoc.json
tsdoc.json
 
 
webpack.config.ts
webpack.config.ts
 
 

Repository files navigation

Jodit WYSIWYG editor

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.

Build Status npm version npm npm

Get Started

How to Use

Download the latest release or via npm:

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:

<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):

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

ESM Modules:

<script type="importmap">
  {
    "imports": {
      "autobind-decorator": "https://unpkg.com/autobind-decorator@2.4.0/lib/esm/index.js"
    }
  }
</script>
<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 and the English language. You can manually include additional plugins and languages as needed.

<script type="importmap">
  {
    "imports": {
      "autobind-decorator": "https://unpkg.com/autobind-decorator@2.4.0/lib/esm/index.js"
    }
  }
</script>
<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';
  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

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.1/es2021/jodit.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jodit/4.0.1/es2021/jodit.min.js"></script>

unpkg

<link
  rel="stylesheet"
  href="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.css"
/>
<script src="https://unpkg.com/jodit@4.0.1/es2021/jodit.min.js"></script>

Usage

Add a textarea element to your HTML:

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

Initialize Jodit on the textarea:

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

Create plugin

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

Add custom button

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

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

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

composer create-project --no-dev jodit/connector

Run test PHP server

php -S localhost:8181 -t ./

and set options for Jodit:

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

About

Jodit - Best WYSIWYG Editor for You

xdsoft.net/jodit/

Topics

editor html typescript wysiwyg rich-text-editor ace-editor wysiwyg-editor imageeditor filebrowser wysiwyg-html-editor jodit

Resources

Readme

License

MIT license

Security policy

Security policy
Activity

Stars

1.7k stars

Watchers

54 watching

Forks

356 forks
Report repository

Releases 63

4.2.5 Latest
Apr 22, 2024
+ 62 releases

Packages

No packages published

Used by 10.7k

  • @dhanushramudri
  • @webdesirewebsolution
  • @Ganesh-Ghadi
  • @Monisha-18
  • @Tsutsuji2002
  • @NAVEEN171
  • @Mahabub175
  • @abhaydeep-singh
+ 10,721

Contributors 68

+ 54 contributors

Languages