记录一下.net core使用百度富文本编辑器ueditor
准备工作:先去ueditor官网下载对应的版本。进入ueditr根目录下的net目录,把里面一个config.json文件复制并粘贴到项目的根目录。然后项目还要引入依赖包。下面开始讲
把这个依赖包安装到需要使用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路径更改,如图,然后把config.json文件复制粘到到项目项的根目录下并改名为ueditor。到这样基本算都配置好了,现在就在前端页面可以引用使用了。下面放一个例子:
<script src="~/ueditor-1.4.3.3/ueditor.config.js"></script>
<script src="~/ueditor-1.4.3.3/ueditor.all.min.js"></script>
引用这两个js之后,页面就可以调用了
<template>
<script id="editor" type="text/plain" name="gdesc" style="width:100%;height:200px;">
</script>
</template>
使用之前再初始化就可以了
//编辑器初始化
var ue = UE.getEditor('editor');
至于提示编辑器内的内容,设置其内容点,可以百度ueditor的api方法