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 Editor 3

An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor., (*1)

Jodit WYSIWYG editor, (*2)

Build Status npm version npm Gitter, (*3)

For old version, please follow here https://github.com/xdan/jodit2, (*4)

Get Started

How use

Download latest release or, (*5)

INSTALL VIA NPM

npm install jodit

or, (*6)

yarn add jodit

Include just two files

ES5 Version, (*7)

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

ES2018 Version (if your users use only modern browsers), (*8)

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

CDN

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

USAGE

And some <textarea> element, (*9)

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

After this, you can init Jodit plugin, (*10)

var editor = new Jodit('#editor');
editor.value = '<p>start</p>';

or, (*11)

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

With jQuery, (*12)

$('textarea').each(function () {
    var editor = new Jodit(this);
    editor.value = '<p>start</p>';
});

For contributors:

git clone https://github.com/xdan/jodit.git
cd jodit
npm install

Run webpack Hot Reload server:, (*13)

npm start

Demo will be available here, (*14)

http://localhost:2000/

Build min files:, (*15)

npm run build

Run tests:, (*16)

karma start --browsers ChromeHeadless,IE,Firefox karma.conf.js

or, (*17)

npm test

or, (*18)

yarn test

For checking tests in browser, open URL:, (*19)

http://localhost:2000/test/test.html

For testing FileBrowser and Uploader modules, need install PHP Connector, (*20)

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

Run test PHP server, (*21)

php -S localhost:8181 -t ./

and set options for Jodit:, (*22)

var editor = new Jodit('#editor', {
    uploader: {
        url: 'http://localhost:8181/index-test.php?action=fileUpload'
    },
    filebrowser: {
        ajax: {
            url: 'http://localhost:8181/index-test.php'
        }
    }
});

Create plugin

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

Add custom button

var editor = new Jodit('.someselector', {
    extraButtons: [
        {
            name: 'insertDate',
            iconURL: 'http://xdsoft.net/jodit/logo.png',
            exec: function (editor) {
                editor.s.insertHTML((new Date).toDateString());
            }
        }
    ]
})

or, (*23)

var editor = new Jodit('.someselector', {
    buttons: ['bold', 'insertDate'],
    controls: {
        insertDate: {
            name: 'insertDate',
            iconURL: 'http://xdsoft.net/jodit/logo.png',
            exec: function (editor) {
                editor.s.insertHTML((new Date).toDateString());
            }
        }
    }
})

button with plugin, (*24)

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')
    }
});

var editor = new Jodit('.someselector', {
    buttons: ['bold', 'insertText'],
    controls: {
        insertText: {
            iconURL: 'http://xdsoft.net/jodit/logo.png',
            exec: function (editor) {
                editor.events.fire('someEvent', 'world!!!');
            }
        }
    }
})

Browser Support


  • Internet Explorer 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Microsoft Edge

Contributing

This project is maintained by a community of developers. Contributions are welcome and appreciated. You can find Jodit on GitHub; feel free to start an issue or create a pull requests: https://github.com/xdan/jodit, (*25)

License

MIT, (*26)

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