Zblog博客利用UE编辑器实现独立图片上传组件(来源可风)

李洋博客

之前总有人反馈说主题设置的图片上传功能无法使用,不想就知道肯定是把UE编辑器关闭了,当初使用UE自带编辑器弄的图片上传功能是挺好用,但是后期开发者大佬们又上架了许多其他编辑器插件,并不弱于UE编辑器,所以一部分人可能关闭了UE启用了其他编辑器,这就导致主题图片上传功能会失效,前些天利用可风大佬的代码,实现了独立上传图片的功能,今天逛博客发现可风又一款图片上传代码,利用UE编辑器的接口,来实现免后端开发的的图片上传功能,只需要调用一个js就可以完成。

Zblog博客利用UE编辑器实现独立图片上传组件(来源可风) 第1张

大佬就是大佬哈,不废话,搬砖开始:

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());
    });
});

编辑主题include.php文件,在应用配置页面,引入上面的js,在需要上传图片的地方,使用下面的代码:

<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>

其中主要就是三个元素,文本框(ue-image-url)、上传按钮(ue-image-upload)、图片(ue-image),这三个得是同级元素,否则需要修改js代码。

点击上传按钮后会自动弹出UE编辑器的上传图片窗口,上传完成自动将图片的url填充到文本框中和应用到图片标签中。

手动输入图片的url,离开文本框焦点,自动显示图片,但是有一点需要注意,UE编辑器这个插件可以不启用,但是不能删除插件。

文章版权声明:除非注明,否则均为李洋个人博客原创文章,转载或复制请以超链接形式并注明出处。

发表评论

表情:
评论列表 (暂无评论,1837人围观)

还没有评论,来说两句吧...

取消
支付宝二维码
支付宝二维码
微信二维码