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判断checkbox是否选中的3种方法
Aug 12 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
收集的php编写大型网站问题集
2007/03/06 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
Vue实现穿梭框效果
2020/09/30 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
语文教学感言
2014/02/06 职场文书
百年校庆节目主持词
2014/03/27 职场文书
导师就业推荐信范文
2014/05/22 职场文书
高三英语教学计划
2015/01/23 职场文书
龙门石窟导游词
2015/02/02 职场文书
2015年清明节活动总结
2015/02/09 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
python代码实现扫码关注公众号登录的实战
2021/11/01 Python
讲解MySQL增删改操作
2022/05/06 MySQL