记录一下.net core使用百度富文本编辑器ueditor

水深无声 2022-02-12 17:53 592阅读 0赞

准备工作：先去ueditor官网下载对应的版本。进入ueditr根目录下的net目录，把里面一个config.json文件复制并粘贴到项目的根目录。然后项目还要引入依赖包。下面开始讲

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nc2hpbmVuZw_size_16_color_FFFFFF_t_70][]把这个依赖包安装到需要使用uedit富文本编辑器的项目中。然后在StartUp.cs文件内注入依赖。在ConfigureServices方法内添加代码

//注入依赖
                services.AddUEditorService();

这样，依赖算是已经注入了。最后还需要添加一个控制器

public class UEditorController : Controller
        {
            private readonly UEditorService _ueditorService;
            public UEditorController(UEditorService ueditorService)
            {
                this._ueditorService = ueditorService;
            }
    
            //如果是API，可以按MVC的方式特别指定一下API的URI
            [HttpGet, HttpPost]
            public ContentResult Upload()
            {
                var response = _ueditorService.UploadAndGetResponse(HttpContext);
                return Content(response.Result, response.ContentType);
            }
        }

现在开始说下前端部分(对了，在项目的启动项根目录内创建文件夹upload，这个东西可以自己看config.json配置文件)

把前面说的那个uediotr根目录下的net目录内的config.json文件内imageUrlPrefix路径更改，如图![20190429113729423.png][]，然后把config.json文件复制粘到到项目项的根目录下并改名为ueditor。到这样基本算都配置好了，现在就在前端页面可以引用使用了。下面放一个例子：

引用这两个js之后，页面就可以调用了

使用之前再初始化就可以了

//编辑器初始化
                    var ue = UE.getEditor('editor');

至于提示编辑器内的内容，设置其内容点，可以百度ueditor的api方法

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW5nc2hpbmVuZw_size_16_color_FFFFFF_t_70]: /images/20220212/4bf4a8e8eaf44d44b75f9ee1bb4763e3.png
[20190429113729423.png]: /images/20220212/606b91d470f14910bf057aeec9179a0f.png