正如我在summernote github问题中所提到的那样。 https://github.com/summernote/summernote/issues/1203
这是我使用elFinder文件管理器与Summernote集成的方法。
在编辑器中创建按钮
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else {
factory(window.jQuery);
}
}(function ($){
var tmpl = $.summernote.renderer.getTemplate();
$.summernote.addPlugin({
name: 'genixcms',
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: {
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');
}
插入图片很容易,只需双击图像,图像就会插入到编辑器中。
我希望这个小片段可以帮助需要文件管理器并想要使用elFinder作为文件管理器的任何人。
谢谢