
<template>
  <div>
    <vue-ueditor-wrap ref="ueditor"
                      v-model="editorContent"
                      :destroy="false"
                      :config="config" @ready="ready" :key="timestamp"></vue-ueditor-wrap>
  </div>
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap';

  // const API_VERSION_PROD = ''
  // const API_VERSION_PROD = '/server-api/v1';
  // const API_VERSION_DEV = '/server-platform/v1';
  // const BASE_URL = process.env.NODE_ENV === 'production' ? API_VERSION_PROD : API_VERSION_DEV;
  const BASE_URL = `/content-api/v1`;

  export default{
    name: "simple-editor",

    props: {
      content:{
        type: String,
        value: '',
      },
      autoHeight:{
        type: Boolean,
        value: false
      },
      height:{
        type: Number,
        value: 100
      },
    },

    components: {
      VueUeditorWrap
    },

    mounted () {
      this.editorContent = this.content
    },
    watch: {
      content:{
        handler () {
          this.editorContent = this.content
        },
        deep: true,
      },
      editorContent () {
        this.$emit('update:content', this.editorContent)
      }
    },

    data(){
      return {
        timestamp: new Date().getTime(),
        editorContent: '',
        config: {
          maximumWords:1000,

          UEDITOR_HOME_URL: '/static/UEditor/',
          // 编辑器不自动被内容撑高
          autoHeightEnabled: this.autoHeight,
          // 初始容器高度
          initialFrameHeight: this.height,
          // 初始容器宽度
          initialFrameWidth: '100%',
          // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
          // serverUrl: location.protocol + '//' + location.host + '/merchant-management/v1/ueditor/exec',
          serverUrl: location.protocol + '//' + location.host +BASE_URL+ '/ueditor/exec',
          // serverUrl: BASE_URL + 'ueditor/exec',

          toolbars: [
            [
              'source', //源代码
              'pasteplain', //纯文本粘贴模式
              '|',
              'bold', //加粗
              'indent', //首行缩进
              'italic', //斜体
              'underline', //下划线
              'strikethrough', //删除线
              '|',
              'fontfamily', //字体
              'fontsize', //字号
              'lineheight', //行间距
              'paragraph', //段落格式
              'forecolor', //字体颜色
              '|',
              'justifyleft', //居左对齐
              'justifyright', //居右对齐
              'justifycenter', //居中对齐
              'justifyjustify', //两端对齐
              // 'map', //Baidu地图
              'simpleupload', //单图上传
              'insertimage', //单图上传
              'insertvideo', //视频
            ]
          ]
        },

        editorInstance: null
      }
    },
    created(){
      if(process.env.NODE_ENV === 'development'){
        this.config.UEDITOR_HOME_URL = '/static/UEditor/'
      }else{
        this.config.UEDITOR_HOME_URL = '/index/static/UEditor/'
      }
    },

    methods: {
      ready(editorInstance) {
        this.editorInstance = editorInstance
      },
      characterText(text){
        this.editorInstance.focus();
        this.editorInstance.execCommand('inserthtml',text)
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
