• Jodit
  • PRO
  • Builder
  • Getting Started
  • Playground
  • Examples
  • Documentation
  • Download
  • Jodit
  • Examples
  • © 2025 XDSoft.net
  • site v.0.1.810
  • Jodit v.4.6.2
Modules
Filebrowser module without Jodit
Custom module

Sizes
Autosize
Fixed height

Integrations
Joomla Component Jodit WYSIWYG
Angular Component Jodit WYSIWYG
React JS Jodit WYSIWYG
Integration with ElFinder
Jodit in Yii2
Integrate filebrowser in Joomla CMS

Theme
Drak or custom theme

Edit modes
Source mode
Read only
Read only

Plugins
Create custom plugin

Customization
Keyboard shortcuts

Toolbar
Small Icons
Large Icons
Text Icons
Custom icons / Use Font awesome
Custom button

How to create module for Jodit Editor

You can write your own module for Jodit. For example create Dummy module, which will insert some code in editor Create file Dummy.js with this content

Jodit.modules.Dummy = function (editor) { this.insertDummyImage = function (w, h, textcolor, bgcolor) { const image = editor.createInside.element('img'); image.setAttribute( 'src', 'http://dummyimage.com/' + w + 'x' + h + '/' + (textcolor || '000') + '/' + (bgcolor || 'fff') ); editor.selection.insertNode(image); editor.setEditorValue(); // for syncronize value between source textarea and editor }; };
Copy

You need include this file after include jodit.min.js

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

No you can use this module. For example will append button in toolbar

Jodit.make('#editor', { buttons: [ 'bold', 'italic', { iconURL: 'images/dummy.png', // or text text: 'Dummy', tooltip: 'insert Dummy Image', exec: function (editor) { editor.dummy.insertDummyImage(100, 100, 'f00', '000'); } } ], events: { afterInit: function (editor) { editor.dummy = new Jodit.modules.Dummy(editor); } } });
Copy

Or you can use your mode like this:

const editor = Jodit.make('#textareaid'); editor.getInstance('Dummy').insertDummyImage(100, 100, 'f00', '000');
Copy

That's all. You can try this example here

;