---
title: Integration with elFinder
description: Replace Jodit file browser with elFinder for advanced file management.
keywords: elfinder, file browser, jodit integration
---

# Integration with ElFinder

You can use elFinder if you need more opportunities
You can completely replace a standard Jodit's filebrowser on [elFinder](http://elfinder.org/)

- Download and unzip one of the [releases](https://github.com/Studio-42/elFinder/releases) elFinder
- Rename `/php/connector.minimal.php-dist` to `/php/connector.minimal.php`
- And include a few files in you HTML code
- Also you need setting elFinder PHP connector, but that's [another story](https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options)

```html
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link
	rel="stylesheet"
	type="text/css"
	href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"
/>
<script
	type="text/javascript"
	src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"
></script>
<link
	rel="stylesheet"
	type="text/css"
	media="screen"
	href="./elfinder/css/elfinder.min.css"
/>
<link rel="stylesheet" type="text/css" href="./elfinder/css/theme.css" />
```

Now you need decide, will you change the default FileBrowser or will use both.
Create `FileBrowserEl.js` with that code

```javascript
Jodit.defaultOptions.filebrowser = {
	resizable: true,
	width: 600,
	height: 400,
	url: './build/js/elfinder/php/connector.php',
	lang: 'en' // full option list {@link https://github.com/Studio-42/elFinder/wiki/Client-configuration-options|here}
};

Jodit.modules.FileBrowser = function (options) {
	this.options = options;

	var dialog,
		callbackSelect,
		$elfinderbox = this.create.fromHTML(
			'<div class="jodit_elfinder"></div>'
		);

	dialog = new Jodit.modules.Dialog({ resizable: false });

	options.getFileCallback = function (file) {
		if (callbackSelect && callbackSelect.call) {
			callbackSelect.call(editor, [file.url]);
		} else {
			editor.selection.insertNode(
				editor.create.fromHTML('<img src="' + file.url + '">')
			);
		}

		dialog.close();
	};

	jQuery($elfinderbox).elfinder(options);
	dialog.setContent($elfinderbox);

	this.open = function (callback) {
		callbackSelect = callback;
		dialog.open();
		jQuery($elfinderbox).resize();
	};
};
Jodit.modules.FileBrowser.prototype = new Jodit.modules.ViewWithToolbar();
```

If you want use both filebrowser, you need replace `FileBrowser` and `filebrowser` for example `ElFinder` and `elfinder`
Above we replace FileBrowser and do not need to do anything more. Just initializes Jodit as usual

```html
<textarea class="editor" name="editor"></textarea>
```

For elFinder need jQuery

```javascript
jQuery(function () {
	Jodit.make('.editor', {
		buttons: [
			{
				icon: 'image',
				exec: function (editor) {
					editor.filebrowser.open();
				}
			}
		]
	});
});
```

```html
<!-- Example Start -->
<link
	rel="stylesheet"
	type="text/css"
	href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css"
/>
<script
	type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"
></script>
<script
	type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
></script>
<link
	rel="stylesheet"
	type="text/css"
	media="screen"
	href="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.61/css/elfinder.full.min.css"
/>
<link
	rel="stylesheet"
	type="text/css"
	href="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.61/css/theme.min.css"
/>

<script
	type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.61/js/elfinder.min.js"
></script>
<script type="text/javascript">
	Jodit.defaultOptions.filebrowser = {
		resizable: true,
		width: 600,
		height: 400,
		url: './build/js/elfinder/php/connector.php',
		lang: 'en' // full option list {@link https://github.com/Studio-42/elFinder/wiki/Client-configuration-options|here}
	};

	Jodit.modules.FileBrowser = function (options) {
		this.options = options;

		let dialog, callbackSelect;

		dialog = new Jodit.modules.Dialog({ resizable: false });

		const $elfinderbox = dialog.create.fromHTML(
			'<div class="jodit_elfinder"></div>'
		);

		options.getFileCallback = function (file) {
			if (callbackSelect && callbackSelect.call) {
				callbackSelect.call(editor, [file.url]);
			} else {
				editor.selection.insertNode(
					editor.create.fromHTML('<img src="' + file.url + '">')
				);
			}

			dialog.close();
		};

		jQuery($elfinderbox).elfinder(options);
		dialog.setContent($elfinderbox);

		this.open = function (callback) {
			callbackSelect = callback;
			dialog.open();
			jQuery($elfinderbox).resize();
		};
	};
	Jodit.modules.FileBrowser.prototype = new Jodit.modules.ViewWithToolbar();
</script>

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

<script>
	jQuery(function () {
		Jodit.make('.editor', {
			buttons: [
				{
					icon: 'image',
					exec: function (editor) {
						editor.filebrowser.open();
					}
				}
			]
		});
	});
</script>
<!-- Example End -->
```