Just My Socks中文教程网
umeditor，简称ue，是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线富文本编辑器。 ue的主要特点就是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式， 以达到更快的加载速度和零加载失败率。z-blog默认的编辑器就是百度的ue编辑器，功能是非常强大，接口也丰富。
我们在开发插件或者主题的时候，经常会需要图片上传功能，自己开发耗时耗力，而且还要前后端兼顾。其实我们可以利用ue编辑器的接口，来实现免后端开发的的图片上传功能，只需要调用一个js就可以完成。
代码如下：
PHP
var ueditorConfig = document.createElement('script');$(ueditorConfig).attr('src',bloghost + 'zb_users/plugin/UEditor/ueditor.config.php');$("body").append(ueditorConfig);var ueditorAll = document.createElement('script');$(ueditorAll).attr('src',bloghost + 'zb_users/plugin/UEditor/ueditor.all.min.js');$("body").append(ueditorAll);var container = document.createElement('script');$(container).attr('type','text/plain').attr('id','img_editor').css('display','none');$("body").append(container);ue_image = UE.getEditor('img_editor');ue_image.ready(functiON(){$(document).on("click",".ue-image-upload",function(){input = $(this).siblings('input.ue-image-url');img = $(this).siblings('img.ue-image');ue_image.getDialog("insertimage").open();ue_image.addListener('beforeInsertImage', function (t, arg) {input.attr("value", arg[0].src);img.attr('src',arg[0].src); });});$(document).on("blur","input.ue-image-url",function(){ if ($(this).val()) $(this).siblings('img.ue-image').attr('src',$(this).val()); }); });在你的应用配置页面，引入上面的js，在需要上传图片的地方，使用下面的代码：
PHP
<p><input name="meta_thumb" type="text" class="ue-image-url" value="" placeholder="输入图片URL或者上传图片"><input class="ue-image-upload" type="button" value="上传图片"><img src="" class="ue-image"></p>
主要就是三个元素，文本框、上传按钮、图片（这三个得是同级元素，否则需要修改js）。点击上传按钮后会自动弹出ue编辑器的上传图片窗口，上传完成自动将图片的url填充到文本框中和应用到图片标签中。
手动输入图片的url，离开文本框焦点，自动显示图片。有一点需要注意，ue编辑器这个插件可以不启用，但是不能删除。
未经允许不得转载：Just My Socks中文教程网 » Z-Blog利用ue编辑器的接口来实现免后端开发的的独立图片上传组件
