如果你們有問題，可以發(fā)評(píng)論提問，我看見一定回復(fù)?。。。?！

一、基本使用

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)

• 方式二：按需引入 （在單個(gè)組件中引用）

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

export default {
  components: {
    quillEditor
  }
}

3、工具欄相關(guān)配置

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜體 下劃線 刪除線
  ["blockquote", "code-block", "formula"], // 引用  代碼塊 插入公式
  [{ header: 1 }, { header: 2 }], // 1、2 級(jí)標(biāo)題
  [{ list: "ordered" }, { list: "bullet" }], // 有序、無序列表
  [{ script: "sub" }, { script: "super" }], // 上標(biāo)/下標(biāo)
  [{ indent: "-1" }, { indent: "+1" }], // 縮進(jìn)
  [{ direction: "rtl" }], // 文本方向
  [{ size: [false,"14px","16px","18px","20px","22px","26px","28px","30p,] }], // 字體大小
  [{ header: [1, 2, 3, 4, 5,6, false] }], // 標(biāo)題
  [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
  [{ font: ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",] }], // 字體種類
  [{ align: [] }], // 對(duì)齊方式
  ["clean"], // 清除文本格式
  ["link", "image", "video", "report"], // 鏈接、圖片、視頻、自定義行為
];

4、設(shè)置工具欄中文提示

setTitleConfig() {
    // toolbar標(biāo)題
    const titleConfig = [
        { Choice: '.ql-insertMetric', title: '跳轉(zhuǎn)配置' },
        { 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: '編號(hào)列表' },
        { Choice: '.ql-list[value="bullet"]', title: '項(xiàng)目列表' },
        { Choice: '.ql-direction', title: '文本方向' },
        { Choice: '.ql-header[value="1"]', title: 'h1' },
        { Choice: '.ql-header[value="2"]', title: 'h2' },
        { Choice: '.ql-align', title: '對(duì)齊方式' },
        { 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: '下標(biāo)' },
        { Choice: '.ql-script[value="super"]', title: '上標(biāo)' },
        { Choice: '.ql-indent[value="-1"]', title: '向左縮進(jìn)' },
        { Choice: '.ql-indent[value="+1"]', title: '向右縮進(jìn)' },
        { Choice: '.ql-header .ql-picker-label', title: '標(biāo)題大小' },
        { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '標(biāo)題一' },
        { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '標(biāo)題二' },
        { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '標(biāo)題三' },
        { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '標(biāo)題四' },
        { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '標(biāo)題五' },
        { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '標(biāo)題六' },
        { Choice: '.ql-header .ql-picker-item:last-child', title: '標(biāo)準(zhǔn)' },
         { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小號(hào)' },
        { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大號(hào)' },
        { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大號(hào)' },
        { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '標(biāo)準(zhǔn)' },
        { Choice: '.ql-align .ql-picker-item:first-child', title: '居左對(duì)齊' },
        { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中對(duì)齊' },
        { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右對(duì)齊' },
        { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '兩端對(duì)齊' }
    ];
    for (const item of titleConfig) {
        const tip = document.querySelector(".quill-editor " + item.Choice);
        if (!tip) continue;
        tip.setAttribute("title", item.title);
    }
},

// 使用
mounted() {
    this.$nextTick(() => {
      this.setTitleConfig();
    });
},

5、修改vue-quill-editor字體及字號(hào)

• 修改字體和字號(hào)

import { Quill } from "vue-quill-editor";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

//自定義樣式一定要在原插件css下面引入
import "@/assets/css/quillEditor.css";
// 自定義字體大小
var sizes = [false,"14px","16px","18px","20px","22px","26px","28px","30px",];
var Size = Quill.import("formats/size");
Size.whitelist = sizes;
// 自定義字體
var fonts = ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);

• 在assets/css文件夾下創(chuàng)建css文件quillEditor.css

/* 字體風(fēng)格 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  content: "宋體";
  font-family: "SimSun";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  content: "黑體";
  font-family: "SimHei";
}

.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  content: "微軟雅黑";
  font-family: "Microsoft YaHei";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  content: "楷體";
  font-family: "KaiTi";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  content: "仿宋";
  font-family: "FangSong";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial";
  font-family: "Arial";
}

.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Times-New-Roman"]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun { font-family: "SimSun"; }
.ql-font-SimHei { font-family: "SimHei"; }
.ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; }
.ql-font-KaiTi { font-family: "KaiTi"; }
.ql-font-FangSong { font-family: "FangSong"; }
.ql-font-Arial { font-family: "Arial"; }
.ql-font-Times-New-Roman { font-family: "Times New Roman"; }
.ql-font-sans-serif { font-family: "sans-serif"; }

/* 字體大小 */
.ql-snow .ql-picker.ql-size .ql-picker-label::before { content: "字體大小"; }
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "常規(guī)"; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
  content: "14px";
  font-size: 14px;
}

.ql-size-14px { font-size: 14px; }

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

.ql-size-16px { font-size: 16px; }

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

.ql-size-18px { font-size: 18px; }

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

.ql-size-20px { font-size: 20px; }

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

.ql-size-22px { font-size: 22px; }

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

.ql-size-26px { font-size: 26px; }

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

.ql-size-28px { font-size: 28px; }

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

.ql-size-30px { font-size: 30px; }

/* 段落大小 */
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "標(biāo)題1";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "標(biāo)題2";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "標(biāo)題3";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "標(biāo)題4";
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "標(biāo)題5";
}
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "常規(guī)";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before {
  content: "標(biāo)題大小";
}

/* 默認(rèn)設(shè)置 */
.ql-snow .ql-editor { font-size: 14px; }
/* 查看樣式 */
.view-editor .ql-toolbar { display: none; }
.view-editor .ql-container.ql-snow { border: 0; }
.view-editor .ql-container.ql-snow .ql-editor { padding: 0; }
/* 編輯樣式 */
.edit-editor .ql-toolbar { display: block; }
.edit-editor .ql-container.ql-snow {
  border: 1px solid #ccc;
  min-height: inherit;
}

/* 自定義toobar樣式設(shè)計(jì) --- 根據(jù)情況設(shè)計(jì) */
/* 工作匯報(bào)彈窗 */
.ql-snow.ql-toolbar .ql-formats .ql-report {
  background: url("@/assets/logo.png") no-repeat;
  background-size: contain;
  display: inline-block;
  height: 18px;
  margin: 3px 5px;
  width: 28px;
}

6、在頁面中使用組件

• 基本使用quill-editor

<quill-editor
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)">
</quill-editor>

<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

// 導(dǎo)入自定義樣式 一定要在原插件css下面引入  (看上面修改字體字號(hào))
import "@/assets/css/quillEditor.css";
// 導(dǎo)入修改字體及字號(hào) 工具欄相關(guān)配置 設(shè)置工具欄中文提示（詳細(xì)內(nèi)容看下邊）
import { titleConfig, toolbarOptions } from "@/assets/js/quillEditor";

export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      content: ``, //雙向數(shù)據(jù)綁定數(shù)據(jù)
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, //工具欄相關(guān)配置
            handlers: {
              image: function (value) {
                if (value) {
                  alert("上傳圖片");
                  // 調(diào)用element的圖片上傳組件
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
        placeholder: "請(qǐng)輸入正文....",
        theme: "snow", //主題 snow：有工具欄的；bubble：只有文本域的
      },
    };
  },
  methods: {
    // 失去焦點(diǎn)事件
    onEditorBlur(quill) {
        console.log('editor blur!', quill)
    },
    // 獲得焦點(diǎn)事件
    onEditorFocus(quill) {
        console.log('editor focus!', quill)
    },
    // 準(zhǔn)備富文本編輯器
    onEditorReady(quill) {
        console.log('editor ready!', quill)
    },

    // 內(nèi)容改變事件
    onEditorChange({ quill, html, text }) {
      console.log("內(nèi)容改變事件", quill, html, text);
      this.content = html;
    },
    
    //設(shè)置工具欄中文提示
    setTitleConfig() {
      for (const item of titleConfig) {
        const tip = document.querySelector(".quill-editor " + item.Choice);
        if (!tip) continue;
        tip.setAttribute("title", item.title);
        // 更改提示信息的內(nèi)容
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.setTitleConfig();
    });
  },
};
</script>

• 在assets/js文件夾下創(chuàng)建js文件quillEditor.js

import { Quill } from "vue-quill-editor";
// 自定義字體大小
const sizes = [false,"14px","16px","18px","20px","22px","26px","28px","30px",];
const Size = Quill.import("formats/size");
Size.whitelist = sizes;
// 自定義字體
const fonts = ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);

// 工具欄相關(guān)配置
export const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜體 下劃線 刪除線 
  ["blockquote", "code-block", "formula"], // 引用  代碼塊
  [{ header: 1 }, { header: 2 }], // 1、2 級(jí)標(biāo)題
  [{ list: "ordered" }, { list: "bullet" }], // 有序、無序列表
  [{ script: "sub" }, { script: "super" }], // 上標(biāo)/下標(biāo)
  [{ indent: "-1" }, { indent: "+1" }], // 縮進(jìn)
  [{ direction: "rtl" }], // 文本方向
  [{ size: sizes }], // 字體大小
  [{ header: [1, 2, 3, 4, 5, false] }], // 標(biāo)題
  [{ color: [] }, { background: [] }], // 字體顏色、字體背景顏色
  [{ font: fonts }], // 字體種類
  [{ align: [] }], // 對(duì)齊方式
  ["clean"], // 清除文本格式
  ["link", "image", "video", "report"], // 鏈接、圖片、視頻、自定義行為
];

// 設(shè)置工具欄中文提示
export const titleConfig = [
  { Choice: ".ql-insertMetric", title: "跳轉(zhuǎn)配置" },
  { 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-list[value="ordered"]', title: "編號(hào)列表" },
  { Choice: '.ql-list[value="bullet"]', title: "項(xiàng)目列表" },
  { Choice: ".ql-direction", title: "文本方向" },
  { Choice: '.ql-header[value="1"]', title: "h1" },
  { Choice: '.ql-header[value="2"]', title: "h2" },
  { Choice: ".ql-align", title: "對(duì)齊方式" },
  { 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: "下標(biāo)" },
  { Choice: '.ql-script[value="super"]', title: "上標(biāo)" },
  { Choice: '.ql-indent[value="-1"]', title: "向左縮進(jìn)" },
  { Choice: '.ql-indent[value="+1"]', title: "向右縮進(jìn)" },
  { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "標(biāo)準(zhǔn)" },
  { Choice: ".ql-align .ql-picker-item:first-child", title: "居左對(duì)齊" },
  {Choice: '.ql-align .ql-picker-item[data-value="center"]',title: "居中對(duì)齊",},
  {Choice: '.ql-align .ql-picker-item[data-value="right"]',title: "居右對(duì)齊",},
  {Choice: '.ql-align .ql-picker-item[data-value="justify"]',title: "兩端對(duì)齊",},
];

二、擴(kuò)展使用

1、上傳圖片 - 支持圖片拖拽和放大縮小

• 安裝依賴包，包含編輯器包，拖拽包，縮放包

  npm i quill-image-drop-module  -S // 拖拽插件
  npm i quill-image-resize-module -S // 放大縮小插件
  

• 在組件里引入使用：

  import { Quill } from "vue-quill-editor";
  import resizeImage from 'quill-image-resize-module' // 圖片縮放組件引用
  import { ImageDrop } from 'quill-image-drop-module'; // 圖片拖動(dòng)組件引用
  Quill.register('modules/imageDrop', ImageDrop); // 注冊(cè)
  Quill.register('modules/resizeImage ', resizeImage ) // 注冊(cè)
  

• 設(shè)置editorOption對(duì)象

   // 富文本編輯器配置
      editorOption: {
          modules: {
            imageDrop: true,      // 圖片拖拽
            imageResize: {        // 放大縮小
              displayStyles: {
                backgroundColor: "black",
                border: "none",
                color: "white"
              },
              modules: ["Resize", "DisplaySize", "Toolbar"]
            },
            toolbar: {
              container: toolbarOptions, //工具欄
              handlers: {
              }
            },
          }
      }
  

• 當(dāng)按照按照以上步驟正確的引入各種插件后，會(huì)顯示以下報(bào)錯(cuò)：
  

• 出現(xiàn)這個(gè)錯(cuò)誤的原因是：插件需要配置webpack支持。

• 修改根目錄下的vue.config.js文件(需要重新運(yùn)行一下項(xiàng)目)文章來源地址http://www.zghlxwxcb.cn/news/detail-713993.html

  const { defineConfig } = require("@vue/cli-service");
  const webpack = require("webpack");
  
  module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
      plugins: [
        new webpack.ProvidePlugin({
          "window.Quill": "quill/dist/quill.js",
          Quill: "quill/dist/quill.js",
        }),
      ],
    },
  });
  

2、上傳圖片 - 圖片動(dòng)態(tài)上傳到服務(wù)器

• 組件內(nèi)調(diào)用element的upload組件和vue-quill-editor編輯器

  <template>
    <div class="home">
      <!-- 圖片上傳組件輔助-->
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        name="files"
        :show-file-list="false"
        :on-success="uploadSuccess"
      >
      </el-upload>
      <!--富文本編輯器組件-->
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </div>
  </template>
  

• 配置editorOption對(duì)象（定義富文本編輯器內(nèi)的圖片上傳按鈕點(diǎn)擊事件，當(dāng)點(diǎn)擊上傳圖片圖標(biāo)時(shí)，觸發(fā) upoad 組件的圖片上傳事件）

      uploadUrl: "#######", // 服務(wù)器上傳地址
      content: ``, //雙向數(shù)據(jù)綁定數(shù)據(jù)
      editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions, //工具欄
              handlers: {
                  image: function (value) {
                      if (value) {
                          alert("上傳圖片");
                          // 調(diào)用element的圖片上傳組件
                          document.querySelector(".avatar-uploader input").click();
                      } else {
                          this.quill.format("image", false);
                      }
                  },
              }
            },
          }
      }
  

