vue3富文本编辑器vue-quill-editor详细配置及使用教程

官网地址：https://vueup.github.io/vue-quill/

效果图

 1、安装

npm install @vueup/vue-quill@alpha --save
npm install quill-image-extend-module --save

2、创建quillTool.js（用于添加超链接、视频）

import { Quill } from '@vueup/vue-quill'
// 源码中是import直接倒入，这里要用Quill.import引入
const BlockEmbed = Quill.import('blots/block/embed')
const Link = Quill.import('formats/link')

const ATTRIBUTES = ['height', 'width']

class quillTool extends BlockEmbed {
    static create(value) {
        const node = super.create(value)
        // 添加video标签所需的属性
        node.setAttribute('controls', 'controls')
        node.setAttribute('type', 'video/mp4')
        node.setAttribute('src', this.sanitize(value))
        return node
    }

    static formats(domNode) {
        return ATTRIBUTES.reduce((formats, attribute) => {
            if (domNode.hasAttribute(attribute)) {
                formats[attribute] = domNode.getAttribute(attribute)
            }
            return formats
        }, {})
    }

    static sanitize(url) {
        return Link.sanitize(url)
    }

    static value(domNode) {
        return domNode.getAttribute('src')
    }

    format(name, value) {
        if (ATTRIBUTES.indexOf(name) > -1) {
            if (value) {
                this.domNode.setAttribute(name, value)
            } else {
                this.domNode.removeAttribute(name)
            }
        } else {
            super.format(name, value)
        }
    }

    html() {
        const { video } = this.value()
        return `<a href="${video}">${video}</a>`
    }
}
quillTool.blotName = 'video' // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot
quillTool.className = 'ql-video'
quillTool.tagName = 'video' // 用video标签替换iframe

export default quillTool

3、完整代码

<template>

    <QuillEditor v-model:content="content" :options="editorOption" contentType="html" />

</template>

<script>

// 工具栏配置
const toolbarOptions = [
    ['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', 'video'] // 链接、图片、视频
]
import {QuillEditor, Quill } from '@vueup/vue-quill'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import quillTool from '@/utils/quillTool'
Quill.register(quillTool, true)
Quill.register('modules/ImageExtend', ImageExtend)
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    components: { QuillEditor },
    props: ['model'],
    data() {
        return {
            content: '',
            editorOption: {
                theme: 'snow',
                placeholder: '请输入',
                modules: {
                    ImageExtend: {
                        name: 'file_name', // 参数名
                        action: window.BASE_URL + '/backend/upload/image', // 服务器地址，如果为空则采用base64插入图片
                        headers: xhr => { // 设置请求头参数（选填）
                            xhr.setRequestHeader('s', '疯狂星期四v50')
                        },
                        response: res => {
                            return res.data.url
                        },
                        size: 8, // 图片不能超过8M
                        sizeError: () => {
                            this.$message.error('粘贴图片大小不能超过8MB!')
                        }
                    },
                    toolbar: {
                        container: toolbarOptions,
                        handlers: {
                            image: function(value) {
                                QuillWatch.emit(this.quill.id)
                            },
                            link: function(value) {
                                if (value) {
                                    var href = prompt('请输入链接地址：')
                                    this.quill.format('link', href)
                                } else {
                                    this.quill.format('link', false)
                                }
                            },
                            video: function(value) {
                                if (value) {
                                    var href = prompt('请输入视频链接：')
                                    this.quill.format('video', href)
                                } else {
                                    this.quill.format('video', false)
                                }
                            }
                        }
                    }
                }
            },
        }
    }
}
</script>

<style>

    .ql-container {
        height: 300px;
        line-height: normal;
        width: auto;
    }

    span.ql-size {
        max-width: 80px !important;
    }

    .ql-tooltip[data-mode="link"]::before {
        content: "请输入链接地址:";
    }

    .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
    }

    .ql-tooltip[data-mode="video"] {
        left: 0 !important;
    }

    .ql-tooltip[data-mode="video"]::before {
        content: "请输入视频地址:";
    }

    .ql-picker.ql-size .ql-picker-label::before,
    .ql-picker.ql-size .ql-picker-item::before {
        content: "14px";
    }

    .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
    .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
        content: "10px";
    }

    .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
    .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
        content: "18px";
    }

    .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
    .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
        content: "32px";
    }

    .ql-picker.ql-header .ql-picker-label::before,
    .ql-picker.ql-header .ql-picker-item::before {
        content: "文本";
    }

    .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: "标题1";
    }

    .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: "标题2";
    }

    .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: "标题3";
    }

    .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: "标题4";
    }

    .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
        content: "标题5";
    }

    .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
        content: "标题6";
    }

    .ql-picker.ql-font .ql-picker-label::before,
    .ql-picker.ql-font .ql-picker-item::before {
        content: "标准字体";
    }

    .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
    .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
        content: "衬线字体";
    }

    .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
    .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
        content: "等宽字体";
    }

</style>

最后

以上就是清爽电脑为你收集整理的vue3富文本编辑器vue-quill-editor详细配置及使用教程的全部内容，希望文章能够帮你解决vue3富文本编辑器vue-quill-editor详细配置及使用教程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。