<template>
  <div style="margin-top: 5px">
    <quill-editor
      ref="myTextEditor"
      v-model="html"
      :options="editorOption"
      @change="onEditorChange($event)"></quill-editor>
  </div>
</template>

<script>
export default {
  props: ['html'],
  data() {
    return {
      content: '',
      editorOption: {
        // 操作按钮
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ header: 1 }, { header: 2 }],
            [{ color: [] }],
            ['image']
          ]
        },
        placeholder: '请完善新闻详情'
      }
    }
  },
  methods: {
    onEditorChange({ editor, html, text }) {
      // 富文本编辑器  文本改变时 设置字段值
      this.html = html
      const data = {
        html: this.html,
        content: text
      }
      this.$emit('on-result-change', data)
    }
  }
}
</script>
<style>
.ql-container {
  height: 300px !important;
}

.ql-snow {
  border: 1px solid #dddee1 !important;
}

.ql-editor.ql-blank::before {
  color: #bbbec4 /* rgba(0,0,0,0.6)*/;
  font-style: normal;
}

.ql-toolbar.ql-snow {
  border-radius: 5px 5px 0 0 !important;
}

.ql-container.ql-snow {
  border-radius: 0 0 5px 5px !important;
  border-top: none !important;
}
</style>
