<template>
  <div class="van-hairline--bottom type-seven">
    <div class="title" style="margin-bottom: 10px;color:#666C70;">
      {{ proofSubItem.label }}
    </div>
    <div>
      <div class="my-rich-text"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator';
import E from 'wangeditor';

@Component({
  components: {},
})
export default class TypeSeven extends Vue {
  @Prop()
  private proofSubItem: any;
  @Prop()
  private value!: any;

  private mounted() {
    const editor = new E('.my-rich-text');
    editor.config.menus = ['bold', 'head', 'link', 'italic', 'underline'];
    editor.config.zIndex = 0;
    editor.config.onchange = (newHtml: string) => {
      this.value.value = newHtml;
    };
    editor.create();
    editor.txt.html(this.value.value); // 重新设置编辑器内容
  }
}
</script>

<style lang="scss" scoped>
.type-seven {
  text-align: left;
  padding: 10px 0px 15px;
  a {
    word-break: break-all;
    white-space: wrap;
  }
}
</style>
