文档章节

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

动物园长
 动物园长
发布于 2016/07/13 03:14
字数 447
阅读 97
收藏 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>

 

 

© 著作权归作者所有

共有 人打赏支持
上一篇: serialize方法
下一篇: 前端代码高亮
动物园长
粉丝 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

没有更多内容

加载失败,请刷新页面

加载更多

存储过程知识点收集

记录下,以后要常用的问题 1、获取刚刚插入数据产生的ID SCOPE_IDENTITY 返回当前作用域的插入后产生的一条ID @@IDENTITY 返回当前表的最后一条ID

轻轻的往前走
19分钟前
1
0
elixir keyword和map的区别

┌──────────────┬────────────┬───────────────────────┐ │ Keyword List │ Map/Struct │ HashDict (deprec...

wmzsonic
22分钟前
2
0
解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐

<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-show-columns="true" data-fixed-columns="true" data-fixed-number="3"></table> 含有dat......

tianyawhl
24分钟前
1
0
ES6 系列之 defineProperty 与 proxy

摘要: ## 前言 我们或多或少都听过“数据绑定”这个词,“数据绑定”的关键在于监听数据的变化,可是对于这样一个对象:`var obj = {value: 1}`,我们该怎么知道 obj 发生了改变呢? ## def...

阿里云官方博客
29分钟前
1
0
美团点评携手 PingCAP 开启新一代数据库深度实践之旅(9000 字长文 / 真实“踩坑”经历)

一、背景和现状 在美团,基于 MySQL 构建的传统关系型数据库服务已经难于支撑公司业务的爆发式增长,促使我们去探索更合理的数据存储方案和实践新的运维方式。随着近一两年来分布式数据库大放...

TiDB
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部