vue里外部控制组件wangeditor的高度

vue里外部控制组件wangeditor的高度

组件内部

<template>
	  <div>
	      <div :id="id" :style="'height:'+height+'px'"></div>
	  </div>
</template>

export default {
  components: {},
  props: {
    content: String,
    id:String,
    height:{    //传入高度
      type:Number,
      default:200
      }
  },

<style lang='scss' >
.w-e-text,.w-e-text-container{
  height: inherit !important;             //继承一下就可以了
  min-height: 0 !important;
}
.w-e-text{
  overflow-y: scroll;                //隐藏底部滑块
}
</style>

引入组件

          <wang-edit
              :height="105"
              :id="div1"
              @getContent="getContentdescription"
              :content="thirdtext"
          ></wang-edit>

完整wangeditor代码

<template>
  <div>
      <div :id="id" :style="'height:'+height+'px'"></div>
  </div>
</template>

<script>
import E from "wangeditor";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    content: String,
    id:String,
    height:{
      type:Number,
      default:200
      }
  },
  data() {
    // 这里存放数据
    return {
      data: "",
    };
  },

  computed: {
    //   当前页面全局实例化富文本编辑器
    editor() {
      return new E(document.getElementById(this.id));
    },
  },
  // 监控data中的数据变化
  watch: {
    content: {
      handler() {
        this.editor.txt.html(this.content);
      },
    },
  },
  // 方法集合
  methods: {
    wangEdit() {
      // 设置菜单栏
      this.editor.config.excludeMenus = ["code", "emoticon"];

      //限制上传数量

      this.editor.config.uploadImgMaxLength = 1;

      //   限制上传格式

      this.editor.config.uploadImgAccept = ["jpg", "jpeg", "png", "gif", "bmp"];

      // 自定义图片上传方法

      this.editor.config.customUploadImg = async (file, insertImgFn) => {
        var formData = new FormData();
        formData.append("file", file[0]);
        formData.append("type", 0);
        const res = await this.upload("/upload/uploadFile", formData);
        insertImgFn(res.url);
        this.$notify.success({
          title: "提醒",
          message: "图片上传成功",
          duration: 3000,
        });
      };

      //关闭网络图片

      this.editor.config.showLinkImg = false;

      // 定义视频上传功能
      this.editor.config.customUploadVideo = async (file, insertVideoFn) => {
        var formData = new FormData();
        formData.append("file", file[0]);
        formData.append("type", 1);

        this.$notify.info({
          title: "提醒",
          message: "视频正在上传中",
          duration: 5000,
        });

        const res = await this.upload("/upload/uploadFile", formData);

        insertVideoFn(res.url);

        this.$notify.success({
          title: "提醒",
          message: "视频上传成功",
          duration: 5000,
        });
      };

      //关闭网络视频链接
      this.editor.config.showLinkVideo = false;

      this.editor.config.onchange = (html) => {
        this.data = html;
        this.$emit("getContent", this.data);
      };

      this.editor.config.zIndex = 100

      this.editor.create();
    },
  },
  mounted() {
    console.log(this.content)
    this.wangEdit();
  },
  beforeDestroy() {
    this.editor.destroy();
  },
};
</script>
<style lang='scss' >
.w-e-text,.w-e-text-container{
  height: inherit !important;
  min-height: 0 !important;
}
.w-e-text{
  overflow-y: scroll;
}

.w-e-toolbar .w-e-menu {
    width: 30px !important;
    height: 30px !important;
}
</style>

页面引入

import WangEdit from "../../components/wangEdit";

export default {
  components: {
    WangEdit,
  },
  data() {
    return {
      div1: "div1",         //多个id多个节点
      div2: "div2",
      firsttext:"",
      }
     }
  }

    getContentdescription1(html) {   //第一个文本框
      this.firsttext = html;
    },

           <wang-edit
              :height="105"
              :id="div1"
              @getContent="getContentdescription1"
              :content="firsttext"
            ></wang-edit>