Vue弹窗封装使用富文本编辑器（WangEditor）含传值问题。

本文链接：https://blog.csdn.net/qq_51484868/article/details/122636228

本文介绍了如何在Vue中封装WangEditor富文本编辑器，以实现代码复用和提高维护性。通过在父组件中调用子组件的方法来控制编辑器的打开和关闭，避免了初始化错误。同时，详细阐述了如何处理父子组件间的传值问题，确保编辑器内容能正确绑定到弹窗表单中，实现数据同步。

摘要由CSDN通过智能技术生成

WangEditor怎么使用？详见WangEditor官网：https://www.wangeditor.com/https://www.wangeditor.com/ 因为不同的弹窗都需要富文本编辑器，为了使代码不会有冗余，看起来简洁规范，于是我选择封装富文本编辑器，主要的思想是，将弹窗等类型作为我的Vue组件的父组件，将富文本编辑器封装为我的子组件。这样做的好处是：

1）方便代码的维护。

2）更改富文本编辑器的设置更加方便,可以通用设置。

3）使用富文本编辑器的逻辑更加清晰，不会产生节点未渲染，编辑器已创建等问题。

之前做富文本编辑器的时候，没有做到封装，导致代码严重冗余在一起，经常报富文本编辑器的错误。

一、基本使用

1.在控制台输入 npm i wangeditor --save 安装富文本编辑器

2.创建一个Vue Component(myEditor)，新建富文本编辑器，并定义openMyEditor()开启富文本编辑器和closeMyEditor()关闭富文本编辑器的方法。

<template>
  <div style="text-align: left" id="wangEditor"></div>
</template>

<script>
import E from "wangeditor";
let editor
export default {
  name: "myEditor",
  methods:{
    openMyEditor(){
      editor = new E('#wangEditor');
          editor.config.height = 5