TinyMCE 新增本地图片上传功能

在TinyMCE 在处理富文本时，可以通过网站的相对路径录入图片地址。这样TinyMCE 就可以正常显示图片了。其实该功能属于普通HTML富文本控件基本功能了。现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片。

实现思路：

使用Ajax 进行图片上传，此上传方式可以更友好的实现TinyMCE 的图片上传扩展，

具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片。将Ajax上传图片集成到 TinyMCE 中，

主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。

了解TinyMCE的人应该知道 TinyMCE 类似 FireFox。 开发者是可以为其编写适合自己需求的插件。

所以只要稍稍修改 advimage 这个插件即可。我们为 advimage

目录下的image.htm 新增 jquery 图片异步提交代码：

1  <script type="text/javascript">
 2         function AjaxUploadPic() {
 3            if ($("#flUpload").val() == "") {
 4                 alert("请选择一个图片文件，再点击上传。");
 5                 return;
 6             }
 7 
 8             $('#myForm').ajaxSubmit({
 9                 beforeSubmit: function() {
10                 },
11                 success: function(html, status) {
12                     var result = html.replace("<PRE>", "");
13                     result = result.replace("</PRE>", "");
14                     if (html.indexOf("格式") > 0) {
15                         alert(result);
16                         return;
17                     }
18                     $("#src").val(result);
19                     ImageDialog.showPreviewImage($("#src").val())
20                 }
21             });
22 
23         }
24      });
25     </script>

复制代码

当然了，flUpload 这个input type="file" 需要被form html标签包住同时为该form设置好



method="post" enctype="multipart/form-data" action=url 属性。

程序截图如下：