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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
javascript 短路法代码精简
Aug 20 Javascript
JS 实现导航栏悬停效果(续)
Sep 24 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
js实现网页定位导航功能
Mar 07 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
微信小程序实现日历小功能
Nov 18 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
Jan 19 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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/10/09 PHP
用header 发送cookie的php代码
2007/03/16 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
PHP图片加水印实现方法
2016/05/06 PHP
jquery 插件学习(一)
2012/08/06 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
JQuery each打印JS对象的方法
2013/11/13 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
原生js实现点击轮播切换图片
2020/02/11 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
Python 除法小技巧
2008/09/06 Python
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
python中如何设置代码自动提示
2020/07/15 Python
小学标准化建设汇报材料
2014/08/16 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
个人收入证明范本
2015/06/12 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技