.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/