文档章节

百度编辑器,图片上传模块

动物园长
 动物园长
发布于 2016/07/13 03:14
字数 447
阅读 90
收藏 1
点赞 0
评论 0

开始先引入百度编辑器的样式和js

当前用的百度编辑器版本为ueditor1_4_3_3-utf8-php,php版本

<!-- 百度编辑器 -->
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/tool/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/tool/ueditor/ueditor.all.min.js"></script>

然后var image  init配置图片上传,

用了editor.addListener('beforeinsertimage',fcuntion(t,args){。。。。进行了监听

当成功上传的时候,args[0].src即为第一个图片路径,

然后进行,上传的图片预览,和input[name=XX],路径的变更

ready,先初始化,在有上传的地方,生成编辑器。

<script type="text/javascript">
$(function(){
 	var image = {
            editor: null,
            //预先配置
            init: function(editorid, keyid) {
                var _editor = this.getEditor(editorid);
                	_editor.ready(function() {
	                    _editor.hide();//隐藏
	                    //触发beforeinsertimage事件时
		 				_editor.addListener('beforeinsertimage', function(t, args) {
		                    $("#" + keyid).parent().parent().find('img').attr('src',args[0].src);
		                    $("#" + keyid).parent().parent().find('input[type=hidden]').attr('src',args[0].src);
		                });                         
                });        
            },
            getEditor: function(editorid) {
                this.editor = UE.getEditor(editorid);
                return this.editor;
            },
            show: function(id) {
                var _editor = this.editor;
                $("#" + id).click(function() {
                    var image = _editor.getDialog("insertimage");
                    image.render();
                    image.open();
                });
            },
        };
        //加载页面后,处理,
		$(document).ready(function(){
		    $('.thumbnails').each(function(){
		    	var editorNum = $(this).attr('editor-num');
		    	var editorId = $(this).attr('editor-id');
				image.init(editorNum, editorId);
		 		image.show(editorId);
		    })
		});


})
</script>


下面为html代码段,为两个图片上传框

<script id="myeditor1"></script>
//编辑器生成

在ready处理时,生成编辑器

 

<div class="form-group">
	<label class="col-sm-2 control-label">缩略图1</label>
	<div class="col-sm-10 thumbnails" editor-num="myeditor1" editor-id="image1">
		<div class="row thumbnails-list">
		  <img src="__PUBLIC__/uploads/editor/image/2016-06-27/5770f0bd1c328.jpg">
		  <input type="hidden" name="thumb1" value="">
		</div>
		<script id="myeditor1"></script>
		<div class="row">
			<div type="button" class="btn btn-default upload-img" id="image1">上传</div>
		</div>
	</div>
</div>

<div class="form-group">
	<label class="col-sm-2 control-label">缩略图2</label>
	<div class="col-sm-10 thumbnails" editor-num="myeditor2" editor-id="image2">
		<div class="row thumbnails-list">
		  <img src="__PUBLIC__/uploads/editor/image/2016-06-27/5770f0bd1c328.jpg">
		  <input type="hidden" name="thumb2" value="">
		</div>
		<script id="myeditor2"></script>
		<div class="row">		
			<div type="button" class="btn btn-default upload-img" id="image2">上传</div>
		</div>
	</div>
</div>

 

 

© 著作权归作者所有

共有 人打赏支持
动物园长
粉丝 5
博文 16
码字总数 3203
作品 0
深圳
程序员
集成到 Django 的 Ueditor HTML 编辑器--DUEditor

DUEditor 是 Django 的 UEditor 插件。 本项目改造自DjangoUeditor,Ueditor HTML编辑器是百度开源的HTML编辑器。 本模块帮助在Django应用中集成百度Ueditor HTML编辑器,支持Python3,上传...

dhcn
2017/10/02
106
0
java代码编辑器 pdf文件预览 主流SSM 代码生成器 shrio redis websocket即时通讯

获取【下载地址】 QQ: 313596790 官网 http://www.fhadmin.org/ A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双向](单表、主表、明细表...

m17074358597
2017/11/09
0
0
e282486518/yii2admin

成型后的系统包括文章、商城、单页、广告、购物车、订单、标签、评论、推荐位、艾特@、消息、支付和回调、后台rbac、后台行为日志、数据可视化、配置管理等、前台用户中心、会员积分等功能。...

e282486518
2016/12/02
0
0
java 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎 网站源码

java 企业网站源码 前后台都有 静态模版引擎, 代码生成器大大提高开发效率 前台: 支持三套模版, 可以在后台切换 官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架...

likungs886
2017/07/14
0
0
yii2集成富文本编辑器redactor

作者:白狼 出处:http://www.manks.top/article/yii2_redactor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利...

白狼栈
2016/04/24
287
0
java sql编辑器 动态报表 数据库备份还原 quartz定时任务调度 自定义表单 java图片爬虫

A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双向](单表、主表、明细表、树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0...

m15115131476
2017/11/13
0
0
java代码编辑器 pdf文件预览 主流SSM 代码生成器 shrio redis websocket即时通讯

A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双向](单表、主表、明细表、树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0...

m15873835224
2017/11/11
0
0
java sql编辑器 动态报表 数据库备份还原 quartz定时任务调度 自定义表单 java图片爬虫

A代码编辑器,在线模版编辑,仿开发工具编辑器,pdf在线预览,文件转换编码 B 集成代码生成器 [正反双向](单表、主表、明细表、树形表,快速开发利器)+快速表单构建器 freemaker模版技术 ,0...

m14798021435
2017/11/12
0
0
Ueditor和CKeditor 两款编辑器的使用与配置

一丶ueditor 百度编辑器 1.官方文档,演示,下载地址:http://ueditor.baidu.com/website/index.html 2.百度编辑器的好:Editor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻...

postdep
2014/08/24
0
0
springmvc4 mybatis 整合 框架源码 bootstrap

获取【下载地址】 【免费支持更新】 三大数据库 mysql oracle sqlsever 更专业、更强悍、适合不同用户群体 【新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统】A 集成代码生...

a8868fhsss
2016/05/07
64
3

没有更多内容

加载失败,请刷新页面

加载更多

下一页

用axios.all处理并发请求

如果我们需用在两个接口同时完成后在执行一些逻辑,我们可以使用axios.all处理并发请求: function getUserAccount() { return axios.get('/user/12345');}function getUserPermissio...

JamesView
25分钟前
0
0
SpringCloud 微服务 (十六) 服务追踪 Zipkin

问题 在服务中,有一个接口,该A接口中又调用了其他服务的B、C、D接口,出现一个请求耗时大的问题,这时候并不知道该B、C、D接口中哪个接口造成的耗时量,然后比如确定C服务接口出现的耗时量大,但...

___大侠
36分钟前
0
0
Java面试基础篇——第八篇:抽象类与接口的区别

1.抽象类 抽象类:如果一个类中包含有抽象方法,或这个类使用abstract关键字修饰,则称这个类是抽象类。 抽象方法是什么呢?抽象方法就是指用abstract关键字修饰的方法。 需要注意的是:抽象...

developlee的潇洒人生
52分钟前
2
0
jsoup 相关资料

1.jsoup 2.Jsoup概述 3.jsoup入门 4.jsoup Java HTML Parser 1.11.3 API

IT追寻者
53分钟前
0
0
JPA @MappedSuperclass 注解说明

基于代码复用和模型分离的思想,在项目开发中使用JPA的@MappedSuperclass注解将实体类的多个属性分别封装到不同的非实体类中。 1.@MappedSuperclass注解只能标准在类上:@Target({java.lang....

海博1600
今天
0
0
【一】Scala Configuration 相关API

Play使用了 Typesafe config library,但是也提供了一个有着更多Scala高级特性的的 Configuration 封装。不熟悉Typesafe配置的开发者可以移步 configuration文件的语法和特性文档。 读取配置...

Landas
今天
3
0
使用cookie技术 记住账号

1. 效果 2. 实现过程 2.1 前端 将用户的选中传递给后台 这个参数的获取是 参考:https://my.oschina.net/springMVCAndspring/blog/1860498 // var rememberLogin = $("#rememberLoginId").i...

Lucky_Me
今天
1
0
《趣谈网络协议》02之网络分层的真实含义

一、提出问题 1.提出问题 当你听到什么二层设备、三层设备、四层 LB 和七层 LB 中层的时候,是否有点一头雾水,不知道这些所谓的层,对应的各种协议具体要做什么“工作”? 2.这四个问题你弄...

aibinxiao
今天
2
0
Python3学习日志二 Python中的集合set和字典dict

1.集合set 定义一个集合set 我们可以看到定义集合set有两种不同的形式,如果要定义一个空的集合set不能用{}而是要用set();另外,集合是无序的,而且set中的元素是不可重复的,如果你定义了一...

Mr_bullshit
今天
0
0
adb 操作指令详解

ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具,也是 Android 设备玩家的好玩具。 注:有部分命令的支持情况可能与 Android 系统版本及定制 ROM 的实现有关。...

孟飞阳
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部