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的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术 ...
随机推荐
- 详解Android Activity---Activity的生命周期
转载注明来自: http://www.cnblogs.com/wujiancheng/ 一.正常情况下Activity的生命周期: Activity的生命周期大概可以归为三部分 整个的生命周期:o ...
- nodejs服务器部署教程二
这篇文章主要介绍如何在服务端跑vuejs的项目,如果上一篇教程你成功输出了hello world,那这一篇更简单 首先你要有一个已经能在本地跑的基于vuejs的项目,我就以之前写的仿饿了么的项目为例来 ...
- mybatis代理类Demo
前言 简单实现通过代理接口来实现对数据的查询demo,也是对mybatis的一个熟练.首先是编写接口代理. public interface IBookMapper { List<BookMod ...
- Swift 轻量级网络层设计
前言 普遍我们的网络层设计的时候直接是如下结构APIManager.post(url, parameter,completeHandle),服务器配置在APIManager.m文件中进行配置.这样一个 ...
- (转)VmWare下安装CentOS7图文安装教程
场景:克服安装Linux的恐惧,想装就装.在一篇博客中看到的,很有借鉴意义 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源 ...
- useradd新建用户和权限分配
场景:在搭建Ftp服务器时候,需要新建ftp用户,其实新建的ftp用户和Linux中root新建的用户一样,只是需要了解新建用户时候的相关规则. 1 解决新建用户缺少配置文件 1.1 新建用户 指定目 ...
- HDOJ2001-两点坐标的距离
Problem Description 输入两点坐标(X1,Y1),(X2,Y2),计算并输出两点间的距离. Input 输入数据有多组,每组占一行,由4个实数组成,分别表示x1,y1,x2,y2 ...
- 【CSS】伪类与伪元素
一伪类 语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感. 与 CSS类搭配使用 selector.class : pse ...
- 安装完ubuntu16.4.0之后要做的一些优化
1.删除libreoffice libreoffice虽然是开源的,但是Java写出来的office执行效率实在不敢恭维,装完系统后果断删掉 sudo apt-get remove libreoffi ...
- 【mock.js】后端不来过夜半,闲敲mock落灯花 ——南宋·赵师秀
mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正值产品上线的紧张时期,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了, 赵师秀非常生气 ...