How to add image manager in Summernote WYSIWYG editor?

Question

I had tried many WYSIWYG editors like TinyMCE, Ckeditor, and Summernote.

I like the simplicity of Summernote and the edit/save feature, but summernote seems not have an image manager plugin like TinyMCE or CKEditor.

My webapp has a pool (media library) of photos which can be uploaded by an individual user. I would like to have an feature that allows the user to select the photos from the pool, and adds it into the textarea when editing an article in Summernote (just like Wordpress did).

Could anyone give me some hint how to accomplish this feature by hand if truly no plugin supported?

Answer 1

as seen on my post at summernote github issue. https://github.com/summernote/summernote/issues/1203

this is what I do to integrate elFinder file manager with Summernote.

Create the Button at the Editor

(function (factory) {
  /* global define */
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else {
    // Browser globals: jQuery
    factory(window.jQuery);
  }
}(function ($){
  // template, editor
  var tmpl = $.summernote.renderer.getTemplate();
  // add plugin
  $.summernote.addPlugin({
    name: 'genixcms', // name of plugin
    buttons: { // buttons
      readmore: function () {
        return tmpl.iconButton('fa fa-long-arrow-right', {
          event: 'readmore',
          title: 'Read more',
          hide: false
        });
      },
      elfinder: function () {
        return tmpl.iconButton('fa fa-list-alt', {
          event: 'elfinder',
          title: 'File Manager',
          hide: false
        });
      },
    },

    events: { // events
      readmore: function (event, editor, layoutInfo) {
        layoutInfo.holder().summernote("insertText", "[[--readmore--]]");
      },
      elfinder: function (event, editor, layoutInfo) {
        elfinderDialog();
      },

    }
  });
}));

There are two button i made for my cms. see the elfinder button for the file manager. The elfinder event run the elfinderDialog() function and we had to make the function after that.

after that, add the button at summernote config.

$('.editor').summernote({
    height: 300,
    toolbar: [
            ['style', ['style']],
            ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
            ['genixcms', ['elfinder']],
            ['view', ['fullscreen', 'codeview']],
            ['help', ['help']]
        ],
    onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0],editor,welEditable);
        }
});

See this tag ['genixcms', ['elfinder']] it will show the button separately from the others as it had it own division. There is default image upload at the summernote image button. And it can upload to the server. I had it work and running well. The problem is some times we need to make modifications and we need the file manager.

Add the elFinder javascript function

After all summernote requirements is ready for loading the button. We need to create the function which will be executed when the button was clicked. See the code below.

function elfinderDialog(){
    var fm = $('<div/>').dialogelfinder({
        url : 'http://localhost/genixcms/inc/lib/Vendor/studio-42/elfinder/php/connector.minimal.php',
        lang : 'en',
        width : 840,
        height: 450,
        destroyOnClose : true,
        getFileCallback : function(files, fm) {
            console.log(files);
            $('.editor').summernote('editor.insertImage',files.url);
        },
       commandsOptions : {
            getfile : {
                oncomplete : 'close',
                folders : false
            }
        }

    }).dialogelfinder('instance');
}

To insert the image is easy, Just double click the image and the image will inserted at the editor.

I hope this little snippet can help anyone who need file manager and want to use elFinder as the file manager.

thanks