富文本插件Quill的基本使用

1. 插件基本介绍

• 中文网址
• 官方网址
• 功能示例

2. 引入

• 以vue为例

 import 'quill/dist/quill.snow.css'
 import Quill from 'quill'

3. 配置基本功能

<div id="editor" class="editor"></div>

mounted() {
    // 初始化功能
    const toolbarOptions = [
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],        // 标题字体
      [{ 'font': [] }],                                 // 字体
      ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
      [{ 'align': [] }],                                // 对齐方式
      ['blockquote', 'code-block'],                     // 文本块/代码块
      [{ 'header': 1 }, { 'header': 2 }],               // 用户自定义按钮值
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],     // 有序/无序列表
      [{ 'script': 'sub'}, { 'script': 'super' }],      // 上标/下标
      [{ 'indent': '-1'}, { 'indent': '+1' }],          // 减少缩进/缩进
      [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
      ['clean'],                                        // 清除格式
      ['image', 'link', 'video']                        // 图片 / 链接 / 视频
    ]
    // 挂载
    this.$nextTick(() => {
      this.quills = new Quill('#editor', {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',                // 使用主题样式
        placeholder: '请输入内容'
      })
    })
  }

4. 基本方法

// 获取内容length
const length =  this.quills.getLength() - 1            // 注意要-1

// 获取纯文本
const temptext = this.quills.getText()                  // 获取文本
const text = temptext.trim().replace(/\s/g, '')         // 去掉多余的空格

// 获取html
const html = this.quills.root.innerHTML              // 官方不推荐直接获取html，有getContent方法

// 初始化赋值
this.quills.root.innerHTML = html

5. 注意事项

• 自定义功能较麻烦
• 图片是以img标签插入的，src是base64的文件流，没有先上传，所以造成文本内容可能会很大