在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 属性。
程序截图如下:
分享到:
相关推荐
TinyMCE实现本地图片上传 this is a demo
tinymce 官方只有单图片上传功能,本人试重网上查找多图片批量上传的例子,无奈找不到合适的,唯有自力更新,帮助更多的网友。
tinymce新增的本地图片预览功能,具体实现依靠jquery和ajax,代码并不复杂
tinyMCE编辑器,包含自定义上传图片插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示
强大易用的文本编辑器,HTML编辑器,绝对讲的明白,讲的清楚,有不清楚的请留言
powperpaste现在是收费插件,官网最低售价12美元/每月,可从word直接粘贴富文本,同时上传图片
tinymce默认编辑器是没有图片上传功能,在这里给tinymce编辑器添加了一个名为ajaxfilemanager图片上传管理插件
PHP版符合W3C的在线文本编辑器tinymce中文版集成上传图片功能,在网上找了很多,要么是不能正常使用,要么是英文版。
tinyMCE图片上传
具体的修改过程,请移步 博客文章:https://blog.csdn.net/yzw675628706/article/details/103286174,如果有什么问题,请大家多指正
首先将本地图片上传至工程,再将图片名称保存到数据库,之后取图片的时候首先从数据库中取出图片名称,然后从工程中得到图片显示在画面上。
vue-tinymce 封装了el-upload 控件,支持富文本编辑器自定义图片上传整合。 复制到vue的src/components文件夹下 详情博文介绍见:https://xingyun.blog.csdn.net/article/details/102492921
图片集成ajax是老外弄的,解压后放在网站根目录下,访问tinymce_test.php就可以了看到效果了。js比较庞大,有点慢,测试的话要关闭服务器,清除缓存。自己集成的话要严格按照tinymce_test.php,我出现的3点错误,供...
vue-element-admin-tinymce源码,下载到本地,适当配置后,直接嵌入,不再使用cdn
tinymce是很强大的富文本编辑器,可以去官网下载,这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用,此插件目前官网收费每月12美刀,我们就不花这钱了。以vue为例说明:将tinymce下载...
功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),支持AJAX。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是 PHP,那还可以进一步优化。最重要的是,TinyMCE是一个根据LGPL license发布的自由...
asp.net上传图片自定义宽高想要多大就有多大
NULL 博文链接:https://kwj.iteye.com/blog/1019559