Javascript 如何在Summernote WYSIWYG编辑器中添加图像管理器？

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

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

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

---

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

他们的主页演示中有一个图像上传程序。此外，它的文档也可以在我在summernote github上发布的文章中查看

这就是我将elFinder文件管理器与Summernote集成所做的

在编辑器中创建按钮 有两个按钮，我为我的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');
}

函数elfinderDialog（）{
var fm=$（''）.dialogelfinder({
网址：'http://localhost/genixcms/inc/lib/Vendor/studio-42/elfinder/php/connector.minimal.php',
朗:"嗯",，
宽度：840，
身高：450，
是的，
getFileCallback:函数（文件，fm）{
console.log（文件）；
$（'.editor'）.summernote（'editor.insertImage'，files.url）；
},
命令：{
获取文件：{
oncomplete:“关闭”，
文件夹：false
}
}
}).dialogelfinder（“实例”）；
}

要插入图像很容易，只需双击图像，图像将在编辑器中插入

我希望这个小片段可以帮助任何需要文件管理器并希望使用elFinder作为文件管理器的人

谢谢

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