关于ASP.NET Core如何使用UEditor编辑器

      由于最近公司的一个项目使用到编辑器，然后自然想到了UEditor编辑器，但是这个编辑器只有.net版本，并没有.net core版本怎么办呢！后来百度了很久也没有找到具体的解决方案，直到看到了Github才知道怎么在.net core使用UEditor编辑器。

 

      首先，我们要去下载这个版本  ，然后新建一个项目UEditorCore如下图所示：

   

到这里之后，我们要添加NuGet包

我们这里使用代码添加：Install-Package UEditor.Core，具体如下图所示：

包源添加好了，我们要配置后台。

首先添加一个UEditorController控制器：

代码如下：

namespace UEditorCore.Controllers
{
    public class UEditorController : Controller
    {
        private readonly UEditorService _ueditorService;
        public UEditorController(UEditorService ueditorService)
        {
            this._ueditorService = ueditorService;
        }

        [HttpGet, HttpPost]
        public ContentResult Upload()
        {
            var response = _ueditorService.UploadAndGetResponse(HttpContext);
            return Content(response.Result, response.ContentType);
        }
    }
}

 

 

 

控制器添加好之后，我们要去Startup.cs类添加对应的代码如下图所示：

代码一：

services.AddUEditorService();

代码二：

   app.UseStaticFiles(new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(
                   Path.Combine(Directory.GetCurrentDirectory(), "upload")),
                RequestPath = "/upload",
                OnPrepareResponse = ctx =>
                {
                    ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=36000");
                }
            });

到这里之后我们要在这个路径下添加两个文件夹如下图所示：

到这里之后后端的配置就算基本完成了，

后台配置好了之后，我们把之前下载好的文件解压（注意是：解压到当前文件夹）并且重命名，如下图所示：，重命名为“ueditor-1.4.3.3”。

这时候我们去刚才解压好的文件找到这个目录\ueditor-1.4.3.3\net

把config.json配置文件重命名为ueditor.json，并且复制到项目的根目录。

接下来打开ueditor.json配置文件修改上传图片后的读取路径

修改前

 

修改后

 

也就是删除 ueditor/net/ 这个就好，在这个ueditor.json配置文件修改的地方一共有7处。

 到这里之后我们可以把整个net文件夹删除了

 

然后我们把整个ueditor-1.4.3.3文件夹的东西复制到这个路径下来

最后我们找到ueditor.config.js脚本，找到如下图所示的对应地方并且修改对应路径为serverUrl: "/ueditor/upload"

到这里之后还剩下载最后一步，我们去修改index页面的代码

div class="row">
    <div class="col-md-12">
        <script id="container" name="container" type="text/plain">
            欢迎使用Ueditor.Core
        </script>
    </div>
</div>
@section Scripts
    {
    <script src="~/lib/ueditor-1.4.3.3/ueditor.config.js"></script>
    <script src="~/lib/ueditor-1.4.3.3/ueditor.all.min.js"></script>
    <script type="text/javascript">
        var ue = UE.getEditor('container', {
            initialFrameHeight: 500
        });</script>
}

最后的最后我们运行一下项目！

原来一切的一切都在掌握中！

dome：链接：https://pan.baidu.com/s/1RH7EE8foh_Ill1nUQuuoYQ 密码：vbi6

如有不明白可以添加QQ：1103354424、761516331细聊！