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
<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="../stuf/elfinder/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" href="../stuf/elfinder/css/theme.css">

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

(function ($) {
    "use strict";
    Jodit.defaultOptions = $.extend(true, Jodit.defaultOptions, {
        filebrowser: {
            resizable: true,
            width: 600,
            height: 400,
            url: '../stuf/elfinder/php/connector.minimal.php',
            lang: 'en' // full option list here
        }
    });
    Jodit.modules.FileBrowser = function (parent) {
        var dialog,
            callbackSelect,
            $elfinderbox = jQuery('<div class="jodit_elfinder"></div>'),
            init = function () {
                dialog = new Jodit.modules.Dialog(parent, {resizable: false});
                parent.options.filebrowser.getFileCallback = function (file) {
                    if (callbackSelect && callbackSelect.call) {
                        callbackSelect.call(parent, [file.url]);
                    } else {
                        parent.selection.insertImage(file.url);
                    } 
                    dialog.close();
                };
                dialog.setContent($elfinderbox.elfinder(parent.options.filebrowser));
            },
            open = function (callback) {
                callbackSelect = callback;
                dialog.open();
                $elfinderbox.resize();
            };

        return {
            init: init,
            open: open
        };
    };
}(jodit.modules.Dom));

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>
<script>

new Jodit('.editor', {
    buttons: [{
        icon: 'image',
        exec: function () {
            // if you had named you module ElFinder you must use  this.elfinder.open();
            this.filebrowser.open();
        }
    }]
});