集成Ueditor秀米

集成：UEditor + 秀米

本文主要介绍 百度编辑器（UEditor）和 秀米的集成经验。主要有：

• 明确秀米接入的三种方式

• 使用 UEditor

• 集成秀米

• 关于图片，视屏等，媒体资源的说明

• 媒体资源的转存处理

• 总结

步骤一、明确秀米接入的三种方式

首先看一下秀米接入的方式：https://r.xiumi.us/board/v5/2a5va/16516964

所以根据项目的需求不同选用不同的接入方式。

这里我们选择方案三，也是写这篇博客的主要原因！

所以接下来介绍引入 UEditor 的流程。

步骤二、使用 UEditor

重新使用 UEditor 这种上古产物，我内心是拒绝的。
网上找了很多资料都已经过时了，而且官方文档也很久没有更新的样子。连 Github 仓库都成了只读模式。
这个插件真的很老了！！！

建议直接下载 这里的代码：https://github.com/184455/abner-xiumi-ueditor，【步骤二】，【步骤三】都可以直接跳过！

吐槽完成，正文开始！

因为安全的原因，UEditor 的官方示例已经停止下载了。要想拿到相对应的代码，我们只能：

1. 去UEditor 的官方 Github 仓库下载源码：https://github.com/fex-team/ueditor

2. 接着，进入刚刚下载的文件，安装依赖：npm install

3. 最后需要全局安装 grunt：npm install -g grunt. 苹果mac用户：sudo npm install -g grunt

4. 所有工作都完成以后，执行打包构建：grunt default

5. 执行完脚本以后，在项目下，你就得了一个打包好的代码，可以直接拿去部署，既可看到效果：

这样以后，就说明你有了可以部署的代码了！

步骤三、集成秀米

建议直接下载 这里的代码：https://github.com/184455/abner-xiumi-ueditor，【步骤二】，【步骤三】都可以直接跳过！

先根据这里把文件下载好，然后放到对应的文件夹。

但是这里没有服务端！

步骤四、关于图片，视屏等，媒体资源的说明

经过前面三个步骤。或者你直接下载步骤三的代码，你已经能够把秀米跑起来了，但是这个时候是没有配置好服务端的。

我有想过去配置文件上传的后端，但是研究发现，UEditor 这套代码真的是太老了！！！

根本无法支持现在主流的前后端分离，数据通过 Restful 的数据交互方式！

所以走到这里我放弃了配置文件上传的功能，把所有希望都寄托在秀米上。毕竟秀米才是罪魁祸首，要不是秀米，我根本不可能会使用 UEditor 这一套过时的技术栈！

最后，我直接把编辑器里面需要上传相关的功能：视屏上传 音乐上传 涂鸦 图片 等等，需要上传的功能全部注释了！！

具体的地方：

加载后端配置的行为也不需要了！

步骤五、媒体资源的转存处理

前面说了，把编辑默认上传的功能取消了，那我们的图片等资源怎么办？

我在我项目的做法就是：转存！

这么做有两个原因：

1. 秀米不支持图片外链！

2. 我们自己的系统需要存编辑内容的数据，做自己的发布。

关于图片转存，因为涉及公司代码的业务逻辑。我只会说我怎么做。步骤：

1. 获取秀米编辑器生成的内容。这里说明一下，秀米编辑器编辑内容后，会插入 UEditor 里面。通常，直接调：UE.getEditor(‘editor’).getContent() 方法就能拿到编辑器的 HTML 代码；

2. 拿到内容以后先别着急把数据保存到后台服务器，先通过正则，把指向秀米域名的图片，音频，视频 等资源匹配出来；

3. 然后通过请求，把这些资源下载下来，然后同步到自己的服务器上；

4. 最后把秀米的链接，替换成自己链接；

5. 保存编辑的文件。完成编辑操作。

关于怎么把图片下载下来，可以参考我的这篇文章：
跨域，跨限制下载图片方案: https://blog.csdn.net/six_six_six_666/article/details/117674905

六、总结

UEditor 这一套技术栈真的太老了。

而且官方也已经停止了维护，如果不是不得已，建议大家不用使用。

关于富文本编辑器，现在 有很多解决方案，不要拘泥于这个！

然后，建议你直接下载 这里的代码：https://github.com/184455/abner-xiumi-ueditor。省去一些研究的时间。