---
title: How to Create a Module
description: Write custom modules for Jodit editor with example code.
keywords: jodit module, custom module, create module
---

# 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

```javascript
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
	};
};
```

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

```html
<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>
```

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

```javascript
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);
		}
	}
});
```

Or you can use your mode like this:

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

That's all. You can try this example here

```html
<!-- Example Start -->
<textarea id="dummy" cols="30" rows="10"></textarea>

<script>
	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
		};
	};
	Jodit.make('#dummy', {
		buttons: [
			'bold',
			'italic',
			{
				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);
			}
		}
	});
</script>
<!-- Example End -->
```