vue 使用富文本编译器

蔚落 2023-02-12 08:24 13阅读 0赞

**我这里使用了vue-cli3或者更好的版本；**

话不多说，上代码；

首先全局安装 npm i wangeditor -S

这个是一个组件，使用到富文本编译器的地方引入就行了；

<template>
      <div id="wangeditor">
        <div ref="editorElem" style="text-align:left;"></div>
      </div>
    </template>
    <script>
    import E from "wangeditor";
    export default {
      name: "Editor",
      data() {
        return {
          editor: null,
          editorContent: ""
        };
      },
      // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
      props: ["catchData"], // 接收父组件的方法
      mounted() {
        this.editor = new E(this.$refs.editorElem);
        // 编辑器的事件，每次改变会获取其html内容
        this.editor.customConfig.onchange = html => {
          this.editorContent = html;
          console.log(this.editorContent);//传值给父组件
          this.$parent.getMge(this.editorContent);
          //   this.$emit('toMessage',this.editorContent)
          //   this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
        };
        this.editor.customConfig.menus = [
          // 菜单配置
          "head", // 标题
          "bold", // 粗体
          "fontSize", // 字号
          "fontName", // 字体
          "italic", // 斜体
          "underline", // 下划线
          "strikeThrough", // 删除线
          "foreColor", // 文字颜色
          "backColor", // 背景颜色
          "link", // 插入链接
          "list", // 列表
          "justify", // 对齐方式
          "quote", // 引用s
          "emoticon", // 表情
          "image", // 插入图片
          "table", // 表格
          "code", // 插入代码
          "undo", // 撤销
          "redo" // 重复
        ];
        this.editor.create(); // 创建富文本实例
      }
    };
    </script>

比如我的一个页面需要用到富文本编译器：  
页面引入：

<template>
      <div>
        <Editor :defalult="defalultMsg" @toMessage="getMge" ref="ue"></Editor>
      </div>
    </template>
    <script>
    import Editor from "../../components/Editor";
    export default {
      name: "accredit",
      components: {
        Editor
      },
      data() {
        return {
          //富文本
          defalultMsg: "",
          config: {
            initialFrameWidth: 1200,
            initialFrameHeigth: 350
          },
          docTitle: "", //文档标题
          decDescription: "", //文档描述
          decMain: "", //正文
        };
      },
      methods: {
        getMge(val) {
          console.log("子组件传过来的信息", val);
        }
      }
    };
    </script>