javascript 如何在 Summernote 所见即所得编辑器中添加图像管理器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27905207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add image manager in Summernote WYSIWYG editor?
提问by wilson Liu
I had tried many WYSIWYG editors like TinyMCE, Ckeditor, and Summernote.
我尝试过很多 WYSIWYG 编辑器，比如 TinyMCE、Ckeditor 和 Summernote。
I like the simplicity of Summernote and the edit/savefeature, but summernote seems not have an image manager plugin like TinyMCE or CKEditor.
我喜欢 Summernote 的简单性和编辑/保存功能，但 Summernote 似乎没有像 TinyMCE 或 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).
我的 webapp 有一个照片池（媒体库），可以由个人用户上传。我想要一个功能，允许用户从池中选择照片，并在 Summernote 中编辑文章时将其添加到文本区域（就像 Wordpress 所做的那样）。
Could anyone give me some hint how to accomplish this feature by hand if truly no plugin supported?
如果真的不支持插件，谁能给我一些提示如何手动完成此功能？
回答by semplon
as seen on my post at summernote github issue. https://github.com/summernote/summernote/issues/1203
正如我在summernote github issue上的帖子所见。https://github.com/summernote/summernote/issues/1203
this is what I do to integrate elFinder file manager with Summernote.
这就是我将 elFinder 文件管理器与 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 elfinderbutton for the file manager. The elfinder event run the elfinderDialog()function and we had to make the function after that.
我为我的 cms 制作了两个按钮。请参阅elfinder文件管理器的按钮。elfinder 事件运行elfinderDialog()函数，然后我们必须创建该函数。
after that, add the button at summernote config.
之后，在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.
看到这个标签，['genixcms', ['elfinder']]它会将按钮与其他按钮分开显示，因为它有自己的部门。在summernote图片按钮有默认图片上传。它可以上传到服务器。我让它工作并且运行良好。问题是有时我们需要进行修改，我们需要文件管理器。
Add the elFinder javascript function
添加 elFinder javascript 函数
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.
毕竟，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');
}
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.
我希望这个小片段可以帮助任何需要文件管理器并希望使用 elFinder 作为文件管理器的人。
thanks
谢谢
