• 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

Integration with ElFinder

You can use elFinder if you need more opportunities You can completely replace a standard Jodit's filebrowser on elFinder

  • Download and unzip one of the 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
<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" />
Copy

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

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();
Copy

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

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

For elFinder need jQuery

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