Ответ 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 загружается загрузка изображения по умолчанию. И он может загружаться на сервер. У меня было все хорошо работает. Проблема в том, что нам нужно внести изменения, и нам нужен файловый менеджер.
Добавить функцию javascript 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');
}
Вставить изображение легко, просто дважды щелкните изображение, и изображение будет вставлено в редактор.
Я надеюсь, что этот небольшой фрагмент может помочь любому, кому нужен файловый менеджер, и использовать elFinder в качестве файлового менеджера.
спасибо