Wondering what’s next for npm?Check out our public roadmap! »

    jodit
    TypeScript icon, indicating that this package has built-in type declarations

    3.6.15 • Public • Published

    Jodit WYSIWYG editor

    Jodit Editor 3

    An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.

    Build Status npm version npm Gitter

    Get Started

    How use

    Download latest release or

    INSTALL VIA NPM

    npm install jodit

    or

    yarn add jodit

    Include just two files

    ES5 Version

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

    <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.6.1/jodit.min.css"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jodit/3.6.1/jodit.min.js"></script>

    USAGE

    And some <textarea> element

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

    After this, you can init Jodit plugin

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

    or

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

    With jQuery

    $('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:

    npm start

    Demo will be available here

    http://localhost:2000/
    

    Build min files:

    npm run build

    Run tests:

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

    or

    npm test

    or

    yarn test

    For checking tests in browser, open URL:

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

    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:

    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

    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

    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

    License

    MIT

    Install

    npm i jodit

    DownloadsWeekly Downloads

    22,257

    Version

    3.6.15

    License

    MIT

    Unpacked Size

    7.94 MB

    Total Files

    585

    Last publish

    Collaborators

    • avatar