Vue +vue-quill-editor+ Element UI使用富文本编辑器，上传图片，上传视频

疯子_百炼成仙

已于 2023-05-16 14:32:15 修改

阅读量4.7k

点赞数 3

文章标签： vue.js ui javascript

于 2022-12-30 14:27:02 首次发布

本文链接：https://blog.csdn.net/memory_888/article/details/128495158

版权

本文详细介绍了如何在Vue.js项目中使用vue-quill-editor富文本编辑器，包括基本使用方法如安装、引入组件、配置工具栏、设置中文提示以及自定义字体和字号。还涵盖了扩展使用，如支持图片拖拽和放大缩小、动态上传到服务器、视频上传以及修改视频标签为<video>。同时，提供了详细的代码示例和配置选项，帮助开发者实现富文本编辑器的各种功能。

摘要由CSDN通过智能技术生成

如果你们有问题，可以发评论提问，我看见一定回复！！！！！

文章目录

一、基本使用

1、下载vue-quill-editor组件

npm install vue-quill-editor -S

2、引入· 富文本组件

方式一：全局引入 (在 main.js文件中)

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

方式二：按需引入（在单个组件中引用）

import {
    quillEditor } from 'vue-quill-editor'

export default {
   
  components: {
   
    quillEditor
  }
}

3、工具栏相关配置

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
  ["blockquote", "code-block", "formula"], // 引用  代码块 插入公式
  [{
    header: 1 }, {
    header: 2 }], // 1、2 级标题
  [{
    list: "ordered" }, {
    list: "bullet" }], // 有序、无序列表
  [{
    script: "sub" }, {
    script: "super" }], // 上标/下标
  [{
    indent: "-1" }, {
    indent: "+1" }], // 缩进
  [{
    direction: "rtl" }], // 文本方向
  [{
    size: [false,"14px","16px","18px","20px","22px","26px","28px","30p,] }], // 字体大小
  [{
    header: [1, 2, 3, 4, 5,6, false] }], // 标题
  [{
    color: [] }, {
    background: [] }], // 字体颜色、字体背景颜色
  [{
    font: ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",] }], // 字体种类
  [{
    align: [] }], // 对齐方式
  ["clean"], // 清除文本格式
  ["link", "image", "video", "report"], // 链接、图片、视频、自定义行为
];

4、设置工具栏中文提示

setTitleConfig() {
   
    // toolbar标题
    const titleConfig = [
        {
    Choice: '.ql-insertMetric', title: '跳转配置' },
        {
    Choice: '.ql-bold', title: '加粗' },
        {
    Choice: '.ql-italic', title: '斜体' },
        {
    Choice: '.ql-underline', title: '下划线' },
        {
    Choice: '.ql-header', title: '段落格式' },
        {
    Choice: '.ql-strike', title: '删除线' },
        {
    Choice: '.ql-blockquote', title: '块引用' },
        {
    Choice: '.ql-code', title: '插入代码' },
        {
    Choice: '.ql-code-block', title: '插入代码段' },
        {
    Choice: '.ql-font', title: '字体' },
        {
    Choice: '.ql-size', title: '字体大小' },
        {
    Choice: '.ql-list[value="ordered"]', title: '编号列表' },
        {
    Choice: '.ql-list[value="bullet"]', title: '项目列表' },
        {
    Choice: '.ql-direction', title: '文本方向' },
        {
    Choice: '.ql-header[value="1"]', title: 'h1' },
        {
    Choice: '.ql-header[value="2"]', title: 'h2' },
        {
    Choice: '.ql-align', title: '对齐方式' },
        {
    Choice: '.ql-color', title: '字体颜色' },
        {
    Choice: '.ql-background', title: '背景颜色' },
        {
    Choice: '.ql-image', title: '图像' },
        {
    Choice: '.ql-video', title: '视频' },
        {
    Choice: '.ql-link', title: '添加链接' },
        {
    Choice: '.ql-formula', title: '插入公式' },
        {
    Choice: '.ql-clean', title: '清除字体格式' },
        {
    Choice: '.ql-script[value="sub"]', title: '下标' },
        {
    Choice: '.ql-script[value="super"]', title: '上标' },
        {
    Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
        {
    Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
        {
    Choice: '.ql-header .ql-picker-label', title: '标题大小' },
        {
    Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
        {
    Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
        {
    Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
        {
    Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
        {
    Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
        {
    Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
        {
    Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
         {
    Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
        {
    Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
        {
    Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
        {
    Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
        {
    Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
        {
    Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
        {
    Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
        {
    Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐'