0x00 起因

最近需要一個(gè)在線編輯器，之前聽人說(shuō)過百度的UEditor不錯(cuò)，去官網(wǎng)下了一個(gè)。不過服務(wù)端只有ASP.NET版的，如果是為了能盡快使用，只要把ASP.NET版的服務(wù)端作為應(yīng)用部署在IIS上就可以立即使用了。不過我的需求并不急，所以把ASP.NET移植到了ASP.NET Core上。整個(gè)過程很簡(jiǎn)單，只是重新引用了一些包，修改了幾處代碼，另外就是把Controller中比較長(zhǎng)的一個(gè)switch語(yǔ)句塊重構(gòu)為了字典，根據(jù)url中的action參數(shù)從字典中找出并調(diào)用相應(yīng)的Action處理，這樣的好處就是如果要擴(kuò)展action支持的操作無(wú)需修改源代碼，只要擴(kuò)展字典就可以，對(duì)擴(kuò)展開放，對(duì)修改關(guān)閉。***把服務(wù)端功能打成了nuget包UEditorNetCore，方便使用。這篇博客主要就介紹下如何使用UEditorNetCore快速實(shí)現(xiàn)UEditor服務(wù)端，也可以直接使用源代碼中的示例，希望對(duì)有這方面需求的園友有所幫助。

0x01 總體設(shè)計(jì)

當(dāng)接收到action后，UEditorService會(huì)從UEditorActionCollection中找到這個(gè)action對(duì)應(yīng)的方法并調(diào)用，同時(shí)傳入HttpContext參數(shù)。這些方法調(diào)用基層的服務(wù)XxxxHandler完成功能，并把返回內(nèi)容通過HttpContext.Response.WriteAsync()方法寫入。如果要擴(kuò)展對(duì)action的支持，可以擴(kuò)展UEditorActionCollection，具體方法后面有介紹。

0x02 如何使用UEditorNetCore

1.安裝UEditorNetCore

2.在Startup.cs的ConfigureServices方法中添加UEditorNetCore服務(wù)

public void ConfigureServices(IServiceCollection services) 
{ 
//***個(gè)參數(shù)為配置文件路徑，默認(rèn)為項(xiàng)目目錄下config.json 
//第二個(gè)參數(shù)為是否緩存配置文件，默認(rèn)false 
　　services.AddUEditorService() 
services.AddMvc(); 
} 

3.添加Controller用于處理來(lái)自UEditor的請(qǐng)求

[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" 

這樣配置后當(dāng)前端要獲取服務(wù)端UEditor配置時(shí)就會(huì)訪問/api/UEditor?action=config。

5.修改服務(wù)端配置config.json

上傳類的操作需要配置相應(yīng)的PathFormat和Prefix。示例部署在web根目錄，因此Prefix都設(shè)置為"/"。使用時(shí)要根據(jù)具體情況配置。 例如示例中圖片上傳的配置如下：

關(guān)于PathFormat的詳細(xì)配置可參照官方文檔。

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 擴(kuò)展action

UEditor前端和后端交互主要通過在url中給出不同的action參數(shù)實(shí)現(xiàn)的，例如/api/UEditor?action=config會(huì)從服務(wù)端獲取UEditor配置信息。UEditorNetCore目前支持的有8種action：

config 獲取服務(wù)端配置信息
uploadimage 上傳圖片
uploadscrawl 上傳涂鴉
uploadvideo 上傳視頻
uploadfile 上傳文件
listimage 多圖片上傳
listfile 多文件上傳
catchimage 抓取圖片

如果以上action無(wú)法滿足需求，可以方便的增加、覆蓋、移除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兩個(gè)action，作為示例僅僅返回了字符串。當(dāng)訪問/api/UEditor?action=test時(shí)會(huì)返回"from test action"。在擴(kuò)展action時(shí)可以使用Config獲取服務(wù)端配置，也可以使用已有的Handlers，具體可以參考源代碼。

覆蓋現(xiàn)有action

上面的Add方法除了添加新action外還可以覆蓋現(xiàn)有action。當(dāng)現(xiàn)有的action可能不符合你的要求，可以Add一個(gè)同名的action覆蓋現(xiàn)有的。

移除action

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

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

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

0x04 相關(guān)資源

UEditorNetCore代碼和示例：https://github.com/durow/UEditorNetCore
UEditor代碼：https://github.com/fex-team/ueditor  
UEditor官網(wǎng)：http://ueditor.baidu.com/website/index.html