jodit

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.

• Demo and Official site
• PRO Version
• Builder
• Playground - Play with Options
• Documentation
• Download & Changes
• Changelog
• Examples
• TypeScript Starter

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

Changelog

4.3.1

:boom: Breaking Change

• Added the popupRoot option for all IViewBased classes (Dialog, Jodit, FileBrowser). Allows you to specify the parental element of dialogs and popup windows.
• If the option is not specified, then when creating a dialogue, there is a bypass of a tree, starting with the editor. If an element is found dialog or eny element with position: fixed or position: absolute, then it is used as a parent.
• Also, shadowRoot can be used as a popupRoot

Those. Parent search priorities:

1. popupRoot option
2. shadowRoot option
3. The closest element dialog or with style position: fixed or position: absolute
4. document.body

This is necessary in cases where Jodit is displayed inside the dialog windows with a focus interception. For example, when inserting in [mui dialog] (https://mui.com/material-ui/react-dialog/)

If this is your situation, then in most cases you won't need to do anything, as Jodit will find the correct parent element on its own. But if your code logic was configured specifically to insert into document.body, then you will need to explicitly specify popupRoot: document.body

const editor = Jodit.make('#editor', {
	popupRoot: document.body
});