<template>
  <div>
    <div class="base_form">
      <div class="label">
        <img
          class="pre-tag"
          src="../../../assets/images/template/pre-tag.png"
        />
        <div class="label-text" :title="label">{{ label }}</div>
      </div>
      <tinymce
        @input="getContent"
        :value="richTextValue"
        class="tinymce"
      ></tinymce>
    </div>
  </div>
</template>

<script>
import tinymce from "@/views/template/tinymce.vue";
export default {
  //   引入组件
  components: {
    tinymce,
  },
  props: ["label", "property"],
  data() {
    return {
      richTextValue: "",
    };
  },
  mounted() {
    this.richTextValue = this.property.value;
  },
  computed: {},
  methods: {
    getContent(val) {
      //   this.richTextValue = val;
      this.property.value = val;
    },
  },
};
</script>
<style scoped lang="less">
/deep/.mce-resizehandle {
  display: none;
}
.base_form {
  position: relative;
  padding-left: 18px;

  height: 480px;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
}
.tinymce {
  width: 800px;
  height: 300px;
  margin: 0;
  margin-top: 20px;
}
.label {
  display: inline-block;
  width: 150px; /* 104 - 18 */
  flex-shrink: 0;
  height: 44px;
  line-height: 480px;
  color: #797d84; /* todo ui图颜色不一致 */
  font-size: 14px;
  font-weight: 300;
  position: relative;
}
.label-text {
  text-overflow: ellipsis;
  white-space: nowrap; /*规定段落中的文本不进行换行 */
  overflow: hidden;
}
.pre-tag {
  position: absolute;
  left: -30px;
  top: 14px;
  display: none;
}
</style>

