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 相关文章推荐
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
JavaScript编写棋盘覆盖代码详解
Aug 28 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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
地摊中国 - 珍藏老照片
2020/08/18 杂记
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
PHP基础知识介绍
2013/09/17 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP实现递归的三种方法
2020/07/04 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
Python的语言类型(详解)
2017/06/24 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python 中值滤波,椒盐去噪,图片增强实例
2019/12/18 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
工艺员岗位职责
2014/02/11 职场文书
学雷锋的心得体会
2014/09/04 职场文书
计划生育责任书
2015/05/09 职场文书
2015年教研员工作总结
2015/05/26 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers