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 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
js实现将json数组显示前台table中
Jan 10 Javascript
jquery实现轮播图效果
Feb 13 Javascript
VUE长按事件需求详解
Oct 18 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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将数据库中的电话号码读取出来并生成图片
2008/08/31 PHP
PHP的PSR规范中文版
2013/09/28 PHP
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
php下载文件,添加响应头的简单实例
2016/09/22 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
JS的replace方法介绍
2012/10/20 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
JavaScript闭包和回调详解
2017/08/09 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
nodejs之koa2请求示例(GET,POST)
2018/08/07 NodeJs
JS中的函数与对象的创建方式
2019/05/12 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
python 以16进制打印输出的方法
2018/07/09 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
英语教育专业自荐信
2014/05/29 职场文书
摄影展策划方案
2014/06/02 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
2014年村委会工作总结
2014/11/24 职场文书
Python图像处理之图像拼接
2021/04/28 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery