最近使用 laravel 做管理后台, 需要在编辑器中实现图片上传功能, 刚开始使用的是 ckeditor , 但是在做图片上传功能时有遇到一些问题(ckeditor 将图片上传这块的前端代码以及json格式设定了,不太好.), 最终尝试使用 TinyMCE 编辑器.
tinyMCE 编辑器的界比较简洁, 文档也比较易读, 但是具体到上传文件这块, 看了半天还是没有理清头绪, 最终在网上找到一个例子, 照猫画虎的实现了.
首先, 我们为 tinyMce 编辑器初始化, 参数大概是这样的:
tinymce.init({
selector: "#content",
theme: "modern",
menubar:false,
min_height: 400,
paste_data_images: true,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar: "insertfile undo redo | styleselect | bold italic | " +
"alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code",
image_advtab: false,
file_browser_callback: function(field_name, url, type, win) {
var fileBrowser = "{{route('upload.images') }}";
fileBrowser += (fileBrowser.indexOf("?") < 0) ? "?type=" + type : "&type=" + type;
fileBrowser += '&editor=tinymce';
tinymce.activeEditor.windowManager.open({
title : "Insertar fichero",
width : 600,
height : 500,
url : fileBrowser
}, {
window : win,
input : field_name
});
}
});
第一个要点: 是设定 file_browser_callback: 这个回调函数, 设定了点击浏览的 button 时弹出浏览图片的窗口.
我使用的是 laravel, 我设定了一个 url , 这个 url 是使用 laravel mvc 渲染出来的一个图片列表页面, 在这个列表页面中,可以设定对图片的 增加,删除操作等功能. 我们这个设定的主要意图, 就是为了弹出这个资源窗口, 让用户可以在这个资源窗口中选图片.
第二个要点: 是设定当用户选中图片时, 把图片的 url 信息传递会 input 框, 这个操作实际上也非常简单, 因为 tinyMce 弹出的窗口实际上是一个对话框, 对话框中嵌入了 iframe, 我们传值回来即可, 核心的 代码如下:
$(document).on('click', '.js-image-link', function () {
var url = $(this).attr('src');
var args = top.tinymce.activeEditor.windowManager.getParams();
var input = args.input;
args.window.document.getElementById(input).value = url;
top.tinymce.activeEditor.windowManager.close();
}
做到这里, 其实我们的图片管理就已经完成了.
参考:(https://www.morethanweb.es/en/news/how-to-implement-a-file-loader-in-tinymce-4.html)