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 相关文章推荐
理解JavaScript的caller,callee,call,apply
Apr 28 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
May 18 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 Javascript
vue router 动态路由清除方式
May 25 Vue.js
javascript进阶篇深拷贝实现的四种方式
Jul 07 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与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
Symfony查询方法实例小结
2017/06/28 PHP
关于PHP中协程和阻塞的一些理解与思考
2017/08/11 PHP
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
Python迭代用法实例教程
2014/09/08 Python
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python SocketServer源码深入解读
2019/09/17 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
人事专员的岗位职责
2014/03/01 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
发布会邀请函
2015/01/31 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL