如何在 Summernote 所见即所得编辑器中添加图像管理器？答案

【问题标题】：How to add image manager in Summernote WYSIWYG editor?如何在 Summernote 所见即所得编辑器中添加图像管理器？
【发布时间】：2015-03-10 09:49:24
【问题描述】：

我尝试过很多所见即所得的编辑器，比如 TinyMCE、Ckeditor 和 Summernote。

我喜欢 Summernote 的简单性和 edit/save 功能，但 Summernote 似乎没有像 TinyMCE 或 CKEditor 这样的图像管理器插件。

我的网络应用程序有一个照片池（媒体库），可由个人用户上传。我希望有一个功能，允许用户从池中选择照片，并在 Summernote 中编辑文章时将其添加到文本区域中（就像 Wordpress 所做的那样）。

如果真的不支持插件，谁能给我一些提示如何手动完成此功能？

【问题讨论】：

标签： javascript summernote

【解决方案1】：

正如我在 Summernote github 问题上的帖子所见。 https://github.com/summernote/summernote/issues/1203

这就是我将 elFinder 文件管理器与 Summernote 集成的方法。

在编辑器中创建按钮

(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();
      },

    }
  });
}));

我为我的 cms 制作了两个按钮。请参阅文件管理器的elfinder 按钮。 elfinder 事件运行 elfinderDialog() 函数，之后我们必须创建该函数。

之后，在summernote配置中添加按钮。

$('.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);
        }
});

查看这个标签['genixcms', ['elfinder']] 它将与其他按钮分开显示，因为它有自己的分区。 Summernote 图片按钮默认上传图片。并且可以上传到服务器。我让它工作并且运行良好。问题是有时我们需要进行修改并且我们需要文件管理器。

添加 elFinder javascript 函数

在所有summernote 要求都准备好加载按钮之后。我们需要创建在单击按钮时将执行的函数。请参阅下面的代码。

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');
}

插入图片很简单，只需双击图片，图片就会在编辑器中插入。

希望这个小sn-p可以帮助到需要文件管理器又想用elFinder做文件管理器的人。

谢谢

【讨论】：

【解决方案2】：

他们的主页演示中有一个图片上传器。另外，它的文档可以查看here

【讨论】：