关于富文本编辑器 wangeditor 在 vue 项目中的使用

一、介绍：

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。官方使用文档

二、在 vue 项目里边的使用

1、安装

npm 安装 npm i wangeditor --save

2、引入你的 vue 项目

import wangEditor from "wangeditor";

3、在你的模板里边设置一个挂载的元素

<el-form-item label="博客内容">
    	<!-- 挂载的元素节点 -->
        <div ref="editorElem"></div>
        <!-- 内容预览区，可设可不设 -->
        <el-input
          type="textarea"
          cols="170"
          rows="20"
          v-model="ruleform.handbook"
        ></el-input>
</el-form-item>

3、在 vue 的生命周期函数 mounted 中创建 wangeditor 实例

• data 中的数据

data(){
	retrun{
        ruleform: { 
            // 存储内容的区域
            handbook: "",
            editor:null,
      },
    }
}

mounted() {
    const editor = new wangEditor(this.$refs.editorElem);
    editor.config.height = 400;
    // z-index设置
    editor.config.zIndex = 1;
    // 挂载highlight插件，这个需要自己引入另外一个插件 highlight.js
    editor.highlight = hljs;
    // 粘贴文本时自动过滤图片
    editor.config.pasteIgnoreImg = true;
    // 限制上传图片的大小
    editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
    editor.config.uploadImgMaxLength = 1; // 一次只能上传一个个图片
    // 网络图片的选项配置
    editor.config.showLinkImgAlt = false;
    // 配置超链接
    editor.config.showLinkImgHref = false;
    // 配置历史浏览记录
    editor.config.compatibleMode = function () {
      // 返回 true 表示使用兼容模式
      return true;
    };
    //插入代码语言配置
    editor.config.languageType = [
      "C",
      "C#",
      "C++",
      "CSS",
      "Java",
      "JavaScript",
      "JSON",
      "TypeScript",
      "Html",
      "XML",
      "SQL",
      "Markdown",
      "Python",
    ];
    //配置全屏功能是否显示
    editor.config.showFullScreen = true;
    // 配置图片上传接口
    editor.config.uploadImgTimeout = 20 * 1000;
    editor.config.uploadFileName = "file";
    // 上传图片的请求头
    editor.config.uploadImgHeaders = {
      Accept: "text/x-json",
      a: 100,
    };
    // 自己后端配置所需要的图片上传接口
    editor.config.uploadImgServer = "/node/adminUser/imgUploadM";
    editor.config.uploadImgHooks = {
      // 图片上传并返回了结果，图片插入已成功
      success: function (xhr) {
        this.$message.success("上传成功");
      },
      // 上传图片超时
      timeout: function (xhr) {
        this.$message.error("请求已超时");
      },
      // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      customInsert: function (insertImgFn, result) {
        insertImgFn(result.data[0].url);
      },
    };
    // 配置 onchange 回调函数
    editor.config.onchange = (newHtml) => {
      const safeHtml = xss(newHtml);
      this.ruleform.handbook = safeHtml;
    };
    // 创建编辑器
    editor.create();
    this.editor = editor;
  },

• 在离开该组件的时候可以销毁该实例

 beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },

注意：如果需要设置代码高亮模式，需引入插件 highlight.js

• 安装

npm install highlight.js --save

• 引入

import hljs from "highlight.js";
// css的引入 自己在 higlight.js 官网中找一个自己喜欢的样式引入
import "highlight.js/styles/monokai-sublime.css";

三、关于文本内容的获取和预览绑定

1、文本内容获取

 // 配置 onchange 回调函数
    editor.config.onchange = (newHtml) => {
      const safeHtml = xss(newHtml);
      this.ruleform.handbook = safeHtml;
    };

注意：在这个回调函数中我为了防止 xss 攻击，引入了一个插件 xss 官网，使用也很简单，只需三步：

• 安装

npm install xss

• 引入

import xss from "xss";

• 在需要过滤的html 中进行使用

const html = "<div>xss攻击<div>";
const sagfeHtml = xss(html);

2、关于文本内容的预览

使用 v-model 在文本域元素 text-area 里边进行双向绑定，上边的回调函数中已绑定，不做详细解释。

四、总结

关于 wangeditor 的使用，你只需要引入你的项目，然后设置一个挂载的元素，紧接着创建 一个 wangeditor 的实例就 ok 了。此为，你可以选择将 wangeditor 中编辑的内容存储到数据库中，然后在前端页面中渲染的时候使用 vue 中的 v-html 指令进行插入，但是要注意防御 xss 攻击。