记录一下.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方法

猜你喜欢

转载自blog.csdn.net/zhangshineng/article/details/89671377
今日推荐