富文本编辑器

<template>
  <div class="editorWrap" :style="cssVars">
    <Toolbar v-if="showToolbar"
             style="border-bottom: 1px solid #ccc"
             :editor="editor"
             :defaultConfig="toolbarConfig"
             :mode="mode"
    />
    <div :class="reviewStyle==1?'reviewBox':'contentBox'" :style="noBorder==1?'border:none':''">
      <div class="editorBox">
        <Editor v-if="showEditor"
                style="overflow-y: hidden;" :style="{'min-height':`${editorHeight - 2}px`}"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
                @input="changeText"
                @onBlur="changeBlur"
        />
      </div>
      <!--富文本编辑器内插槽-->
      <div class="slotBox">
        <slot name="handle">

        </slot>
      </div>
    </div>
    <!--富文本编辑器右侧插槽-->
    <div class="slotBox">
      <slot name="handleRight">

      </slot>
    </div>
  </div>
</template>

<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";
import {DomEditor} from '@wangeditor/editor'

export default {
  name: "MyEditor",
  components: {Editor, Toolbar},
  props: {
    showToolbar: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: '',
    },
    //限制最大输入字符,默认为0时标识不做输入限制
    maxLength: {
      type: Number,
      default: 0
    },
    //编辑器高度
    editorHeight: {
      type: [String, Number],
      default: 96
    },
    //文本框问题提示的向上偏移高度
    placeholderTop:{
      type: String,
      default: '6',
    },
    //提示文字
    placeholder:{
      type: String,
      default: '',
    },
    editorTag:{
      type: String,
      default: '',
    },
    //预览样式,有无背景色
    reviewStyle:{
      type:Number,
      default:0
    },
    // 是否有边框
    noBorder:{
      type:Number,
      default:0
    },
    onlyRead:{
      type:[Number,String],
      default:0
    }
  },
  watch: {
    content: {
      handler(val) {
        // this.html = val;
        // console.log('接受到的富文本', this.editor)
      },
      immediate: true
    }
  },
  data() {
    return {
      showEditor: false,//是否显示编辑器
      editor: null,
      toolbarConfig: {},
      editorConfig: {},
      mode: 'default', // or 'simple'

    };
  },
  computed: {
    cssVars() {
      return {
        "--minHeight": `${this.editorHeight}px`,
        "--placeholderTop": `${this.placeholderTop}px`
      }
    }
  },

  methods: {
    changeBlur(){
     this.$emit('editorBlur',this.editorTag)
    },
    changeText(e) {
      // console.log('触发',e)
      this.$emit('update:content', e)
    },
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      this.editor.setHtml(this.content);//插入内容

    },

  },
  mounted() {
    if(this.placeholder) {
      this.editorConfig.placeholder = this.placeholder;
    }
    if (this.maxLength > 0) {
      this.editorConfig.maxLength = this.maxLength
    }
    if(this.onlyRead==1){
      this.editorConfig.readOnly = true
    }
    this.$nextTick(() => {
      this.showEditor = true;
    })
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style scoped lang="less">

::v-deep {
  .w-e-text-container [data-slate-editor] {
    min-height: var(--minHeight);
  }

  .w-e-text-container [data-slate-editor] p {
    margin: 4px 0;

  }
}

.editorWrap {
  display: flex;
  //margin-bottom: 6px;

  .contentBox {
    flex: 1;

    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    display: flex;
    overflow: hidden;

    .editorBox {
      overflow: hidden;
      flex: 1;
      word-break:break-all;
      ::v-deep {
        .w-e-text-container {
        }
        .w-e-text-placeholder{
          font-style: initial;

          top: var(--placeholderTop);
        }
      }
    }
  }
  .reviewBox{
    flex: 1;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    display: flex;
    overflow: hidden;

    .editorBox {
      overflow: hidden;
      flex: 1;
      word-break:break-all;


      ::v-deep {
        .w-e-text-container {
          background: rgba(255, 255, 255, .1);
          padding:3px 3px 12px 3px;
        }
        .w-e-text-placeholder{
          font-style: initial;

          top: var(--placeholderTop);
        }
      }
    }
  }
}
</style>
====================================================================

<TopicEditor :key="index"
             :content="`${index + 1}.[${topicType[item.type]}] ${item.content}`" :editorHeight="30"
             :no-border="1" :onlyRead="1"
             :reviewStyle="1"></TopicEditor>