Vue项目玩转Ueditor（百度富文本编辑器），解决图片需要上传服务器的问题，将图片转存base64字符串。

1. 场景描述

最近在做一个网站，里面有发布文章的项需上功能。需要使用到富文本编辑器来发布文章。目玩

缺点：前端访问一次文章需要发送两次请求，增加了服务器的转U转存字符访问量。
优点：数据存储在服务器，数据库所占空间变小，访问速率得到改善。百度本编
总结：优点略大于缺点

本文内容：仅针对于ueditor部分内容进行介绍。富文实在是辑器解决因为网上的博文介绍的都是云里雾里的，不太适合新手。

2. 问题描述

1.采用哪个富文本编辑器？

2.单纯的图片题将图片文本排版的话基本所有的富文本编辑器都合适，但是需要图片在编辑器内能拖拽，缩放等，要求能插入代码，且代码高亮。要求能插入附件，插入链接等。传服串这就降低了可选择的项需上纬度。最终的目玩问题：图片如何存？

3.较为流行的几个富文本编辑器比较

声明：此部分内容大多来源于网络。

3.1、转U转存字符wangEditor

wangEditor官网

上述是百度本编网上的描述。
小编也集成过WangEditor，不得不说，这款编辑器是富文真的香。作为开发者而言，我是辑器解决真的很喜欢这款编辑器。但是图片题将图片甲方觉得这个编辑器功能太简单了。所以就没能排上用场。
下面是小编对wangEditor的一些看法。
1.集成简单，三行代码即可集成到你的开发环境之中。

2.图片可以设置为base64存储，真的很适合项目使用场景

这款编辑器的图片默认为base64存储，倒是挺好使的。但是不能对图片进行拖拽和缩放，这个就很难受。
3.Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费
使用typescript开发的，这个就比较舒服。而且，这款编辑器现在还在更新，你也可以联系得到开发者，与开发者进行交流。
4.可以自定义皮肤
这个功能是真的蛮贴心的，但是对于新手来说，就有点不太适合。
从编辑器中获取的 html 代码是不包含任何样式的纯 html如果显示的时候需要对其中的 table code bloc kquote 等标签进行自定义样式（这样既可实现多皮肤功能），下面提供了编辑器中使用的样式供参考。这个是官网的原话。我在测试的时候就出现表格保存后没有边框之类的样式。我建议应该默认一套样式，用户想要实现多皮肤功能的话样式覆盖就好了。
丰富的api支持
wangEditorApi
有人维护的就是不一样，这api真的是爱了，真的挺齐全的。对于开发者来说太友好了。
截图展示

真的是看起来很简洁，很清新的了。小编最喜欢这个。

3.2、百度的ueditor

网评：

小编的看法：

这个界面还是很像word的，特别受各种甲方的喜欢。虽然官方不再更新版本了，但是其现有的功能还能够再战几年。代码底层也是随便你改，只要你改的动。

Ueditor还是比较受欢迎的，可惜的是上传图片到服务器之类的需要配置在本地搭建php环境，这个我就笑了呀。于是我就得对上传图片这个功能动刀子了。诶，瞧我这暴脾气。

优点：
1.图片有拖拽，缩放功能。这个满足需求。
2.功能很丰富，甲方强行加分。
3.小编可以把上传图片到服务器改为base64字符串存储

3.3、KindEditor

网评：

小编的看法：
要想了解他，肯定得先去使用呀。当然这个也是被我拿来做demo研究的对象。

总结：
功能和ueditor类似，但是可以用Ueditor取代。所以就没有采用这个。

3.4、bootstrap-wysiwyg

网评：

小编没有去研究这个玩意，不多做评论

3.5、QuillEditor

Quill是一个很流行的富文本编辑器，github上star大约21k
这个小编亲自研究过，所以谈谈看法

可以说也是很简洁了，就是拓展那些功能有点烦。

