quill-editor富文本编辑器基本使用

1. 第一步，安装

npm i vue-quill-editor -S
npm i quill -S

2. 在组件中使用

 <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"></quill-editor>

// script
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css' // 这个CSS必须引入
import 'quill/dist/quill.snow.css' // 主题CSS

const defaultContent = `默认内容`
const toolbarOptions = [
  ['bold', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ color: [] }], // 字体颜色，字体背景颜色
  [{ size: ['small', false, 'large', 'huge'] }] // 字体大小
]
 
data () {
  return {
     editorOption: {
        modules: {
          toolbar: toolbarOptions
        },
        placeholder: '请输入内容'
      },
  }
}

富文本框默认只有一行的高度，可以通过深度选择器设置富文本框的样式（less的语法是 /deep/）

 /deep/ .ql-container {
      max-width: 1000px;
      height: 360px;
      .ql-editor {
        max-width: 1000px;
      }
    }
 /deep/ .ql-toolbar {
      max-width: 1000px;
    }