Skip to content

Integration with Multiple Summernote (fixed functions)

Naoki Sawada edited this page Feb 15, 2018 · 2 revisions

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)

You can’t perform that action at this time.