ueditor单独调用上传附件和图片的功能
javascript富文本编辑器使我们添加、编辑网站中的文章更加方便和容易。这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以像编辑word文档一样,方便地编辑网站中文章,常用于内容管理系统和博客系统等。
百度Ueditor富文本就是其中之一,个人觉得虽然体积大点,不兼容移动端外,其他功能都非常强大,特别是里面的多图上传!
当有些个性化页面需求时,难免会对她一些优化,已让她适合自己的内容,比如单独调用上传图片实现类似于以下页面时

部分代码如下
var _editor = UE.getEditor('Thumb');
_editor.ready(function () {
//设置编辑器不可用
//_editor.setDisabled();
//隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏
_editor.hide();
//侦听图片上传
_editor.addListener('beforeInsertImage', function (t, arg) {
//将地址赋值给相应的input,只去第一张图片的路径
$(".js_cover_preview").css('background-image', 'url(' + arg[0].src + ')');
//图片预览
$("#Thumb").val(arg[0].src);
$('.cover_preview_wrp').show();
});
});
$('.cover_preview_wrp').hover(function () {
$('.js_tip_mask').show();
}, function () {
$('.js_tip_mask').hide();
});
$('#js_appmsg_upload_cover').click(function () {
alert('123');
var myImage = _editor.getDialog("insertimage");
myImage.open();
});
部分参考 http://my.oschina.net/glenxu/blog/476720
ueditor单独调用上传附件和图片的功能的更多相关文章
- 上传附件(图片base64)封装方法
上传附件(图片base64)封装方法 php 上传附件,base64 项目中封装的接口: public function error($msg){ header("Content-type: ...
- Dynamics CRM 自定义上传附件的图片悬浮层显示
CRM中的附件是以流的形式保存在了数据库中,这样做的一个坏处是一旦系统运行时间久,附件上传的多了势必会导致数据库极速扩大,即影响系统的运行效率也对后期的迁移维护带来了不必要的麻烦.所以很多的客户都会要 ...
- jmeter 上传附件 如图片
1.要勾选 Use multipart/form-data for POST,否则request中将不包含上传的文件 2.MIME类型为application/octet-stream 图如下:对应 ...
- form表单上传附件的几种方法
问题描述:在网页开发过程中,当需要上传附件(图片,音频,视频等)时,常规方法是使用form表单进行提交,这里总结一下form表单提交的几种方法. 参考地址:http://www.cnblogs.com ...
- React项目中使用wangeditor以及扩展上传附件菜单
在最近的工作中需要用到富文本编辑器,结合项目的UI样式以及业务需求,选择了wangEditor.另外在使用的过程中发现wangEditor只有上传图片和视频的功能,没有上传文本附件的功能,所以需要对其 ...
- ueditor百度编辑器中,多图上传后,图片顺序乱掉的处理方法
上传后,图片的顺序和预期的不一致,需要修改ueditor的源码. 一.找到editor/dialogs/attachment/attachment.js文件 1.将_this.fileList.pus ...
- webservice跨服务器上传附件
最近一个项目,用到文件上传功能,本来简单地使用upload控件直接post到服务器保存,简单实现了.后来考虑到分布是部署,静态附件.图片等内容要单独服务器(命名为B服务器,一台,192.168.103 ...
- jeecms系统使用介绍——通过二次开发实现对word、pdf、txt等上传附件的全文检索
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/76912307 本文出自[我是干勾鱼的博客] 之前在文章<基于Java的门户 ...
- dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.
http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
随机推荐
- wampserver2.5局域网IP访问配置
wampserver2.5集成环境的安装和使用就不多说了,网上有很多教材.安装好后找到apache的配置文件httpd.conf.默认位置是: swap安装目录\wamp\bin\apache\apa ...
- C# 设计模式之空对象模式
最近看了不少的书籍和视频等相关资料,决定自己边学习边写一下个人对设计模式的理解,如果有不对的请大家多多指正. 今天先说说我个人觉得最简单的设计模式 -- [空对象模式] 空对象模式可以减少客户端对对象 ...
- Hibernate 实体映射类的状态值自动转换
经常会遇到有些字段在数据库只是一个 byte 值,但是取出数据后需要转换为真实的状态名称. 举个栗子:一个图书管理系统,书籍有一个属性 stat(借出状态),在库中只需要保存一个 0/1/2/3/4 ...
- linux自动化创建补丁
BUS #!/bin/sh #判断H5_BD_${BD_data}目录是否存在 BD_data=$(date +"%F") #当日打包多次的情况下,初始化补丁目录 if [ -d ...
- Objective-C AVPlayer播放视频的使用与封装
大致效果 不要介意.界面有点丑... 界面搭建 看下成员变量就知道我怎么搭建的了,这里我将video播放层的size作为参照量,对所有控件的size按照其video的size宽高进行比例缩放 @int ...
- Java内存区域与对象创建过程
一.java内存区域 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间,有的区域随着虚拟机进程的启动而存在,有的区域则 ...
- 一台机器启动多个tomcat简单配置
一台机器启动多个Tomcat只需要解决Tomcat端口冲突的问题. 相关配置:打开 Tomcat 目录下 conf \ server.xml 共修改三处端口,分别是: <Server port= ...
- Datatables快速入门开发--一款好用的JQuery表格插件
博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...
- Centos6.5中Nginx部署基于IP的虚拟…
Centos6.5 中Nginx 部署基于IP 的虚拟主机 王尚2014.11.18 一.介绍虚拟主机 虚拟主机是使用特殊的软硬件技术,把一台真实的物理电脑主机 分割成多个逻辑存储单元,每个单元都没有 ...
- 经验分享:极速化 CocoaPods
Cocopods 本身是一个优秀的 iOS 开发的包管理工具,涵盖了 7k+ 的开源组件,包管理库是托管在 Github.由于众所周知的原因它的速度日渐缓慢,有时会频繁报如下错误: 1 2 3 4 $ ...