zblog如何调用百度Ueditor编辑器的上传图片功能

今天做zblogphp的后台主题配置功能时，后台的幻灯片管理功能需要用到上传图片，正好整理一下解决方法：

需要达到的效果如下：

点击上传图片按钮调用百度编辑器上传图片功能，上传完成点击“确定”按钮后上图中的输入框内自动填充该图片的地址路径。

一、“上传图片”按钮并非按钮，而是一个strong标签。

<th class="uploadimg">
    <input type="text" class="uplod_img w-75" name="img">
    <strong>上传图片</strong>
</th>

二、该按钮的样式：

.uplod_img {vertical-align: middle;}
.uploadimg strong {cursor:pointer; background:#3A6EA5; width:15%; text-align:center; padding:3px 0; color:#fff; display:block; float:right;vertical-align: middle;}

三、调用百度编辑器：

if ($zbp->CheckPlugin('UEditor')) {    //判断zblog当前是否使用了百度编辑器
    echo '<script type="text/javascript" src="'.$zbp->host.'zb_users/plugin/UEditor/ueditor.config.php"></script>';
    echo '<script type="text/javascript" src="'.$zbp->host.'zb_users/plugin/UEditor/ueditor.all.min.js"></script>';
    echo "<script type=\"text/javascript\" src=\"style/js/lib.upload.js\"></script>";    //我们的调用代码写在这里
}

四、lib.upload.js的内容：

var container = document.createElement('script');
$(container).attr('type','text/plain').attr('id','img_editor');
$("body").append(container);
_editor = UE.getEditor('img_editor');
_editor.ready(function () {
	_editor.hide();
	$(".uploadimg strong").click(function(){		
		object = $(this).parent().find('.uplod_img');
		_editor.getDialog("insertimage").open();
		_editor.addListener('beforeInsertImage', function (t, arg) {
			object.attr("value", arg[0].src);
		});
	});
});

完成。