文档章节

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

动物园长
 动物园长
发布于 2016/07/13 03:14
字数 447
阅读 92
收藏 1

开始先引入百度编辑器的样式和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
yii2集成富文本编辑器redactor

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

白狼栈
2016/04/24
287
0
java 在线编辑模版 代码编辑器 兼容手机平板PC freemaker 静态引擎 网站源码

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

likungs886
2017/07/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

docker update:更新一个或多个容器的配置

更新容器的配置 docker update:更新一个或多个容器的配置。 具体内容请访问:https://docs.docker.com/engine/reference/commandline/update/#options 语法:docker update [OPTIONS] CONTA...

lwenhao
44分钟前
1
0
unload事件

unload事件不触发的原因分析 1.代码位置不对,应该优先加载,不能放到回调函数中 2.浏览器不支持 3.最可能的原因,unload事件中触发的函数是一个异步执行的函数,浏览器是不允许在窗口关闭之后在...

狮子狗
56分钟前
1
0
DbForge Schema Compare for MySQL入门教程:如何连接到数据库

【dbForge Schema Compare for MySQL下载】 要创建连接: 1. 在“Connection” 工具栏上单击“New Connection”按钮 。 2. 在“Host” 框中输入主机名。 3. 在“Port” 框中输入端口信息。默...

Miss_Hello_World
59分钟前
1
0
spring中事务的应用

spring中事务管理的两种方式 编程式事务使用TransactionTemplate或者直接使用底层的PlatformTransactionManager。对于编程式事务管理,spring推荐使用TransactionTemplate。 声明式事务是建立...

狂奔的熊二
今天
0
0
公众号关联微信小程序

公众号关联小程序发送关联通知,对于推广小程序有着很大的帮助。所以问题来了,怎么做到在公众号关联小程序发送关联通知呢? 一:开发中遇到的问题 之前在开发过程中发现,公众号已经关联小程...

Code辉
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部