vue下富文本编辑器 quill的配置及使用

富文本编辑器

1.安装quill插件
进入项目的目录下输入命令
npm install quill --save

2.在组件中导入quill
<script>
//导入插件
    import Quill from 'quill'
</script>

3.在组件导入quill的样式表
<style>
    /* 导入样式表 一定要引入这三个css，不然文本编辑器会出现不规则黑白几何图形 */
    @import 'quill/dist/quill.snow.css'
</style>

4.配置基本功能
在mount()中添加下面代码,完成quill初始化

mounted() {
            
            this.$nextTick(resp=>{
                
                
                // quill富文本 初始化功能
                    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.quill = new Quill('#editor', {
                        modules: {
                          toolbar: toolbarOptions
                        },
                        theme: 'snow',                // 使用主题样式
                        placeholder: '请输入内容'          })
                    })
            })
}

5.需要注意的地址4中的#editor它是div的id,是富文本显示的div

6.基本方法
// 获取内容length
const length =  this.quill.getLength() - 1            // 注意要-1

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

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

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

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