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

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

文章目录

一、基本使用

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'exportdefault{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:'两端对齐'}];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字体及字号

• 修改字体和字号

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文件夹下创建css文件quillEditor.css

/* 字体风格 */.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:"常规";}.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:"标题1";}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:"标题2";}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:"标题3";}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:"标题4";}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:"标题5";}.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:"常规";}.ql-snow .ql-picker.ql-header .ql-picker-label::before{content:"标题大小";}/* 默认设置 */.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样式设计 --- 根据情况设计 *//* 工作汇报弹窗 */.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-editorv-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";// 导入自定义样式 一定要在原插件css下面引入  (看上面修改字体字号)import"@/assets/css/quillEditor.css";// 导入修改字体及字号 工具栏相关配置 设置工具栏中文提示（详细内容看下边）import{ titleConfig, toolbarOptions }from"@/assets/js/quillEditor";exportdefault{components:{
    quillEditor,},data(){return{content:``,//双向数据绑定数据editorOption:{modules:{toolbar:{container: toolbarOptions,//工具栏相关配置handlers:{image:function(value){if(value){alert("上传图片");// 调用element的图片上传组件
                  document.querySelector(".avatar-uploader input").click();}else{this.quill.format("image",false);}},},},},placeholder:"请输入正文....",theme:"snow",//主题 snow：有工具栏的；bubble：只有文本域的},};},methods:{// 失去焦点事件onEditorBlur(quill){
        console.log('editor blur!', quill)},// 获得焦点事件onEditorFocus(quill){
        console.log('editor focus!', quill)},// 准备富文本编辑器onEditorReady(quill){
        console.log('editor ready!', quill)},// 内容改变事件onEditorChange({ quill, html, text }){
      console.log("内容改变事件", quill, html, text);this.content = html;},//设置工具栏中文提示setTitleConfig(){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();});},};</script>

• 在assets/js文件夹下创建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);// 工具栏相关配置exportconst 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: sizes }],// 字体大小[{header:[1,2,3,4,5,false]}],// 标题[{color:[]},{background:[]}],// 字体颜色、字体背景颜色[{font: fonts }],// 字体种类[{align:[]}],// 对齐方式["clean"],// 清除文本格式["link","image","video","report"],// 链接、图片、视频、自定义行为];// 设置工具栏中文提示exportconst 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-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-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:"两端对齐",},];

二、扩展使用

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';// 图片拖动组件引用Quill.register('modules/imageDrop', ImageDrop);// 注册Quill.register('modules/resizeImage ', resizeImage )// 注册
• 设置editorOption对象// 富文本编辑器配置editorOption:{modules:{imageDrop:true,// 图片拖拽imageResize:{// 放大缩小displayStyles:{backgroundColor:"black",border:"none",color:"white"},modules:["Resize","DisplaySize","Toolbar"]},toolbar:{container: toolbarOptions,//工具栏handlers:{}},}}
• 当按照按照以上步骤正确的引入各种插件后，会显示以下报错：
• 出现这个错误的原因是：插件需要配置webpack支持。
• 修改根目录下的vue.config.js文件(需要重新运行一下项目)const{ defineConfig }=require("@vue/cli-service");const webpack =require("webpack");module.exports =defineConfig({transpileDependencies:true,configureWebpack:{plugins:[newwebpack.ProvidePlugin({"window.Quill":"quill/dist/quill.js",Quill:"quill/dist/quill.js",}),],},});

2、上传图片 - 图片动态上传到服务器

