TinyMCE 新增本地图片上传功能


Posted in Javascript onNovember 05, 2010

这样TinyMCE 就可以正常显示图片了。其实该功能属于普通HTML富文本控件基本功能了。现有需求将TinyMCE 扩展成可直接上传本地图片而后在文本区域显示图片。
实现思路:
使用Ajax 进行图片上传,此上传方式可以更友好的实现TinyMCE 的图片上传扩展,
具体方法可以参考我的上一篇 Jquery ajaxsubmit 上传图片。将Ajax上传图片集成到 TinyMCE 中,
主要是修改TinyMCE 目录下的 tinymce\jscripts\tiny_mce\plugins 的 advimage 插件。
了解TinyMCE的人应该知道 TinyMCE 类似 FireFox。 开发者是可以为其编写适合自己需求的插件。
所以只要稍稍修改 advimage 这个插件即可。我们为 advimage
目录下的image.htm 新增 jquery 图片异步提交代码:

<script type="text/javascript"> 
function AjaxUploadPic() { 
if ($("#flUpload").val() == "") { 
alert("请选择一个图片文件,再点击上传。"); 
return; 
} 
$('#myForm').ajaxSubmit({ 
beforeSubmit: function() { 
}, 
success: function(html, status) { 
var result = html.replace("<PRE>", ""); 
result = result.replace("</PRE>", ""); 
if (html.indexOf("格式") > 0) { 
alert(result); 
return; 
} 
$("#src").val(result); 
ImageDialog.showPreviewImage($("#src").val()) 
} 
}); 
} 
}); 
</script>

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

method="post" enctype="multipart/form-data" action=url 属性。
程序截图如下:
TinyMCE 新增本地图片上传功能

Javascript 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
jQuery 和 CSS 的文本特效插件集锦
Dec 12 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
jQuery示例收集
Nov 05 #Javascript
jquery 全局AJAX事件使用代码
Nov 05 #Javascript
Jquery ajaxsubmit上传图片实现代码
Nov 04 #Javascript
QUnit jQuery的TDD框架
Nov 04 #Javascript
基于jQuery的仿flash的广告轮播代码
Nov 04 #Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 #Javascript
关于document.cookie的使用javascript
Oct 29 #Javascript
You might like
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php中设置index.php文件为只读的方法
2013/02/06 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
100多行PHP代码实现socks5代理服务器[2]
2016/05/05 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
关于JavaScript的一些看法
2009/05/27 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
vue遍历对象中的数组取值示例
2019/11/07 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
详解Python中的__new__()方法的使用
2015/04/09 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
python matlab库简单用法讲解
2020/12/31 Python
python 制作网站小说下载器
2021/02/20 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
EJB timer的种类
2014/10/28 面试题
团日活动策划书
2014/02/01 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
关键在于落实心得体会
2014/09/03 职场文书
2015年信访工作总结
2015/04/07 职场文书
导游词之吉林花园山
2019/10/17 职场文书