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 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
javascript对象之内置对象Math使用方法
Apr 16 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
Angular.js中$apply()和$digest()的深入理解
Oct 13 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
详解React 条件渲染
Jul 08 Javascript
js实现简单商品筛选功能
Feb 02 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
世界上第一台立体声收音机
2021/03/01 无线电
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
让ThinkPHP的模板引擎达到最佳效率的方法详解
2017/03/14 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
[02:24]DOTA2亚洲邀请赛 NAVI战队出场宣传片
2015/02/07 DOTA
Python模块学习 datetime介绍
2012/08/27 Python
Python生成验证码实例
2014/08/21 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
几道PHP的面试题
2012/05/19 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
个人自我鉴定写法
2013/11/30 职场文书
店长助理岗位职责
2013/12/13 职场文书
计算机专业学生求职信分享
2013/12/15 职场文书
教师节商场活动方案
2014/02/13 职场文书
《将心比心》教学反思
2014/04/08 职场文书
大型营销活动计划书
2014/04/28 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
打架检讨书
2015/01/27 职场文书
个人优缺点总结
2015/02/28 职场文书
初中政教处工作总结
2015/08/12 职场文书