公司App项目中有一个“新闻动态”模块要开发，其中编辑功能采用集成百度编辑器来实现。官方有文档，网上有实例，但大多是前后端不分离的那种，这对于时下前后端分离的开发方式来说可参考性不强，现把集成方法记录下来，可供有类似需求的朋友们参考。
一、前后端环境
前端项目：Vue2.0 （vue-element-admin)
后端项目：.net core3.1 Web API
二、后端实现步骤
1. 创建asp.net core3.1项目（略）
2. Nuget搜索安装UEditorNetCore
3. Startup.cs中添加：services.AddUEditorService();
4. 添加API控制器
[Route("api/[controller]")]
public class UEditorController : Controller
{
private UEditorService ue;
public UEditorController(UEditorService ue)
{
this.ue = ue;
}
public void Do()
{
ue.DoAction(HttpContext);
}
}
5. 前后端通信相关的配置：在与appsettings.json同级的目录中添加config.json文件，这个文件是从这里下载。然后进行以下配置：
"imageUrlPrefix": "/", /* 图片访问路径前缀 */
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
6. 将后端项目用IIS发布，这个比较简单，不作叙述。
说明：
a. 如果不需要在编辑器中上传文件、图片则可不用后端的配置
b. 测试后端是否配置成功，可以在浏览器中输入：http://127.0.0.1:8031/api/UEditor?action=config 若能正常返回config内容就说明配置好了。其中IP地址请取服务端的地址
三、前端实现步骤
1. 在前端vue项目中安装：cnpm i vue-ueditor-wrap
2. 下载vue-ueditor-wrap：选择utf8-net.zip 解压后改名为ueditor, 然后复制到public文件夹下，注意ueditor下的net文件夹删除不要
3. 修改 ueditor 文件中的 ueditor.config.js 配置: window.UEDITOR_HOME_URL = '/ueditor/'
4. 在vue组件内注册使用
新增一个vue文件，引入编辑器. 因vue-ueditor-wrap可以实现双向绑定，就象使用input组件一样容易。大家具体可以参照以下截图。
这里的配置比较关键，其中serverUrl的配置要根据后端控制器的路由来设置，比如上面后端控制器路由为api, 控制器为UEditor, 所以serverUrl设置为/api/UEditor。这里配置成功后就可以实现多图上传了，也没有出现跨域问题。整个过程需要手写代码的地方很少，也不需要自己去实现什么上传接口，只要一步步厘清就行。
以上步骤就完成了在前后端分离的项目中集成了百度编辑器。至于怎样保存到数据库，如何提供访问接口不属于本文需要讲述的内容，就此略去。
最后贴个简易效果图：
roy yi
2021-09-02
后记
发布到阿里云服务器后若出现“在百度编辑器中可以正常上传图片，但图片不能显示”的问题。可以用nginx轻松解决：
location /upload/image {
proxy_pass http://localhost:80; # 将以 /upload/image 开头的请求代理到 proxy_pass指定的路径上(百度编辑器显示图片）
}
网友评论