Newlywed Party Monsters

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

    3.24.2 • 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

    Get Started

    How use

    Download the 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>

    Use a CDN

    cdnjs

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

    unpkg

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

    USAGE

    And some <textarea> element

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

    After this, you can init Jodit plugin

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

    or

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

    with jQuery

    $('textarea').each(function () {
    	var editor = Jodit.make(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

    Build without some plugins:

    webpack --progress --mode production --env es=es2018 --env uglify=true --env excludePlugins="about,source,bold,image,xpath,stat,class-span,color,clean-html,file,focus,enter,backspace,media,preview,pint,redo-undo,resize-cells,search,spellcheck,table"

    Build without some languages:

    webpack --progress --mode production --env es=es2018 --env uglify=true --env excludeLanguages="ru,ar,cs_cz,de,es,fa,fr,he,hu,id,it,ja,ko,nl,pl,pt_br,ru,tr,zh_cn,zh_tw"

    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 = Jodit.make('#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 = Jodit.make('.someselector', {
    	extraButtons: [
    		{
    			name: 'insertDate',
    			iconURL: 'http://xdsoft.net/jodit/logo.png',
    			exec: function (editor) {
    				editor.s.insertHTML(new Date().toDateString());
    			}
    		}
    	]
    });

    or

    var editor = Jodit.make('.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 = Jodit.make('.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

    33,694

    Version

    3.24.2

    License

    MIT

    Unpacked Size

    9.73 MB

    Total Files

    1410

    Last publish

    Collaborators

    • xdan