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下string.format函数补充
Aug 24 Javascript
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
JS显示日历和天气的方法
Mar 01 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
详解JavaScript中this关键字的用法
May 26 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 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
上传多个文件的PHP脚本
2006/11/26 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
php二维码生成
2015/10/19 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
Vue.js报错Failed to resolve filter问题的解决方法
2016/05/25 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
DOM事件探秘篇
2017/02/15 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
从0搭建vue-cli4脚手架
2020/06/17 Javascript
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
python中reduce()函数的使用方法示例
2017/09/29 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
外贸英语毕业生自荐信
2013/11/14 职场文书
大学同学会活动方案
2014/08/20 职场文书
法律讲堂观后感
2015/06/11 职场文书
《花钟》教学反思
2016/02/17 职场文书
《桂花雨》教学反思
2016/02/19 职场文书