vue-quill-editor 的使用方法

喜欢ヅ旅行 2022-10-17 01:54 95阅读 0赞

> 官方文档：https://www.npmjs.com/package/vue-quill-editor  
> gitHub地址：https://github.com/surmon-china/vue-quill-editor  
> 参考地址：https://www.jianshu.com/p/a6cba69d6e49

## 安装依赖 ##

cnpm install vue-quill-editor --save

## 引用方式 ##

*  全局引用，项目入口文件中（main.js）注册

import Vue from 'vue'
    import VueQuillEditor from 'vue-quill-editor'
    
    // require styles
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    
    Vue.use(VueQuillEditor)

*  局部引用，在需要调用的vue页面中声明

import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    
    import {  quillEditor } from 'vue-quill-editor'
    
    export default { 
      components: { 
        quillEditor
      }
    }

完成上述步骤之后即可使用

## 使用方法 ##

其中图片上传用 iview 中的 Upload 组件完成

import {  quillEditor } from 'vue-quill-editor'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    
    export default { 
      name: 'Ggxz',
      components: { 
        quillEditor
      },
      data() { 
        const toolbarOptions = [
          ['bold', 'italic', 'underline'],
          [{  size: ['small', false, 'large', 'huge'] }],
          [{  color: [] }, {  background: [] }],
          [{  font: [] }],
          [{  align: [] }],
          ['image']
        ]
        return { 
          uploadRichTextImg: '', // 上传图片地址接口
          uploadList: [], // 富文本编辑器的图文列表
          content: '', // 富文本里的内容
          editorOption: {  // 富文本编辑器的工具栏
            modules: { 
              toolbar: { 
                container: toolbarOptions, // 工具栏
                handlers: { 
                  image: function(value) {  // 对图片进行改造，默认是通过base64 ,现通过iview 去传。
                    if (value) { 
                      document.querySelector('#iviewUp input').click()
                    } else { 
                      this.quill.format('image', false)
                    }
                  }
                }
              }
            },
            imageResize: { }, // 自定义拉伸
            placeholder: '请输入公告内容'
          }
        }
      },
      methods: { 
      	onEditorChange(e) { 
          const _this = this
          _this.content = e.html // 标签以<p></p> 形式渲染 （重点）
          _this.contentTxt = e.text.substr(0, 100)
        },
        handleSuccessQuill(res) { 
          // 获取富文本组件实例
          const quill = this.$refs.myQuillEditor.quill
          // 如果上传成功
          if (res) { 
            // 获取光标所在位置
            const length = quill.getSelection().index
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', res.data.path)
            // 调整光标到最后
            quill.setSelection(length + 1)
          } else { 
            // 提示信息，需引入Message
            this.$Message.error('图片插入失败')
          }
        }
      }
    }

配置项请参考官网，效果如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]  
但是保存成功之后你会发现一些样式是用 ql开头的

![在这里插入图片描述][2021060110125381.png]  
我们该如何显示呢

## 展示方法 ##

在需要显示的页面，写入代码：（如果你是单页面引入的，记得在显示页面中再次引入样式）

import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

页面展示如下图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70]: /images/20221014/17a7ac64217140379ad0154c9bf2e2ff.png
[2021060110125381.png]: /images/20221014/4421682e07de490296f7e30ca2df5039.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xiMTEzNTkwOTI3Mw_size_16_color_FFFFFF_t_70 1]: /images/20221014/4e554b026b0241b686b7a9f16e9a3b22.png