<template>
    <div>
        <quill-editor
            class="editor"
            :style="propStyle"
            :value="value"
            @input="onInput"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
            @ready="onEditorReady($event)">
        </quill-editor>
    </div>
</template>
<script>
// 工具栏配置

import { quillEditor } from 'vue-quill-editor';
import Quill from 'quill';
const fontSizeStyle = Quill.import('attributors/style/size');
const Font = Quill.import('formats/font');
const fontSizeList = [
  '14px',
  '16px',
  '18px',
  '20px',
  '22px',
  '32px'
];
const fontSizeSelected = [
  '14px',
  '16px',
  '18px',
  '20px',
  '22px',
  '32px'
];
fontSizeStyle.whitelist = fontSizeList;
Quill.register(fontSizeStyle, true);
export default {
  name: 'ElEditor',
  model: {
    prop: 'value',
    event: 'updateValue'
  },
  props: {
    width: {
      type: String,
      default() {
        return 'auto';
      }
    },
    height: {
      type: String,
      default() {
        return '400px';
      }
    },
    /* 编辑器的内容 */
    value: {
      type: String
    },
    theme: {
      type: String,
      default: 'snow'
    },
    placeholder: {
      type: String,
      default: '您想说点什么？'
    },
    bound: {
      type: String,
      default: 'document.body'
    },
    debug: {
      type: String,
      default: 'warn'
    },
    formats: {
      type: String,
      default: 'All formats'
    },
    readOnly: {
      type: Boolean,
      default: false
    },
    strict: {
      type: Boolean,
      default: true
    },
    scrollingContainer: {
      type: String,
      default: null
    },
    /* 工具栏配置 */
    toolbarOptions: {
      type: Array,
      default() {
        return [
          ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
          ['blockquote', 'code-block'], // 引用  代码块
          [{ header: 1 }, { header: 2 }], // 1、2 级标题
          [{ 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] }], // 标题
          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
          [{ font: [] }], // 字体种类
          [{ align: [] }], // 对齐方式
          ['clean'], // 清除文本格式
          ['link', 'image'] // 链接、图片
        ];
      }
    },
    toolbarHandlers: {
      type: Object,
      default() {
        return {};
      }
    },
    historyOptions: {
      type: Object,
      default() {
        return {};
      }
    },
    clipboardOptions: {
      type: Object,
      default() {
        return {};
      }
    }
  },

  components: {
    quillEditor
  },

  data() {
    return {
      content: this.value,
      editorOption: {
        theme: this.theme, // or 'bubble'
        placeholder: this.placeholder,
        bound: this.bound,
        strict: this.strict,
        debug: this.debug,
        formats: this.formats,
        readOnly: this.readOnly,
        scrollingContainer: this.scrollingContainer,
        modules: {
          toolbar: {
            container: this.toolbarOptions,
            handlers: this.toolbarHandlers
          },
          history: this.historyOptions,
          clipboard: this.clipboardOptions
        }
      },
      rawToolbarOptions: this.toolbarOptions
    };
  },

  methods: {
    onEditorBlur(event) {
      // 失去焦点事件
      this.$emit('blur', event);
    },
    onEditorFocus(event) {
      // 获得焦点事件
      this.$emit('focus', event);
    },
    onEditorChange() {
      // 内容改变事件
      this.$emit('input', this.content);
    },
    onEditorReady(event) {
      // 获得焦点事件
      this.$emit('ready', event);
    },
    onInput(e) {
      this.$emit('updateValue', e);
    }
  },

  computed: {
    propStyle() {
      return `width: ${this.width}; height: ${this.height};`;
    }
  },
  watch: {
    toolbarOptions: {
      handler() {
        this.toolbarOptions.forEach((item) => {
          if (item.length && item[0] && item[0].font && item[0].font.length) {
            Font.whitelist = item[0].font;
            Quill.register(Font);
          }
        });
        this.rawToolbarOptions = this.toolbarOptions;
        this.rawToolbarOptions.forEach((item) => {
          if (item.length && item[0] && item[0].size) {
            item[0].size = fontSizeSelected;
          }
        });
        this.$set(this.editorOption, 'modules', {
          toolbar: {
            container: this.rawToolbarOptions,
            handlers: this.toolbarHandlers
          },
          history: this.historyOptions,
          clipboard: this.clipboardOptions
        });
      },
      immediate: true
    }
  }
};
</script> 