vue2-editor非常不错,可惜并未带全屏功能,自己实现了一个,供大家参考。

实现思路:自定义模块。

1. 定义全屏模块Fullscreen

/**
 * 编辑器的全屏实现
 */
import noScroll from 'no-scroll'

export default class Fullscreen {
    constructor (quill, options = {}) {
        this.quill = quill
        this.options = options
        this.fullscreen = false
        this.editorContainer = this.quill.container.parentNode.parentNode
    }

    handle () {
        if (! this.fullscreen) {
            this.fullscreen = true
            this.editorContainer.className = 'ql-editor ql-blank editor-fullscreen'
            noScroll.on()
        }else{
            this.fullscreen = false
            this.editorContainer.className = 'ql-editor ql-blank'
            noScroll.off()
        }
    }
}
Fullscreen.js

相关文章: