在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