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

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
// 引入样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
import { quillEditor } from 'vue-quill-editor'
import VueViews from '@/benyun/compVue/VueViews'
@Component({components:{quillEditor}})
export default class DistributionDevel extends VueViews {
  content:any= `` //双向数据绑定数据
  // 富文本编辑器配置
  editorOption:any= {  // 设置所有的选项
    theme: "snow", // or 'bubble'
    placeholder: "您想说点什么？",
    modules: {
      toolbar: {
        container: [
          ["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" }], // 缩进
          // [{'direction': 'rtl'}],                         // 文本方向
          [{ size: ["small", false, "large", "huge"] }], // 字体大小
          [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
          [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
          [{ font: [] }], // 字体种类
          [{ align: [] }], // 对齐方式
          ["clean"], // 清除文本格式
          ["link"] // 链接、图片、视频  
        ]
      }
    }
  }
  // editorOption:any= {
  //   modules: {
  //     toolbar: {
  //       container: [
  //         ['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' }], // 缩进
  //         [{ 'direction': 'rtl' }], // 文本方向
  //         [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
  //         [{ 'header': [1, 2, 3, 4, 5, 6, false] }], //几级标题
  //         [{ 'color': [] }, { 'background': [] }], // 字体颜色，字体背景颜色
  //         [{ 'font': [] }], //字体
  //         [{ 'align': [] }], //对齐方式
  //         ['clean'], //清除字体样式
  //       ], // 工具栏
  //     },
  //   }, //编辑器配置项
  // }
  // 失去焦点事件
  onEditorBlur(quill:any) {
    // console.log('editor blur!', quill)
  }
  // 获得焦点事件
  onEditorFocus(quill:any) {
    // console.log('editor focus!', quill)
  }
  // 准备富文本编辑器
  onEditorReady(quill:any) {
    // console.log('editor ready!', quill)
  }
  // 内容改变事件
  onEditorChange({ quill, html, text }:any) {
    this.content = html;
    this.$emit('onChange',this.content);
  }
  setValue(n:any){
    this.content = n
  }
}
</script>

<style lang="scss">
.ql-editor{
  padding: 0 !important;
  min-height: 220px;
  min-height: 230px;
  .ql-toolbar.ql-snow{
    padding-top: 0 !important;
  }
}
// 给文本内容加高度，滚动条
.quill-editor .ql-container {
    min-height: 220px;
  }
  .ql-container {
    min-height: 230px;
  }
  /*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: #ccc;
    height: 125px;
    overflow: auto;
  }
  /*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: #ccc;
    height: 125px;
    overflow: auto;
  }
</style>