<template>
  <div class="container">
    <div class='rich' :style="{backgroundColor:comp.props.bgColor.val}" v-html="comp.props.content.val"></div>
  </div>
</template>

<script>
import eventBus from "../assets/js/eventBus.js";

export default {
  name: "CompRichEdit",
  props: ["comp", "cfg", "selectedPage"],
  data() {
    return {

    };
  },
  methods: {},
  created() {
    var that = this;
    that.mergeCompProps(that.comp);

    // 不同模式下的数据展示方式
    switch (that.sup8.env) {
      case that.sup8._def.env.preview:
        break;
      case that.sup8._def.env.design:
      case that.sup8._def.env.run:
        break;
      default:
        break;
    }
  },
  updated(){
    console.log(this.comp.props.content.val);
  },
  mounted: function() {
    console.log('richedit::mounted',this.comp);
    // if (
    //   !this.comp.props.content.val ||
    //   !this.comp.props.content.val.length <= 0
    // ) {
    //   this.comp.props.content.val = "";
    // }
  }
};
</script>
<style scoped>
.rich {
  padding: 0px 10px;
  min-height: 50px;
}
/* table 样式 */
.rich>>>table {
  border-top: 1px solid #ccc!important;
  border-left: 1px solid #ccc!important;
}
.rich>>>table td,
.rich>>>table th {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 3px 5px;
}
.rich>>>table th {
  border-bottom: 2px solid #ccc;
  text-align: center;
}

/* blockquote 样式 */
.rich>>>blockquote {
  display: block;
  border-left: 8px solid #d0e5f2;
  padding: 5px 10px;
  margin: 10px 0;
  line-height: 1.4;
  font-size: 100%;
  background-color: #f1f1f1;
}

/* code 样式 */
.rich>>>code {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  background-color: #f1f1f1;
  border-radius: 3px;
  padding: 3px 5px;
  margin: 0 3px;
}
.rich>>>pre code {
  display: block;
}

</style>
