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创建类/对象的几种方式概述及实例
May 06 Javascript
JavaScript获取元素尺寸和大小操作总结
Feb 27 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
JS简单实现移动端日历功能示例
Dec 28 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
对angular 监控数据模型变化的事件方法$watch详解
Oct 09 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
浅析Vue 中的 render 函数
Feb 28 Javascript
原生js实现分页效果
Sep 23 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JSONP 跨域共享信息
2012/08/16 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
SVG描边动画
2017/02/23 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
2018/07/26 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
js实现碰撞检测
2021/01/29 Javascript
Python 元类使用说明
2009/12/18 Python
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
django实现用户注册实例讲解
2019/10/30 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
纬创Java面试题笔试题
2014/10/02 面试题
生产厂长岗位职责
2014/02/21 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
计算机专业自荐信
2014/05/24 职场文书
机械专业求职信范文
2014/07/15 职场文书
自我介绍演讲稿范文
2014/08/21 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
文员岗位职责
2015/02/04 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
python设置 matplotlib 正确显示中文的四种方式
2021/05/10 Python
vue3获取当前路由地址
2022/02/18 Vue.js