Integration with Multiple Summernote (fixed functions)

You can use this integration on Multiple language systems.

Tested with »

• Bootstrap v3.3.6
• jQuery v2.2.4
• jQuery UI - v1.11.4
• elFinder Version 2.0.9 and elFinder Version 2.1.29

Create Button function (summernote-ext-elfinder.js)

(function (factory) {
    /* global define */
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals
        factory(window.jQuery);
    }
}(function ($) {

    // Extends plugins for adding readmore.
    //  - plugin is external module for customizing.
    $.extend($.summernote.plugins, {
        /**
         * @param {Object} context - context object has status of editor.
         */
        'readmore': function (context) {
            var self = this;

            // ui has renders to build ui elements.
            //  - you can create a button with `ui.button`
            var ui = $.summernote.ui;

            // add readmore button
            context.memo('button.readmore', function () {
                // create button
                var button = ui.button({
                    contents: '<i class="fa fa-long-arrow-right"/> Read-More',
                    tooltip: 'readmore',
                    click: function () {

                        context.invoke('editor.insertText', '[[--readmore--]]');
                    }
                });

                // create jQuery object from button instance.
                var $readmore = button.render();
                return $readmore;
            });


            // This methods will be called when editor is destroyed by $('..').summernote('destroy');
            // You should remove elements on `initialize`.
            this.destroy = function () {
                this.$panel.remove();
                this.$panel = null;
            };
        },
        'elfinder': function (context) {
            var self = this;

            // ui has renders to build ui elements.
            //  - you can create a button with `ui.button`
            var ui = $.summernote.ui;

            // add elfinder button
            context.memo('button.elfinder', function () {
                // create button
                var button = ui.button({
                    contents: '<i class="fa fa-list-alt"/> Add Picture',
                    tooltip: 'elfinder',
                    click: function () {
                        elfinderDialog(context);
                    }
                });

                // create jQuery object from button instance.
                var $elfinder = button.render();
                return $elfinder;
            });

            // This methods will be called when editor is destroyed by $('..').summernote('destroy');
            // You should remove elements on `initialize`.
            this.destroy = function () {
                this.$panel.remove();
                this.$panel = null;
            };
        }

    });
}));

elfinder function

<script>
    function elfinderDialog(context){ // <------------------ +context
        var fm = $('<div/>').dialogelfinder({
            url : 'http://localhost/path/elfinder/php/connector.minimal.php',
            lang : 'en',
            width : 840,
            height: 450,
            destroyOnClose : true,
            getFileCallback : function(file, fm) {
                console.log(file);
                // $('.editor').summernote('editor.insertImage', fm.convAbsUrl(file.url)); ...before
                context.invoke('editor.insertImage', fm.convAbsUrl(file.url)); // <------------ after
            },
            commandsOptions : {
                getfile : {
                    oncomplete : 'close',
                    folders : false
                }
            }
        }).dialogelfinder('instance');
    }
</script>

Summernote Toolbar ['insert', ['link', 'image','elfinder','hr']]

Thanks @semplon Regards; DeSwa (http://www.ientegre.com & Integration Systems)

If you desire to use barryvdh/laravel-elfinder integration to open in popup

Load css and js files of ColorBox:

<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min.js"></script>

Load extension:

<script src="summernote-ext-elfinder.js"></script>

Define popup url variable using laravel route() function and new elfinder function:

var ELFINDER_POPUP_URL = '{{ route('elfinder.popup', ['input_id' => '__INPUT_ID__']) }}';

elfinder function and processSelectedFile function

<script>
    function elfinderDialog(context) {
            // trigger the reveal modal with elfinder inside
            // context.$note[0].id is the field id
            var triggerUrl = ELFINDER_POPUP_URL.replace('__INPUT_ID__', context.$note[0].id);

            $.colorbox({
                href: triggerUrl,
                fastIframe: true,
                iframe: true,
                width: '70%',
                height: '70%'
            });
        }

        // function to update the file selected by elfinder
        function processSelectedFile(filePath, requestingField) {
            $('#' + requestingField).summernote('editor.insertImage', filePath);
        }
</script>