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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
围观tangram js库
Dec 28 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
jQuery中bind()方法用法实例
Jan 19 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
使用jQuery给input标签设置默认值
Jun 20 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 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
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
解javascript 混淆加密收藏
2009/01/16 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
AngularJS入门教程之表格实例详解
2016/07/27 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Python调用微信公众平台接口操作示例
2017/07/08 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
python中如何进行连乘计算
2020/05/28 Python
python实现KNN近邻算法
2020/12/30 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
司机辞职报告范文
2014/01/20 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
银行求职信范文
2019/05/13 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
解读Vue组件注册方式
2021/05/15 Vue.js