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

为什么80%的码农都做不了架构师？>>>   

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

 

 

转载于:https://my.oschina.net/tcyx/blog/710855