2017 © Pedro Peláez
 

library jodit

Awesome WYSIWYG editor and FileBrowser

image

xdan/jodit

Awesome WYSIWYG editor and FileBrowser

  • Wednesday, July 25, 2018
  • by xdan
  • Repository
  • 14 Watchers
  • 83 Stars
  • 67 Installations
  • TypeScript
  • 1 Dependents
  • 0 Suggesters
  • 19 Forks
  • 5 Open issues
  • 56 Versions
  • 139 % Grown

The README.md

Jodit WYSIWYG editor, (*1)

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., (*2)

Build Status npm version npm, (*3)

Get Started

How to Use

Download the latest release or via npm:, (*4)

npm install jodit

You will get the following files:, (*5)

  • 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:, (*6)

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):, (*7)

<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., (*8)



<link rel="stylesheet" href="./node_modules/jodit/es2021/jodit.min.css" />

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:, (*9)

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

Initialize Jodit on the textarea:, (*10)

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, (*11)

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, (*12)

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, (*13)

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

Run test PHP server, (*14)

php -S localhost:8181 -t ./

and set options for Jodit:, (*15)

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, (*16)

The Versions

25/07 2018

dev-master

9999999-dev

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary GPL-2.0-or-later

15/07 2018

3.2.9

3.2.9.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

14/07 2018

3.2.8

3.2.8.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

13/07 2018

3.2.7

3.2.7.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

08/06 2018

3.2.6

3.2.6.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

08/06 2018

3.2.5

3.2.5.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

08/06 2018

3.2.4

3.2.4.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

27/05 2018

3.2.3

3.2.3.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

27/05 2018

3.2.2

3.2.2.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

27/05 2018

3.2.1

3.2.1.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

25/05 2018

3.1.96

3.1.96.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

11/05 2018

3.1.95

3.1.95.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

07/05 2018

3.1.94

3.1.94.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

07/05 2018

3.1.93

3.1.93.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

06/05 2018

3.1.92

3.1.92.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

29/04 2018

3.1.91

3.1.91.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

26/04 2018

3.1.90

3.1.90.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

25/04 2018

3.1.89

3.1.89.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

GPL-2.0-or-later

16/04 2018

3.1.88

3.1.88.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

09/04 2018

3.1.87

3.1.87.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

09/04 2018

3.1.86

3.1.86.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

06/04 2018

3.1.85

3.1.85.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

05/04 2018

3.1.84

3.1.84.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

03/04 2018

3.1.83

3.1.83.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

02/04 2018

3.1.82

3.1.82.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

31/03 2018

3.1.81

3.1.81.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

31/03 2018

3.1.80

3.1.80.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

30/03 2018

3.1.79

3.1.79.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

30/03 2018

3.1.78

3.1.78.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

22/03 2018

3.1.77

3.1.77.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

22/03 2018

3.1.76

3.1.76.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

21/03 2018

3.1.75

3.1.75.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

21/03 2018

3.1.74

3.1.74.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

17/03 2018

3.1.73

3.1.73.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

17/03 2018

3.1.72

3.1.72.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

15/03 2018

3.1.71

3.1.71.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

14/03 2018

3.1.70

3.1.70.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

14/03 2018

3.1.69

3.1.69.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

13/03 2018

3.1.68

3.1.68.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

09/03 2018

3.1.67

3.1.67.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

09/03 2018

3.1.66

3.1.66.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

05/03 2018

3.1.65

3.1.65.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

05/03 2018

3.1.64

3.1.64.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

05/03 2018

3.1.63

3.1.63.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

05/03 2018

3.1.62

3.1.62.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

02/03 2018

3.1.61

3.1.61.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

01/03 2018

3.1.60

3.1.60.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

01/03 2018

3.1.59

3.1.59.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

28/02 2018

3.1.58

3.1.58.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

28/02 2018

3.1.57

3.1.57.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

27/02 2018

3.1.56

3.1.56.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

27/02 2018

3.1.55

3.1.55.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

26/02 2018

3.1.54

3.1.54.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

proprietary

26/02 2018

3.1.53

3.1.53.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

license

26/02 2018

3.1.52

3.1.52.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

license

26/02 2018

3.1.51

3.1.51.0

Awesome WYSIWYG editor and FileBrowser

  Sources   Download

license