<template>
  <div v-loading="dataLoading">
    <ueditor :content.sync="htmlContent" @ready="dataLoading = false" @loaded="dataLoading = false" :config="editorConfig"></ueditor>
  </div>
</template>

<script>
import ueditor from '@src/components/ueditor.vue'
export default {
  props: {content: String, dataModel: Object},
  components: {
    ueditor: ueditor
  },
  computed: {
    htmlContent: {
      get() {
        return this.content
      },
      set(val) {
        this.$emit('update:content', val)
      }
    }
  },
  data() {
    return {
      editorConfig: {
        catalogID: this.dataModel.catalogID,
        // 编辑器配置
        bodyFontFamily: 'inherit',
        sourceEditorFirst: false,
        //  initialContent: contents[0] // 初始化编辑器的内容
        wordCount: false, // 关闭字数统计
        minFrameHeight: 500, // 无内容时编辑器的原始高度
        //  initialFrameWidth: 690, //  初始化编辑器宽度默认680
        initialFrameHeight: 500, // 初始化编辑器高度
        initialStyle: 'body{font-size:14px;line-height:1.6;}',
        elementPathEnabled: false, // 关闭elementPath
        autoFloatEnabled: false, //  是否保持toolbar的位置不动默认true
        selfCatalog: 'Y',
        page: 1,
        toolbars: [
          [
            'source', '|', 'Undo', 'Redo', '|',
            'inserttable', 'insertorderedlist', 'insertunorderedlist', 'link', 'unlink', '|',
            'forecolor', 'fontfamily', 'fontsize', 'lineheight', '|',
            'bold', 'italic', 'underline', 'strikethrough', 'removeformat', '|',
            'indent', 'justifyleft', 'justifycenter', 'justifyright', '|',
            'zcatalog', 'zcontent', 'zimage', 'zresourceurl'
          ]
        ]
      },
      dataLoading: true
    }
  }
}
</script>

<style scoped>
</style>
