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 Event学习第六章 事件的访问
Feb 07 Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
jquery checkbox的相关操作总结
Oct 17 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
node.js通过url读取文件
Oct 16 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 Javascript
原生JS实现pc端轮播图效果
Dec 21 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/10/03 PHP
php简单的会话类代码
2011/08/08 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
2015/09/27 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
解决JavaScript layui 下拉框不显示的问题
2018/08/14 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
bootstrap中的导航条实例代码详解
2019/05/20 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
2019/09/25 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
python爬虫之百度API调用方法
2017/06/11 Python
python 筛选数据集中列中value长度大于20的数据集方法
2018/06/14 Python
在PyCharm中控制台输出日志分层级分颜色显示的方法
2019/07/11 Python
Django结合ajax进行页面实时更新的例子
2019/08/12 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Python如何定义有可选参数的元类
2020/07/31 Python
受伤赔偿协议书
2014/09/24 职场文书
情人节活动总结范文
2015/02/05 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书