• methods中，完善 upload圖片上傳成功事件。圖片上傳成功后，把圖片加載到富文本編輯器內(nèi)

  methods: {
      // 內(nèi)容改變事件
      onEditorChange({ quill, html, text }) {
        console.log("內(nèi)容改變事件", quill, html, text);
        this.content = html;
      },
      uploadSuccess(res) {
        console.log(res, "上傳圖片");
        // 獲取富文本組件實(shí)例
        let quill = this.$refs.myQuillEditor.quill;
        // 如果上傳成功
        if (res) {
          // 獲取光標(biāo)所在位置
          let length = quill.getSelection().index;
          // 插入圖片，res為服務(wù)器返回的圖片鏈接地址
          quill.insertEmbed(length, "image", res.data[0].servicePath);
          // 調(diào)整光標(biāo)到最后
          quill.setSelection(length + 1);
        } else {
          // 提示信息，需引入Message
          this.$message.error("圖片插入失??！");
        }
      },
  },
  

3、上傳視頻 - 視頻動(dòng)態(tài)上傳到服務(wù)器

• 組件內(nèi)調(diào)用element的upload組件和vue-quill-editor編輯器

  <template>
    <div class="home">
      <!-- 視頻上傳組件輔助 -->
      <el-dialog
        :close-on-click-modal="false"
        width="50%"
        style="margin-top: 1px"
        title="視頻上傳"
        :visible.sync="videoForm.show"
        append-to-body
      >
        <el-tabs v-model="videoForm.activeName">
          <el-tab-pane label="添加視頻鏈接" name="first">
            <el-input
              v-model="videoForm.videoLink"
              placeholder="請(qǐng)輸入視頻鏈接"
              clearable
            ></el-input>
            <el-button
              type="primary"
              size="small"
              style="margin: 20px 0px 0px 0px"
              @click="insertVideoLink(videoForm.videoLink)"
              >確認(rèn)
            </el-button>
          </el-tab-pane>
          <el-tab-pane label="本地視頻上傳" name="second">
            <el-upload
              v-loading="loading"
              style="text-align: center"
              drag
              :action="uploadUrl"
              accept="video/*"
              name="files"
              :before-upload="onBeforeUploadVideo"
              :on-success="onSuccessVideo"
              :on-error="onErrorVideo"
              :multiple="false"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                將文件拖到此處，或<em>點(diǎn)擊上傳</em>
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上傳MP4文件，且不超過10M
              </div>
            </el-upload>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
      <!--富文本編輯器組件-->
      <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </div>
  </template>
  

