tinymce上传图片php处理,如何为 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();

}

做到这里, 其实我们的图片管理就已经完成了.