.Net Core中使用UEditor

一、參考：

1. UEditorNetCore .net core 2.1：https://github.com/chenderong/UEditorNetCore
2. UEditorNetCore：https://github.com/durow/UEditorNetCore

3.https://blog.csdn.net/qq_40579788/article/details/103124251

二、使用：

0.下載Ueditor1.4.3.Asp（UTF-8）版本點擊此處前往，並放入wwwroot文件夾下

1. 安裝UEditorNetCore

Install-Package UEditorNetCore

2.在Startup.cs的ConfigureServices方法中添加UEditorNetCore服務

            #region UEditor
            //第一個參數爲配置文件路徑，默認爲項目目錄下config.json
            //第二個參數爲是否緩存配置文件，默認false
            services.AddUEditorService("Configs/ueditor.json"); 
            #endregion

3.添加Controller用於處理來自UEditor的請求

using Microsoft.AspNetCore.Mvc;
using GuanWei.AspNetCore;
using UEditorNetCore;

namespace GuanWei.PRM.Mvc.Controllers
{
    [Route("api/[controller]")]
    public class UEditorController: BaseController
    {
        private readonly UEditorService _ueditorService;

        public UEditorController(UEditorService ueditorService)
        {
            this._ueditorService = ueditorService;
        }

        public void Do()
        {
            _ueditorService.DoAction(HttpContext);
        }

    }
}

4.修改前端配置文件ueditor.config.js

serverUrl需要參照第3步Controller中配置的路由，按照上面步驟3中的配置，需要以下配置：

serverUrl:"/api/UEditor"

5.修改服務端配置config.json，並拷貝到Config文件夾，並重新命名爲“ueditor.json”，與第二步的配置對應；

上傳類的操作需要配置相應的PathFormat和Prefix。示例部署在web根目錄，因此Prefix都設置爲"/"。使用時要根據具體情況配置。 例如示例中圖片上傳的配置如下：

"imageUrlPrefix": "/", /* 圖片訪問路徑前綴 */
"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

6.頁面中使用富文本框：

（1）引入js文件：

<script src="~/plugins/ueditor/ueditor.config.js"></script>
<script src="~/plugins/ueditor/ueditor.all.js"></script>
<script src="~/plugins/ueditor/lang/zh-cn/zh-cn.js"></script>

（2）確定綁定富文本框的標籤：

<tr id="trQueryConditions">
    <td class="td-left">查詢條件：</td>
    <td class="td-right" colspan="3" style="width:800px;height:200px;">
        @Html.TextAreaFor(model => model.queryConditions, new { @MaxLength = "10000", @class="form-control-ueditor", @style = "width:800px;height:200px;" })
    </td>
</tr> 

（3）初始化富文本框：

UE.getEditor('queryConditions');

7.其他操作富文本框的方式見官網：http://fex.baidu.com/ueditor/