在ASP.NET Core中使用百度線上編輯器UEditor

在ASP.NET Core中使用百度線上編輯器UEditor

0x00 起因

最近需要一個線上編輯器，之前聽人說過百度的UEditor不錯，去官網下了一個。不過服務端只有ASP.NET版的，如果是為了能儘快使用，只要把ASP.NET版的服務端作為應用部署在IIS上就可以立即使用了。不過我的需求並不急，所以把ASP.NET移植到了ASP.NET Core上。整個過程很簡單，只是重新引用了一些包，修改了幾處代碼，另外就是把Controller中比較長的一個switch語句塊重構為了字典，根據url中的action參數從字典中找出並調用相應的Action處理，這樣的好處就是如果要擴充action支援的操作無需修改原始碼，只要擴充字典就可以，對擴充開放，對修改關閉。最後把服務端功能打成了nuget包UEditorNetCore，方便使用。這篇部落客要就介紹下如何使用UEditorNetCore快速實現UEditor服務端，也可以直接使用原始碼中的樣本，希望對有這方面需求的園友有所協助。

0x01 總體設計

當接收到action後，UEditorService會從UEditorActionCollection中找到這個action對應的方法並調用，同時傳入HttpContext參數。這些方法調用基層的服務XxxxHandler完成功能，並把返回內容通過HttpContext.Response.WriteAsync()方法寫入。如果要擴充對action的支援，可以擴充UEditorActionCollection，具體方法後面有介紹。

0x02 如何使用UEditorNetCore

1.安裝UEditorNetCore

Install-Package UEditorNetCore

2.在Startup.cs的ConfigureServices方法中添加UEditorNetCore服務

public void ConfigureServices(IServiceCollection services){　　//第一個參數為設定檔路徑，預設為項目目錄下config.json　　//第二個參數為是否緩衝設定檔，預設false　　services.AddUEditorService()　　services.AddMvc();}

3.添加Controller用於處理來自UEditor的請求

[Route("api/[controller]")] //配置路由public class UEditorController : Controller{    private UEditorService ue;    public UEditorController(UEditorService ue)    {        this.ue = ue;    }    public void Do()    {        ue.DoAction(HttpContext);    }}

4.修改前端設定檔ueditor.config.js

serverUrl需要參照第3步Controller中配置的路由，按照上面步驟3中的配置，需要以下配置：

serverUrl:"/api/UEditor"

這樣配置後當前端要擷取服務端UEditor配置時就會訪問/api/UEditor?action=config。

5.修改服務端配置config.json

上傳類的操作需要配置相應的PathFormat和Prefix。樣本部署在web根目錄，因此Prefix都設定為"/"。使用時要根據具體情況配置。 例如樣本中圖片上傳的配置如下：

"imageUrlPrefix": "/", /* 圖片訪問路徑首碼 */"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

關於PathFormat的詳細配置可參照官方文檔。

6.添加javascript引用

<script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="~/lib/ueditor/ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="~/lib/ueditor/lang/zh-cn/zh-cn.js"></script>

0x03 擴充action

UEditor前端和後端互動主要通過在url中給出不同的action參數實現的，例如/api/UEditor?action=config會從服務端擷取UEditor配置資訊。UEditorNetCore目前支援的有8種action：

config 擷取服務端配置資訊
uploadimage 上傳圖片
uploadscrawl 上傳塗鴉
uploadvideo 上傳視頻
uploadfile 上傳檔案
listimage 多圖片上傳
listfile 多檔案上傳
catchimage 抓取圖片

如果以上action無法滿足需求，可以方便的增加、覆蓋、移除action。

增加action

public void ConfigureServices(IServiceCollection services){    services.AddUEditorService()        .Add("test", context =>        {            context.Response.WriteAsync("from test action");        })        .Add("test2", context =>        {            context.Response.WriteAsync("from test2 action");        });    services.AddMvc();}

以上代碼增加了名字為test和test2兩個action，作為樣本僅僅返回了字串。當訪問/api/UEditor?action=test時會返回"from test action"。在擴充action時可以使用Config擷取服務端配置，也可以使用已有的Handlers，具體可以參考原始碼。

覆蓋現有action

上面的Add方法除了添加新action外還可以覆蓋現有action。當現有的action可能不符合你的要求，可以Add一個同名的action覆蓋現有的。

移除action

如果要移除某個action，可以使用Remove方法。

public void ConfigureServices(IServiceCollection services){    services.AddUEditorService()        .Remove("uploadvideo");    services.AddMvc();}

以上代碼中的Remove("uploadvideo")方法移除了名為uploadvideo的action。

