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 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
Ajax+Json 级联菜单实现代码
2009/10/27 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
layui分页效果实现代码
2017/05/19 Javascript
Bootstrap Table使用整理(一)
2017/06/09 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
pymssql数据库操作MSSQL2005实例分析
2015/05/25 Python
Python选课系统开发程序
2016/09/02 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
生产内勤岗位职责
2013/12/07 职场文书
微电影大赛策划方案
2014/06/05 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
长江三峡导游词
2015/01/31 职场文书
2015年社区文体活动总结
2015/03/25 职场文书