Ueditor图片空间功能 Ueditor图库功能添加原理讲解

ueditor是百度开发的一款功能很强大的编辑器，不过现在已经不更新了，所以很多功能还是需要自己二次开发的，先说一下我本人的使用环境，我是使用了美化版本的neditor，因为它主要是把Ueditor的按钮图片全部改成了svg格式的，更加的美观。然后这个版本上传图片是没有图库功能的。但是我查看源文件发现其实是有图库功能的预留借口，所以按照它提供的接口自己根据自身的网站实际情况，做了二次开发，并且成功实现了图库的功能，效果图如下。

在线图片空间功能目前只有一个删除功能，另外添加图片功能做了一个vue组件，其实可以做的很细，但主要是自己用所以在UI上面就没下功夫，能用好用就行，丑一点就无所谓了，下面开始代码教学。

1、修改image.html文件

文件路径位于\Ueditor\dialogs\image 找到ID为tabhead的div

这里我使用的版本把这行代码给注释掉了，然后让它显示出来就可以了啊，span里的<Var id="lang_tab_online">是语言包，lang_tab_online的值是"在线管理"可以在\Ueditor\i18n\zh-cn\zh-cn.js修改。然后再id为tabbody的div里是相应功能的显示区域，如下图

我们可以根据情况来制作图库的样式表。image.html重点也就是这2个地方。

2、修改image.js文件

文件路径位于\Ueditor\dialogs\image,image.js整体结构如下

可以看到，代码写的还是比较清晰的，要实现在线图库功能，我们只需要修改OnlineImage的原型对象OnlineImage.prototype就可以了啊，这里需要修改的地方有2处getImageData(),pushData()前者是用来获取图片的，后者是把图片添加到界面上的。

getImageData()修改点

url变量是通过读取配置imageManagerActionName来获取我们的后台地址，imageManagerActionName是在neditor.config.js文件里设置，当然如果是自己使用的话可以直接在url这里赋予它实际的地址比如 var url="127.0.0.1/getimg"，然后重点来了，chrome一般会阻止jsonp跨域。如果不跨域的话建议dataType改成相应的格式，因为我后台返回的是json数据所以我把dataType改成了json。如果你一定要使用jsonp那么请自己搞定好跨域的问题。this.listIndex和this.listSize是返回给后台的信息，这个也可以根据自己的实际情况进行更改。

成功或则失败都通过pushData()把信息反馈给前端的界面上。我们可以根据自己后端返回的代码在onsuccess里把数据处理好在发送给pishData()处理

pishData()修改点

pushData重点我都标注好了，urlPrefix里的imageManagerUrlPrefix是地址前缀，在neditor.config.js设置，当然也可以根据实际情况把这个变量删掉也是可以的。item创建一个li，img创建一个图片 icon创建一个spn，它们组合后在前台还原的代码如下

<li>//由变量item创建
<img width="135" //图片由变量img创建
src="/src/images/200810282134007465.jpg?noCache=lcso25l4" 
_src="/src/images/200810282134007465.jpg" height="135" 
style="margin-left: 0px;">
<span class="icon"></span> //span由变量icon创建，作用请看文章开头的gif点中有个勾的背景
</li>

img.setAttribute设置图片的参数，需要的图片参数可以通过它进行设置，item.AppendChild和this.list.insertBefore负责插入内容。

3、删除图库项目功能添加

我的功能里面有一个删除图库地址的功能，这个功能是怎么实现的呢？我们修改pushData()，创建一个span，然后给它绑定一个click事件。请看我的代码

del = document.createElement('span');
domUtils.addClass(del, 'del');
del.title="删除该图库图片"
item.id="online"+list[i].Id
Let b=i
del.onclick=()=>{
    window.event.cancelBubble = true;
    _this.delimg(list[b].Id)
}
item.appendChild(del);

创建一个span 然后通过addclass给它设置一个样式。给每个li绑定一个id，然后绑定一个click事件，调用delimg函数，参数是图片在数据库里的id值。delimg代码如下。

delimg(e){
    if(confirm("确定删除该图片地址?")){
        $("#online"+e).remove()
        $.post("/DeleteImg/",{id:e,})
    }
}

特别注意：delimg一定要写在OnlineImage.prototype原型对象里面。

好了，其他的就是通过后台读取相应数据库里的图片数据，然后返回给前台，下图是我后台返回的数据格式

按照这个格式修改一下getImageData()里onsuccess，把数据传送给pushData()就可以了。

4、怎么增加图库里的图片

这个方法就挺多的，你可以单独制作一个模块来添加图库地址。也可以读取编辑器里的内容抓取我们上传的图片地址，然后选择需要的图片录入的数据库里，都行。大家可以根据自身的实际情况来设置这一块，我的方法如下图

通过抓取编辑器内的图片地址来选择需要录入到图库中的图片。好了，以上就是Ueditor图库功能的全过程，可谓是手把手教学，如果有需要开发前端的朋友，可以联系我们：微信/qq 24722