• 配置editorOption對(duì)象（定義富文本編輯器內(nèi)的視頻上傳按鈕點(diǎn)擊事件，當(dāng)點(diǎn)擊上傳視頻圖標(biāo)時(shí)，觸發(fā) upoad 組件的視頻上傳事件）

  	loading: false, // 加載loading
  	// 視頻上傳變量
      videoForm: {
        show: false, // 顯示插入視頻鏈接彈框的標(biāo)識(shí)
        videoLink: "",
        activeName: "first",
      },
      uploadUrl: "#######", // 服務(wù)器上傳地址
      content: ``, //雙向數(shù)據(jù)綁定數(shù)據(jù)
      editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions, //工具欄
              handlers: {
                  video: () => {
  	                // 覆蓋默認(rèn)的上傳視頻，點(diǎn)擊視頻圖標(biāo)，顯示彈窗
  	                this.videoForm.show = true;
            		},
              }
            },
          }
      }
  

• methods中，完善 upload視頻上傳成功事件。視頻上傳成功后，把視頻加載到富文本編輯器內(nèi)

  methods: {
      hideLoading() {
    	 this.loading = false;
  	},
      // 內(nèi)容改變事件
      onEditorChange({ quill, html, text }) {
        console.log("內(nèi)容改變事件", quill, html, text);
        this.content = html;
      },
      insertVideoLink(videoLink) {
        if (!videoLink) return this.$message.error("視頻地址不能為空！");
        this.videoForm.show = false;
        let quill = this.$refs["myQuillEditor"].quill;
        // 獲取富文本
        let range = quill.getSelection();
        // 獲取光標(biāo)位置：當(dāng)編輯器中沒有輸入文本時(shí)，這里獲取到的 range 為 null
        let index = range ? range.index : 0;
        // 在光標(biāo)所在位置 插入視頻
        quill.insertEmbed(index, "video", videoLink);
        // 調(diào)整光標(biāo)到最后
        quill.setSelection(index + 1);
      },
      // el-文件上傳組件
      onBeforeUploadVideo(file) {
        this.loading = true;
        let acceptArr = ["video/mp4"];
        const isVideo = acceptArr.includes(file.type);
        const isLt1M = file.size / 1024 / 1024 < 10;
        if (!isVideo) {
          this.hideLoading();
          this.$message.error("只能上傳mp4格式文件!");
        }
        if (!isLt1M) {
          this.hideLoading();
          this.$message.error(`上傳文件大小不能超過 10MB!`);
        }
        return isLt1M && isVideo;
      },
      // 文件上傳成功時(shí)的鉤子
      onSuccessVideo(res) {
        this.hideLoading();
        if (res.code === 200) {
          this.insertVideoLink(res.data[0].servicePath);
        } else {
          this.$message.error(res.message);
        }
      },
      // 文件上傳失敗時(shí)的鉤子
      onErrorVideo() {
        this.hideLoading();
        this.$message.error("上傳失敗");
      },
    }
  

