vue2.0 集成UEditor富文本编辑器

1. 下载UEditor包

① 官网地址：/ueditor/

② 文件下载地址：/download/Bumblebee_Bee/87579130

若直接下载文件，则可忽略第2点

2. 编译下载文件

① 解压下载包后，用VS Code打开解压文件夹；

② 新建终端，执行以下命令：

🔺安装依赖：npm install

🔺全局安装Grunt-cli：npm install -g grunt-cli

🔺安装至本地：npm install grunt --save-dev

🔺编译命令：grunt default

备注：编译成功之后，会在根目录生成一个 dist -> utf8-php 文件夹；

3. 嵌入项目

① 将 utf8-php 文件复制到 vue 项目中的 public 文件夹里 ，将 utf8-php 重命名于 UEditor；

② 在 vue 项目中终端执行以下命令：

🔺下载 vue-ueditor-wrap：npm i vue-ueditor-wrap

③ 需要用到UEditor 页面引入

<template><div style="padding:20px"><vue-ueditor-wrap v-model="ueditorData" :config="ueditorConfig"></vue-ueditor-wrap></div></template><script>import VueUeditorWrap from "vue-ueditor-wrap";export default {components: {VueUeditorWrap,},data() {return {ueditorData: "dome",ueditorConfig: {// 设置编辑器不自动被内容撑高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 320,// 初始容器宽度initialFrameWidth: "100%",// 可以放后台存放路径--可在此填写，也可在config文件中配置// serverUrl: "",// UEditor 是文件的存放路径，UEDITOR_HOME_URL: "/UEditor/",},};},};</script>

4. 修改 UEditor 配置文件

① 在 public -> UEditor ->ueditor.config.js 文件中，增加以下：

window.UEDITOR_HOME_URL = '/public/Ueditor/';var URL = window.UEDITOR_HOME_URL || getUEBasePath();// 搜索serverUrl，填写上传地址[若与后端交互，则需要填写后端接口地址]serverUrl = ''

备注：修改成功之后运行项目以查看富文本编辑器是否正常

5. 后端 [ .net core ] 交互

① 打开启动项目 -> 右键 -> 打开 Nuget包管理器 -> 安装 UEditorNetCore；

② 添加控制器UEditorController

--Contron_Pis_ManagerControllerBase：即为程序中控制器基类，可参照程序其它控制器，保持一致即可；

public class UEditorController : Contron_Pis_ManagerControllerBase{private readonly UEditorService _ueditorService;public UEditorController(UEditorService ueditorService){_ueditorService = ueditorService;}public void Do(){_ueditorService.DoAction(HttpContext);}}

③ 拷贝下载文件中config.json至启动项目根目录，配置项根据文件中提示修改；

④在 Startup.cs 里加上以下：

public void ConfigureServices(IServiceCollection services){// 在此方法中加入此句services.AddUEditorService();}

重新启动即可；