百度编辑器,图片上传模块
百度编辑器,图片上传模块
动物园长 发表于1年前
百度编辑器,图片上传模块
  • 发表于 1年前
  • 阅读 82
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: ueditor,百度编辑器,图片上传模块

开始先引入百度编辑器的样式和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>

 

 

共有 人打赏支持
粉丝 6
博文 15
码字总数 3203
×
动物园长
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: