建站
咨詢
售后
建站咨詢
新聞中心
0x00 起因
最近需要一個在線編輯器，之前聽人說過百度的UEditor不錯，去官網(wǎng)下了一個。不過服務(wù)端只有ASP.NET版的，如果是為了能盡快使用，只要把ASP.NET版的服務(wù)端作為應(yīng)用部署在IIS上就可以立即使用了。不過我的需求并不急，所以把ASP.NET移植到了ASP.NET Core上。整個過程很簡單，只是重新引用了一些包，修改了幾處代碼，另外就是把Controller中比較長的一個switch語句塊重構(gòu)為了字典，根據(jù)url中的action參數(shù)從字典中找出并調(diào)用相應(yīng)的Action處理，這樣的好處就是如果要擴(kuò)展action支持的操作無需修改源代碼，只要擴(kuò)展字典就可以，對擴(kuò)展開放，對修改關(guān)閉。***把服務(wù)端功能打成了nuget包UEditorNetCore，方便使用。這篇博客主要就介紹下如何使用UEditorNetCore快速實(shí)現(xiàn)UEditor服務(wù)端，也可以直接使用源代碼中的示例，希望對有這方面需求的園友有所幫助。
創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)網(wǎng)站策劃，項目實(shí)施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元井陘礦做網(wǎng)站,已為上家服務(wù),為井陘礦各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
0x01 總體設(shè)計
當(dāng)接收到action后，UEditorService會從UEditorActionCollection中找到這個action對應(yīng)的方法并調(diào)用，同時傳入HttpContext參數(shù)。這些方法調(diào)用基層的服務(wù)XxxxHandler完成功能，并把返回內(nèi)容通過HttpContext.Response.WriteAsync()方法寫入。如果要擴(kuò)展對action的支持，可以擴(kuò)展UEditorActionCollection，具體方法后面有介紹。
0x02 如何使用UEditorNetCore
1.安裝UEditorNetCore
Install-Package UEditorNetCore
2.在Startup.cs的ConfigureServices方法中添加UEditorNetCore服務(wù)
- public void ConfigureServices(IServiceCollection services)
- {
- //***個參數(shù)為配置文件路徑，默認(rèn)為項目目錄下config.json
- //第二個參數(shù)為是否緩存配置文件，默認(rèn)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"
這樣配置后當(dāng)前端要獲取服務(wù)端UEditor配置時就會訪問/api/UEditor?action=config。
5.修改服務(wù)端配置config.json
上傳類的操作需要配置相應(yīng)的PathFormat和Prefix。示例部署在web根目錄，因此Prefix都設(shè)置為"/"。使用時要根據(jù)具體情況配置。 例如示例中圖片上傳的配置如下：
"imageUrlPrefix": "/", /* 圖片訪問路徑前綴 */ "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
關(guān)于PathFormat的詳細(xì)配置可參照官方文檔。
6.添加javascript引用
0x03 擴(kuò)展action
UEditor前端和后端交互主要通過在url中給出不同的action參數(shù)實(shí)現(xiàn)的，例如/api/UEditor?action=config會從服務(wù)端獲取UEditor配置信息。UEditorNetCore目前支持的有8種action：
config 獲取服務(wù)端配置信息
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，作為示例僅僅返回了字符串。當(dāng)訪問/api/UEditor?action=test時會返回"from test action"。在擴(kuò)展action時可以使用Config獲取服務(wù)端配置，也可以使用已有的Handlers，具體可以參考源代碼。
覆蓋現(xiàn)有action
上面的Add方法除了添加新action外還可以覆蓋現(xiàn)有action。當(dāng)現(xiàn)有的action可能不符合你的要求，可以Add一個同名的action覆蓋現(xiàn)有的。
移除action
如果要移除某個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
網(wǎng)站欄目：在ASP.NETCore中使用百度在線編輯器UEditor
文章鏈接：http://www.5511xx.com/article/dhdhesj.html