4、上傳視頻 - 修改視頻 <iframe> 標(biāo)簽為 <video>

• vue-quill-editor 默認(rèn)是以 iframe 保存的。在assets/js文件夾下創(chuàng)建js文件quillVideo.js

  import { Quill } from "vue-quill-editor";
  // 源碼中是import直接倒入，這里要用Quill.import引入
  const BlockEmbed = Quill.import("blots/block/embed");
  const Link = Quill.import("formats/link");
  
  const ATTRIBUTES = ["height", "width"];
  
  class Video extends BlockEmbed {
    static create(value) {
      const node = super.create(value);
      // 添加video標(biāo)簽所需的屬性
      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>`;
    }
  }
  Video.blotName = "video"; // 這里不用改，樓主不用iframe，直接替換掉原來，如果需要也可以保留原來的，這里用個(gè)新的blot
  Video.className = "ql-video";
  Video.tagName = "video"; // 用video標(biāo)簽替換iframe
  
  export default Video;
  

• 在頁面中引入并注冊(cè)

  import { quillEditor, Quill } from "vue-quill-editor";
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  
  // 這里引入修改的video模塊并注冊(cè)
  import Video from "../assets/js/quillVideo";
  Quill.register(Video, true);
  

到了這里，關(guān)于Vue +vue-quill-editor+ Element UI使用富文本編輯器，上傳圖片，上傳視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！