如何为 TinyMCE 编辑器实现图片上传功能

最近使用 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)