集成Ueditor秀米

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

明确秀米接入的三种方式

使用 UEditor

集成秀米

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

媒体资源的转存处理

总结

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

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

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

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

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

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

吐槽完成，正文开始！

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

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

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

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

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

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

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

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

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

但是这里没有服务端！

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

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

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

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

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

具体的地方：

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

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

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

这么做有两个原因：

秀米不支持图片外链！

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

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

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

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

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

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

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

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

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

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

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

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