Vue整合wangEditor 富文本编辑器

最新推荐文章于 2024-04-29 11:29:56 发布

水泛青舟

最新推荐文章于 2024-04-29 11:29:56 发布

阅读量461

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/HackerZhou/article/details/125650055

版权

Vue整合wangEditor 富文本编辑器

1.引入依赖

npm install wangeditor --save

2.引入组件

<template>
<div>
 <div ref="editor" class="editor" />
</div>
</template>

<script>
import E from "wangeditor";
export default {
  name: "test",
  data() {
    return {
      editor: null,
      form:{
        title:"",
        //富文本内容
        content:"",
        toEmail:"",
    }
    };
  },
  mounted() {
    const _this = this;
    this.editor = new E(this.$refs.editor);

    //版本兼容 问题
    this.editor.customConfig = this.editor.customConfig
      ? this.editor.customConfig
      : this.editor.config;
    this.editor.customConfig.onchange = (html) => {
      this.form.content = html;
    };
    this.editor.create();
  },
 
};
</script>