博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

.net core 6中使用UEditor记录

Posted on 2023-05-25 17:29  火冰·瓶  阅读(245)  评论(0编辑  收藏  举报

1.在NuGet中添加包:UEditor.Core

或通过程序包管理控制台:Install-Package UEditor.Core

 

 2.添加服务端统一请求接口

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

 

3.在Program.cs中添加

//代码一
builder.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");
    }
});

 

4.在项目跟路径下添加两个文件夹  

  

 

5.复制UEditor静态资源包到wwwroot/lib目录下

 

6.复制配置文件到项目根目录

把\wwwroot\lib\ueditor1_4_3_3\net\config.json  复制到根目录并改名为:ueditor.json 

 

 7.修改根目录下的ueditor.json中的配置

修改ueditor.json中的上传图片和文件路径

修改前:

 修改后:

 共有8处需要修改

 

8.修改ueditor.config.js文件中的服务端统一请求接口路径

文件在这个位置:\wwwroot\lib\ueditor1_4_3_3\ueditor.config.js

  

9.在需要使用UEditor的页面添加如下代码

<script src="~/lib/ueditor1_4_3_3/ueditor.config.js"></script>
<script src="~/lib/ueditor1_4_3_3/ueditor.all.min.js"></script>


<div id="container"></div>

<script type="text/javascript">
    var ue = UE.getEditor('container', {
        initialFrameHeight: 500
    });
</script>

 

10.修改控件中加载百度地图时出错问题  

修改如下2个静态页面

\wwwroot\lib\ueditor1_4_3_3\dialogs\map\map.html

\wwwroot\lib\ueditor1_4_3_3\dialogs\map\show.html

把老版的百度地图接口js引用替换成新版的,并加上自己申请的ak

修改获取标注坐标的方法

var point = marker.getPosition();

修改加载百度静态图url为新版

var url = "https://api.map.baidu.com/staticimage/v2?ak=AK&mcode=666666&center=" + point.lng + "," + point.lat + "&width=" + size.width + "&height=" + size.height + "&zoom=" + zoom;