公司App項(xiàng)目中有一個(gè)“新聞動(dòng)態(tài)”模塊要開(kāi)發(fā)，其中編輯功能采用集成百度編輯器來(lái)實(shí)現(xiàn)睬棚。官方有文檔抑党，網(wǎng)上有實(shí)例撵摆，但大多是前后端不分離的那種特铝，這對(duì)于時(shí)下前后端分離的開(kāi)發(fā)方式來(lái)說(shuō)可參考性不強(qiáng)，現(xiàn)把集成方法記錄下來(lái)鳄逾，可供有類似需求的朋友們參考灵莲。
一、前后端環(huán)境
前端項(xiàng)目：Vue2.0? ? （vue-element-admin)
后端項(xiàng)目：.net core3.1 Web API
二、后端實(shí)現(xiàn)步驟
1. 創(chuàng)建asp.net core3.1項(xiàng)目（略）
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. 前后端通信相關(guān)的配置：在與appsettings.json同級(jí)的目錄中添加config.json文件线欲，這個(gè)文件是從這里下載汽摹。然后進(jìn)行以下配置：
"imageUrlPrefix": "/", /* 圖片訪問(wèn)路徑前綴 */
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
6. 將后端項(xiàng)目用IIS發(fā)布逼泣，這個(gè)比較簡(jiǎn)單，不作敘述圾旨。
說(shuō)明：
a. 如果不需要在編輯器中上傳文件砍的、圖片則可不用后端的配置
b. 測(cè)試后端是否配置成功，可以在瀏覽器中輸入：http://127.0.0.1:8031/api/UEditor?action=config? ?若能正常返回config內(nèi)容就說(shuō)明配置好了帚稠。其中IP地址請(qǐng)取服務(wù)端的地址
三滋早、前端實(shí)現(xiàn)步驟
1. 在前端vue項(xiàng)目中安裝：cnpm i vue-ueditor-wrap
2. 下載vue-ueditor-wrap：選擇utf8-net.zip?解壓后改名為ueditor, 然后復(fù)制到public文件夾下砌们，注意ueditor下的net文件夾刪除不要
3.?修改 ueditor 文件中的 ueditor.config.js 配置:??window.UEDITOR_HOME_URL = '/ueditor/'
4. 在vue組件內(nèi)注冊(cè)使用
新增一個(gè)vue文件浪感，引入編輯器. 因vue-ueditor-wrap可以實(shí)現(xiàn)雙向綁定影兽，就象使用input組件一樣容易。大家具體可以參照以下截圖讹开。
這里的配置比較關(guān)鍵捐名，其中serverUrl的配置要根據(jù)后端控制器的路由來(lái)設(shè)置，比如上面后端控制器路由為api, 控制器為UEditor, 所以serverUrl設(shè)置為/api/UEditor镶蹋。這里配置成功后就可以實(shí)現(xiàn)多圖上傳了成艘，也沒(méi)有出現(xiàn)跨域問(wèn)題拇砰。整個(gè)過(guò)程需要手寫代碼的地方很少狰腌，也不需要自己去實(shí)現(xiàn)什么上傳接口，只要一步步厘清就行牧氮。
以上步驟就完成了在前后端分離的項(xiàng)目中集成了百度編輯器。至于怎樣保存到數(shù)據(jù)庫(kù)踱葛，如何提供訪問(wèn)接口不屬于本文需要講述的內(nèi)容丹莲，就此略去。
最后貼個(gè)簡(jiǎn)易效果圖：
roy yi
2021-09-02
后記
發(fā)布到阿里云服務(wù)器后若出現(xiàn)“在百度編輯器中可以正常上傳圖片甥材，但圖片不能顯示”的問(wèn)題⌒院可以用nginx輕松解決：
location /upload/image {
? ? ? ? ? ? proxy_pass http://localhost:80; # 將以 /upload/image 開(kāi)頭的請(qǐng)求代理到 proxy_pass指定的路徑上(百度編輯器顯示圖片）
? ? ? ? }
