在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。

0x04 相關資源

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

 

---

更多內容歡迎訪問個人博客：http://www.durow.vip