TinyMCE 新增本地图片上传功能

发布于 2022-09-08 09:55:06 字数 6359 浏览 12 评论 1

在TinyMCE 在处理富文本时,可以通过网站的相对路径录入图片地址。这样TinyMCE 就可以正常显示图片了。其实该功能属于普通HTML富文本控件基本功能了。现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片。
   实现思路
        使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE 的图片上传扩展,
        具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片。将Ajax上传图片集成到 TinyMCE 中,
        主要是修改TinyMCE 目录下的 tinymcejscriptstiny_mceplugins 的 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 属性。
程序截图如下:


如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

╄→承喏 2022-09-11 22:07:31

ckeditor 都把 ckfinder 独立出来了,他居然要合并这个功能。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文