
<template>
  <div class="edit_container">
    <quill-editor
      class="ql-editor"
      v-model="content"
      :id="id"
      :ref="refs"
      :options="editorOption"
      @focus="onEditorFocus($event)"
      @blur="onEditorBlur($event)"
      @change="onEditorChange($event)"
      @ready="onEditorReady($event)"
    ></quill-editor>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ header: 1 }, { header: 2 }],
  [{ list: 'ordered' }, { list: 'bullet' }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ script: 'sub' }, { script: 'supper' }],
  [{ indent: '-1' }, { indent: '+1' }],
  [{ size: ['small', false, 'large', 'huge'] }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ['link', 'image', 'video'],
  ['clean']
]

export default {
  name: 'VueQuillEditor',
  components: {
    quillEditor
  },
  props: ['id', 'refs', 'vueContnet'],
  data () {
    return {
      content: '', // 富文本内容
      editorOption: {
        //  富文本编辑器配置
        modules: {
          // 工具栏定义的
          toolbar: toolbarOptions,
          
        },
        // 主题
        theme: 'snow',
        placeholder: '请输入正文',
      }
    }
  },
  created () {
    this.content = this.vueContnet
    console.log('this.vueContnet',this.vueContnet);
  },
  methods: {
    // 失去焦点事件
    onEditorBlur (quill) {
      console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus (quill) {
      console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady (quill) {
      console.log('editor ready!', quill)
    },
    // 内容改变事件
    onEditorChange ({ quill, html, text }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    }
  },
  watch:{
    // content(newval,oldval){
    //   this.content =newval
    // }
  }
}
</script>

<style scoped >
  .ql-editor {
    line-height: normal !important;
    /* width: 335px;  我是需要展示给手机端所以设置了宽 */
  }
  .ql-snow .ql-tooltip[data-mode='link']::before {
    content: '请输入链接地址:';
  }
  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: '保存';
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode='video']::before {
    content: '请输入视频地址:';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='small']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='small']::before {
    content: '10px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='large']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='large']::before {
    content: '18px';
  }
  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='huge']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='huge']::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='1']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='1']::before {
    content: '标题1';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='2']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='2']::before {
    content: '标题2';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='3']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='3']::before {
    content: '标题3';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='4']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='4']::before {
    content: '标题4';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='5']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='5']::before {
    content: '标题5';
  }
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value='6']::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value='6']::before {
    content: '标题6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='serif']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='serif']::before {
    content: '衬线字体';
  }
  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value='monospace']::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value='monospace']::before {
    content: '等宽字体';
  }
</style>

<!-- <template>
  <div>
    <div :id="this.id"></div>
  </div>
</template>

<script>
import VueUeditorWrap from 'vue-ueditor-wrap'
  export default {
    name: 'Editor',
    props: ['id', 'r_content'],
    components: {
      VueUeditorWrap
    },
    data() {
      return {
        ue: '', //ueditor实例
        content: '' //编辑器内容
      }
    },
    methods: {
      //初始化编辑器
      initEditor() {
        this.ue = UE.getEditor(this.id, {
          initialFrameWidth: '100%',
          initialFrameHeight: '350',
          topOffset: '110',
          toolbars: [[
            'bold', //加粗
            'underline', //下划线
            'justifyleft', //居左对齐
            'justifycenter', //居中对齐
            'justifyright', //居右对齐
            'justifyjustify', //两端对齐
            'formatmatch', //格式刷
            'fontsize', //字体大小
            'fontfamily', //字体
            'forecolor', //字体颜色
            'table',
          ]]
          // scaleEnabled: true,
        })
        //编辑器准备就绪后会触发该事件
        this.ue.addListener('ready', () => {
          //设置可以编辑
          this.ue.setEnabled()
          this.ue.setContent(this.r_content)
        })
        //编辑器内容修改时
        this.selectionchange()
      },

      //编辑器内容修改时
      selectionchange() {
        this.ue.addListener('selectionchange', () => {
          this.content = this.ue.getContent()
        })
      }

    },

    activated() {
      //初始化编辑器
      this.initEditor()
    },
    deactivated() {
      //销毁编辑器实例，使用textarea代替
      this.ue.destroy()
      //重置编辑器，可用来做多个tab使用同一个编辑器实例
      //this.ue.reset()
      //如果要使用同一个实例,请注释destroy()方法
    },

    computed: {
      // 利用计算属性返回prop里传过来的内容
      revecive: function() {
        return this.r_content
      }
    },

    watch: {
      // !!! 这里需要注意，需要一个watch来实时更新编辑器的内容
      revecive: function() {
        this.ue.setContent(this.r_content)
      }
    }
  }
</script>


<style>
  .edui-editor {
    z-index: 60 !important;
  }
  #edui_fixedlayer{
    z-index: 5000 !important;
  }
</style> -->

