<template>
  <div>
    <quill-editor
      ref="myTextEditor"
      v-model="content"
      :options="editorOption"
      @change="onEditorChange($event)"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorOption: {
        // 操作按钮
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ indent: '-1' }, { indent: '+1' }],
            //            [{ 'size': ['small', false, 'large', 'huge'] }],
            //              [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            /* [{ 'font': [] }], */
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ['clean']
            /* ['image','clean'], */
          ]
        },
        placeholder: '请输入通知内容...'
      }
    }
  },
  mounted() {},
  methods: {
    onEditorChange({ editor, html, text }) {
      // 富文本编辑器  文本改变时 设置字段值s
      this.content = html
      this.$emit('on-result-change', html)
    },
    _open(data) {
      // 回显内容
      this.content = data
    }
  }
}
</script>
<style>
.ql-container {
  height: 150px !important;
}
</style>
