如何在Summernote WYSIWYG編輯器中添加圖像管理器？

Question

我曾嘗試過很多WYSIWYG編輯器，如TinyMCE，Ckeditor和Summernote。

我喜歡Summernote的簡單性和編輯/保存功能，但是summernote似乎沒有像TinyMCE或CKEditor這樣的圖像管理器插件。

我的webapp有一個可以由個人用戶上傳的照片池（媒體庫）。 我希望有一個功能允許用戶從池中選擇照片，並在Summernote中編輯文章時將其添加到textarea中（就像Wordpress一樣）。

如果真的沒有支持插件，任何人都可以給我一些提示如何手動完成此功能嗎？

Answer 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函數

畢竟夏季要求已准備好加載按鈕。 我們需要創建在單擊按鈕時執行的功能。 請參閱下面的代碼。

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

要插入圖像很簡單，只需雙擊圖像，圖像就會插入編輯器。

我希望這個小片段可以幫助任何需要文件管理器並希望使用elFinder作為文件管理器的人。

謝謝

Answer 2

他們的主頁演示中有一個圖像上傳器。 此外，可以在此處查看其文檔