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 相关文章推荐
基于jquery的图片懒加载js
Jun 30 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
require.js中的define函数详解
Jul 10 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
layui使用label标签的方法
Sep 14 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
Jul 13 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数据饼图效果实现代码
2011/11/23 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
漂亮的提示信息(带箭头)
2007/03/21 Javascript
类之Prototype.js学习
2007/06/13 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
使用Python编写vim插件的简单示例
2015/04/17 Python
详解Django通用视图中的函数包装
2015/07/21 Python
使用python加密自己的密码
2015/08/04 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python实现自定义函数的5种常见形式分析
2018/06/16 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
用Python写一个自动木马程序
2019/09/17 Python
Python上下文管理器全实例详解
2019/11/12 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
零基础学python应该从哪里入手
2020/08/11 Python
QA工程师岗位职责
2013/11/20 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
python中print格式化输出的问题
2021/04/16 Python
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Python matplotlib多个子图绘制整合
2022/04/13 Python
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript