欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue中使用富文本编辑器Quill

程序员文章站 2022-03-25 11:06:03
quill,样式不用多说,也是主流的黑白清新风,美观,功能上虽然不是很多,甚至还没有表格,网络图片上传(可以通过复制网络图片并黏贴解决)等功能,但它的代码高亮是最完美的,同样支持行内编辑模式,可自定义,总的来说,这是一款优点多但缺点同样明显的编辑器,以前用过UEditor,区别大概就是UEditor需要在config文件配置参数,比如上传图片路径之类,Quill不需要,另外就是有个vue-quill-editor包,配合vue使用比较简单吧,所以我比较喜爱这款。安装npm install quill@1...

quill,样式不用多说,也是主流的黑白清新风,美观,功能上虽然不是很多,甚至还没有表格,网络图片上传(可以通过复制网络图片并黏贴解决)等功能,但它的代码高亮是最完美的,同样支持行内编辑模式,可自定义,总的来说,这是一款优点多但缺点同样明显的编辑器,以前用过UEditor,区别大概就是UEditor需要在config文件配置参数,比如上传图片路径之类,Quill不需要,另外就是有个vue-quill-editor包,配合vue使用比较简单吧,所以我比较喜爱这款。

安装

npm install quill@1.3.6

封装通用组件

新建一个quill.js文件,如下
vue中使用富文本编辑器Quill
复制下面的代码到quill.js

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

export default {
  name: 'quill',
  props: {
    value: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      Quill: undefined,
      currentValue: '',
      options: {
        theme: 'snow',
        bounds: document.body,
        debug: 'warn',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 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', 'image']
          ]
        },
        placeholder: '书写你的内容',
        readOnly: false
      }
    }
  },
  watch: {
    value: {
      handler (val) {
        // 确认是新的值
        if (val !== this.currentValue) {
          this.currentValue = val
          // 尝试更新
          if (this.Quill) {
            this.Quill.pasteHTML(this.value)
          }
        }
      },
      immediate: true
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      const editor = this.$refs.editor
      // 初始化编辑器
      this.Quill = new Quill(editor, this.options)
      // 默认值
      this.Quill.pasteHTML(this.currentValue)
      // 绑定事件
      this.Quill.on('text-change', (delta, oldDelta, source) => {
        const html = this.$refs.editor.children[0].innerHTML
        const text = this.Quill.getText()
        const quill = this.Quill
        // 更新内部的值
        this.currentValue = html
        // 发出事件 v-model
        this.$emit('input', html)
        // 发出事件
        this.$emit('change', { html, text, quill })
      })
      // 将一些 quill 自带的事件传递出去
      this.Quill.on('text-change', (delta, oldDelta, source) => {
        this.$emit('text-change', delta, oldDelta, source)
      })
      this.Quill.on('selection-change', (range, oldRange, source) => {
        this.$emit('selection-change', range, oldRange, source)
      })
      this.Quill.on('editor-change', (eventName, ...args) => {
        this.$emit('editor-change', eventName, ...args)
      })
    }
  },
  render() {
    return (
      <div ref="editor"></div>
    )
  }
}

注册一个全局组件

1.在src路径下新建一个plugins文件
vue中使用富文本编辑器Quill
2.新建一个名为globalComponents.js文件,插入以下代码

import xgjEmpty from '@/components/empty/xgj-empty'
import Quill from '@/components/quill/quill'

function plugin(Vue) {
  if (plugin.installed) {
    return
  }
  Vue.component('xgjEmpty', xgjEmpty)
  Vue.component('Quill', Quill)
}

export default plugin

3.在main.js文件引入globalComponents.js
vue中使用富文本编辑器Quill

import GL_Component from '@/plugins/globalComponents'

Vue.use(GL_Component)

在模板中使用quill组件

vue中使用富文本编辑器Quill

// JSX
<quill style="min-height: 200px; margin-bottom: 20px;"
       onInput={this.inputHandler}
       on-text-change={this.textChangeHandler}
       on-selection-change={this.selectionChangeHandler}
       on-editor-change={this.editorChangeHandler}>
</quill>

// vue template
<quill
      style="min-height: 200px; margin-bottom: 20px;"
      @input="inputHandler"
      @text-change="textChangeHandler"
      @selection-change="selectionChangeHandler"
      @editor-change="editorChangeHandler"/>
// vue methods
  methods: {
    inputHandler(input) {
      this.ruleForm.content = input;
    },
    textChangeHandler (delta, oldDelta, source) {
      // console.group('QuillEditor textChangeHandler')
      // console.log(delta, oldDelta, source)
    },
    selectionChangeHandler (range, oldRange, source) {
      // console.group('QuillEditor selectionChangeHandler')
      // console.log(range, oldRange, source)
    },
    editorChangeHandler (eventName, ...args) {
      // console.group('QuillEditor editorChangeHandler')
      // console.log(eventName, args)
    },

  },      

效果

vue中使用富文本编辑器Quill
vue中使用富文本编辑器Quill

本文地址:https://blog.csdn.net/success400/article/details/109236565

相关标签: Vue