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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
js打造数组转json函数
Jan 14 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
js获取本日、本周、本月的时间代码
Feb 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
PHP 工厂模式使用方法
2010/05/18 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
根据json字符串生成Html的一种方式
2013/01/09 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
javascript实现多级联动下拉菜单的方法
2015/02/06 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
python同步windows和linux文件
2019/08/29 Python
Python中关于浮点数的冷知识
2019/09/22 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
优秀毕业生推荐信
2013/11/02 职场文书
园林资料员岗位职责
2013/12/30 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
企业总经理岗位职责
2014/02/13 职场文书
企业管理标语
2014/06/10 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
检举信的写法
2019/04/10 职场文书
使用Python开发贪吃蛇游戏 SnakeGame
2022/04/30 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers