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 继承详解(一)
Jul 13 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
JQuery获取鼠标进入和离开容器的方向
Dec 29 Javascript
boostrapTable的refresh和refreshOptions区别浅析
Jan 22 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JS+DIV实现拖动效果
Feb 11 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
js实现3D旋转相册
Aug 02 Javascript
微信小程序实现聊天室
Aug 21 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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/03 冲泡冲煮
php中去除所有js,html,css代码
2010/10/12 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
JavaScript控制浏览器全屏显示简单示例
2018/07/05 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
[52:03]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第三场 1月31日
2021/03/11 DOTA
Python单例模式实例详解
2017/03/01 Python
python编写Logistic逻辑回归
2020/12/30 Python
如何通过python实现全排列
2020/02/11 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
学校对教师的评语
2014/04/28 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
客房领班岗位职责
2015/02/11 职场文书
行政处罚告知书
2015/07/01 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
JavaScript原型链详解
2021/11/07 Javascript
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android
python计算列表元素与乘积详情
2022/08/05 Python