• 组件内调用element的upload组件和vue-quill-editor编辑器<template><divclass="home"><!-- 图片上传组件辅助--><el-uploadclass="avatar-uploader":action="uploadUrl"name="files":show-file-list="false":on-success="uploadSuccess"></el-upload><!--富文本编辑器组件--><quill-editorv-model="content"ref="myQuillEditor":options="editorOption"@change="onEditorChange($event)"></quill-editor></div></template>
• 配置editorOption对象（定义富文本编辑器内的图片上传按钮点击事件，当点击上传图片图标时，触发 upoad 组件的图片上传事件）uploadUrl:"#######",// 服务器上传地址content:``,//双向数据绑定数据editorOption:{modules:{toolbar:{container: toolbarOptions,//工具栏handlers:{image:function(value){if(value){alert("上传图片");// 调用element的图片上传组件 document.querySelector(".avatar-uploader input").click();}else{this.quill.format("image",false);}},}},}}
• methods中，完善 upload图片上传成功事件。图片上传成功后，把图片加载到富文本编辑器内methods:{// 内容改变事件onEditorChange({ quill, html, text }){ console.log("内容改变事件", quill, html, text);this.content = html;},uploadSuccess(res){ console.log(res,"上传图片");// 获取富文本组件实例let quill =this.$refs.myQuillEditor.quill;// 如果上传成功if(res){// 获取光标所在位置let length = quill.getSelection().index;// 插入图片，res为服务器返回的图片链接地址 quill.insertEmbed(length,"image", res.data[0].servicePath);// 调整光标到最后 quill.setSelection(length +1);}else{// 提示信息，需引入Messagethis.$message.error("图片插入失败！");}},},

3、上传视频 - 视频动态上传到服务器

• 组件内调用element的upload组件和vue-quill-editor编辑器<template><divclass="home"><!-- 视频上传组件辅助 --><el-dialog:close-on-click-modal="false"width="50%"style="margin-top: 1px"title="视频上传":visible.sync="videoForm.show"append-to-body><el-tabsv-model="videoForm.activeName"><el-tab-panelabel="添加视频链接"name="first"><el-inputv-model="videoForm.videoLink"placeholder="请输入视频链接"clearable></el-input><el-buttontype="primary"size="small"style="margin: 20px 0px 0px 0px"@click="insertVideoLink(videoForm.videoLink)">确认 </el-button></el-tab-pane><el-tab-panelabel="本地视频上传"name="second"><el-uploadv-loading="loading"style="text-align: center"drag:action="uploadUrl"accept="video/*"name="files":before-upload="onBeforeUploadVideo":on-success="onSuccessVideo":on-error="onErrorVideo":multiple="false"><iclass="el-icon-upload"></i><divclass="el-upload__text"> 将文件拖到此处，或<em>点击上传</em></div><divclass="el-upload__tip"slot="tip"> 只能上传MP4文件，且不超过10M </div></el-upload></el-tab-pane></el-tabs></el-dialog><!--富文本编辑器组件--><quill-editorv-model="content"ref="myQuillEditor":options="editorOption"@change="onEditorChange($event)"></quill-editor></div></template>
• 配置editorOption对象（定义富文本编辑器内的视频上传按钮点击事件，当点击上传视频图标时，触发 upoad 组件的视频上传事件）loading:false,// 加载loading// 视频上传变量videoForm:{show:false,// 显示插入视频链接弹框的标识videoLink:"",activeName:"first",},uploadUrl:"#######",// 服务器上传地址content:``,//双向数据绑定数据editorOption:{modules:{toolbar:{container: toolbarOptions,//工具栏handlers:{video:()=>{// 覆盖默认的上传视频，点击视频图标，显示弹窗this.videoForm.show =true;},}},}}
• methods中，完善 upload视频上传成功事件。视频上传成功后，把视频加载到富文本编辑器内methods:{hideLoading(){this.loading =false;},// 内容改变事件onEditorChange({ quill, html, text }){ console.log("内容改变事件", quill, html, text);this.content = html;},insertVideoLink(videoLink){if(!videoLink)returnthis.$message.error("视频地址不能为空！");this.videoForm.show =false;let quill =this.$refs["myQuillEditor"].quill;// 获取富文本let range = quill.getSelection();// 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 nulllet index = range ? range.index :0;// 在光标所在位置 插入视频 quill.insertEmbed(index,"video", videoLink);// 调整光标到最后 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;},// 文件上传成功时的钩子onSuccessVideo(res){this.hideLoading();if(res.code ===200){this.insertVideoLink(res.data[0].servicePath);}else{this.$message.error(res.message);}},// 文件上传失败时的钩子onErrorVideo(){this.hideLoading();this.$message.error("上传失败");},}

4、上传视频 - 修改视频

<iframe>

标签为

<video>

• vue-quill-editor 默认是以 iframe 保存的。在assets/js文件夹下创建js文件quillVideo.jsimport{ Quill }from"vue-quill-editor";// 源码中是import直接倒入，这里要用Quill.import引入const BlockEmbed = Quill.import("blots/block/embed");const Link = Quill.import("formats/link");constATTRIBUTES=["height","width"];classVideoextendsBlockEmbed{staticcreate(value){const node =super.create(value);// 添加video标签所需的属性 node.setAttribute("controls","controls"); node.setAttribute("type","video/mp4"); node.setAttribute("src",this.sanitize(value));return node;}staticformats(domNode){returnATTRIBUTES.reduce((formats, attribute)=>{if(domNode.hasAttribute(attribute)){ formats[attribute]= domNode.getAttribute(attribute);}return formats;},{});}staticsanitize(url){return Link.sanitize(url);}staticvalue(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，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blotVideo.className ="ql-video";Video.tagName ="video";// 用video标签替换iframeexportdefault Video;
• 在页面中引入并注册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模块并注册import Video from"../assets/js/quillVideo";Quill.register(Video,true);