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

1. 下载UEditor包

 ① 官网地址：http://fex.baidu.com/ueditor/

 ② 文件下载地址：https://download.csdn.net/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();
}

重新启动即可；