唯一比较喜欢的地方，图片是默认用base64方式存储。功能还不够强大，但是还是比较可以的了。

6、CKEditor
网评：

这个小编也写过demo。具体来说是不太喜欢。如果有想尝试的，可以去看这篇博文
ckeditor使用教程
这里面讲得还挺详细，就是坑也有点多。

4.Ueditor的集成

言归正传，之所以选择Ueditor，是因为其庞大的功能支持。算是比较靠谱的一款富文本编辑器了。如果是我自己的项目，我会考虑采用wangEditor。
官网地址
大致分为以下步骤（传统的模式）

然后新手就会发现，除了下载源码之外，另外两步都无法解决。
所以，小编换了一种方式来为大家提供编译后的源码。

链接：ueditor emo下载
提取码：p0oo

进入百度网盘，下载ueditor的demo。
接下后找到里面的static文件夹。

这里面存放的已经是一个可用的ueditor插件了。
我们复制这个目录内的ueditor文件夹，粘贴到自己的项目目录的static目录下。没有的可以自己创建一个。


如上图，我复制过去之后重命名为ue。里面的文件如下图所示。

创建Ueditor.vue，封装富文本编辑器组件

在组件中引入ueditor相关的js文件。然后就是初始化插件。
在需要的页面中引入

完整的页面引用代码

如果出现如下错误：

并且页面像下面这种情况的话

第一个是错误后台配置错误，先不用管。
第二个是ueditor的部分js和css被重定向了。或者是找不着了。这就很气人了呀。

首先，排查自己的开发环境。build.js。或者config/index.js中的publicPath和assetPublicPath是否正确。要确保上图所示的几个请求能访问到而不是被重定向，解决了这个问题，ueditor就出来了。

注意，网上有的人说把webpack.dev.config.js中的下面几行代码注释掉。这里小编提醒大家，千万千万不要注释，注释了你会发现无论怎么改，都一个样。

这个是集成进来的效果。

5.插入base64图片

这里我们要做的是插入base64而不是修改之前的上传图片部分的代码。本来最佳方案是新增一个按钮，点击按钮出现弹窗，在弹窗的页面将插入的图片拼接到editor。但是小编最后失败了，就很气。得找机会再试试。
下图是小编尝试后的效果图。

诶 一把辛酸泪。希望有大佬看的这个文章能帮忙指点一下咯。

接着我们的替代方案。找一个有弹窗的没用的功能来修改源码。妈耶，真刺激（实属无奈之举）。
由于项目需求，文章内不需要用到插入iframe这个功能，且插入iframe是一个弹窗呀。功能比较少，适合动刀子。我尝试过修改插入图片部分的弹窗，代码量多了不好改。这里我就贴修改好的代码啦。文件路径在

当然除了修改这一个弹窗之外，我们还得修改其他地方。因为这一句

我们只是提交了一个插入自定义图片的指令。我们还需要去执行这个指令，把图片插入编辑器。
我们需要在ueditor.all.js中插入代码。大概插入在11630行

和

平级。

我想这一步不会没人看不懂吧。由于是修改插入iframe的弹窗，其按钮之类的都已被定义过。所以只需要修改这两个地方就好了。

实现效果：点击插入iframe按钮，弹出上传图片的弹窗。


选择图片加入到了编辑器中，亲测图片拖拽，缩放等功能正常。

当然不可能就这么轻易结束，ueditor是默认不支持base64字符显示图片的。所以我们还需要接着修改源码。
在ueditor.all.js中大概10000行左右，删除掉这个case，即图中所示部分。

这时重新运行程序，上传本地图片到编辑器后就可以显示出来了。
切换至html部分就可以看到，图片的src不是一个url链接，而是base64字符串。

这样就达成我们想要的效果了。

转成base64字符串存储的有点：
1.更换服务器和域名对文章中的图片不会有影响
2.不容易出现图片丢失，文章在，图片就在。
3.更换服务器简单。

很赞哦!（4）