ASP.NET Core中怎么使用UEditor編輯器

ASP.NET Core中怎么使用UEditor編輯器，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

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(); }

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。