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

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

文章目录

一、基本使用1、下载vue-quill-editor组件2、引入· 富文本组件3、工具栏相关配置4、设置工具栏中文提示5、修改vue-quill-editor字体及字号6、在页面中使用组件

二、扩展使用1、上传图片 - 支持图片拖拽和放大缩小2、上传图片 - 图片动态上传到服务器3、上传视频 - 视频动态上传到服务器4、上传视频 - 修改视频 `` 标签为 `<video>`</p><p>一、基本使用</p><p>1、下载vue-quill-editor组件</p><p>npm install vue-quill-editor -S</p><p>2、引入· 富文本组件</p><p>方式一：全局引入 (在 main.js文件中)</p><p>import Vue from 'vue'</p><p>import VueQuillEditor from 'vue-quill-editor'</p><p>import 'quill/dist/quill.core.css'</p><p>import 'quill/dist/quill.snow.css'</p><p>import 'quill/dist/quill.bubble.css'</p><p>Vue.use(VueQuillEditor)</p><p>方式二：按需引入（在单个组件中引用）</p><p>import { quillEditor } from 'vue-quill-editor'</p><p>export default {</p><p>components: {</p><p>quillEditor</p><p>}</p><p>}</p><p>3、工具栏相关配置</p><p>const toolbarOptions = [</p><p>["bold", "italic", "underline", "strike"], // 加粗斜体下划线删除线</p><p>["blockquote", "code-block", "formula"], // 引用代码块插入公式</p><p>[{ header: 1 }, { header: 2 }], // 1、2 级标题</p><p>[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表</p><p>[{ script: "sub" }, { script: "super" }], // 上标/下标</p><p>[{ indent: "-1" }, { indent: "+1" }], // 缩进</p><p>[{ direction: "rtl" }], // 文本方向</p><p>[{ size: [false,"14px","16px","18px","20px","22px","26px","28px","30p,] }], // 字体大小</p><p>[{ header: [1, 2, 3, 4, 5,6, false] }], // 标题</p><p>[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色</p><p>[{ font: ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",] }], // 字体种类</p><p>[{ align: [] }], // 对齐方式</p><p>["clean"], // 清除文本格式</p><p>["link", "image", "video", "report"], // 链接、图片、视频、自定义行为</p><p>];</p><p>4、设置工具栏中文提示</p><p>setTitleConfig() {</p><p>// toolbar标题</p><p>const titleConfig = [</p><p>{ Choice: '.ql-insertMetric', title: '跳转配置' },</p><p>{ Choice: '.ql-bold', title: '加粗' },</p><p>{ Choice: '.ql-italic', title: '斜体' },</p><p>{ Choice: '.ql-underline', title: '下划线' },</p><p>{ Choice: '.ql-header', title: '段落格式' },</p><p>{ Choice: '.ql-strike', title: '删除线' },</p><p>{ Choice: '.ql-blockquote', title: '块引用' },</p><p>{ Choice: '.ql-code', title: '插入代码' },</p><p>{ Choice: '.ql-code-block', title: '插入代码段' },</p><p>{ Choice: '.ql-font', title: '字体' },</p><p>{ Choice: '.ql-size', title: '字体大小' },</p><p>{ Choice: '.ql-list[value="ordered"]', title: '编号列表' },</p><p>{ Choice: '.ql-list[value="bullet"]', title: '项目列表' },</p><p>{ Choice: '.ql-direction', title: '文本方向' },</p><p>{ Choice: '.ql-header[value="1"]', title: 'h1' },</p><p>{ Choice: '.ql-header[value="2"]', title: 'h2' },</p><p>{ Choice: '.ql-align', title: '对齐方式' },</p><p>{ Choice: '.ql-color', title: '字体颜色' },</p><p>{ Choice: '.ql-background', title: '背景颜色' },</p><p>{ Choice: '.ql-image', title: '图像' },</p><p>{ Choice: '.ql-video', title: '视频' },</p><p>{ Choice: '.ql-link', title: '添加链接' },</p><p>{ Choice: '.ql-formula', title: '插入公式' },</p><p>{ Choice: '.ql-clean', title: '清除字体格式' },</p><p>{ Choice: '.ql-script[value="sub"]', title: '下标' },</p><p>{ Choice: '.ql-script[value="super"]', title: '上标' },</p><p>{ Choice: '.ql-indent[value="-1"]', title: '向左缩进' },</p><p>{ Choice: '.ql-indent[value="+1"]', title: '向右缩进' },</p><p>{ Choice: '.ql-header .ql-picker-label', title: '标题大小' },</p><p>{ Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },</p><p>{ Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },</p><p>{ Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },</p><p>{ Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },</p><p>{ Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },</p><p>{ Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },</p><p>{ Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },</p><p>{ Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },</p><p>{ Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },</p><p>{ Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },</p><p>{ Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },</p><p>{ Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },</p><p>{ Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },</p><p>{ Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },</p><p>{ Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }</p><p>];</p><p>for (const item of titleConfig) {</p><p>const tip = document.querySelector(".quill-editor " + item.Choice);</p><p>if (!tip) continue;</p><p>tip.setAttribute("title", item.title);</p><p>}</p><p>},</p><p>// 使用</p><p>mounted() {</p><p>this.$nextTick(() => {</p><p>this.setTitleConfig();</p><p>});</p><p>},</p><p>5、修改vue-quill-editor字体及字号</p><p>修改字体和字号</p><p>import { Quill } from "vue-quill-editor";</p><p>import 'quill/dist/quill.core.css'</p><p>import 'quill/dist/quill.snow.css'</p><p>import 'quill/dist/quill.bubble.css'</p><p>//自定义样式一定要在原插件css下面引入</p><p>import "@/assets/css/quillEditor.css";</p><p>// 自定义字体大小</p><p>var sizes = [false,"14px","16px","18px","20px","22px","26px","28px","30px",];</p><p>var Size = Quill.import("formats/size");</p><p>Size.whitelist = sizes;</p><p>// 自定义字体</p><p>var fonts = ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",];</p><p>var Font = Quill.import("formats/font");</p><p>Font.whitelist = fonts;</p><p>Quill.register(Font, true);</p><p>在assets/css文件夹下创建css文件quillEditor.css</p><p>/* 字体风格 */</p><p>.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,</p><p>.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {</p><p>content: "宋体";</p><p>font-family: "SimSun";</p><p>}</p><p>.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,</p><p>.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {</p><p>content: "黑体";</p><p>font-family: "SimHei";</p><p>}</p><p>.ql-snow</p><p>.ql-picker.ql-font</p><p>.ql-picker-label[data-value="Microsoft-YaHei"]::before,</p><p>.ql-snow</p><p>.ql-picker.ql-font</p><p>.ql-picker-item[data-value="Microsoft-YaHei"]::before {</p><p>content: "微软雅黑";</p><p>font-family: "Microsoft YaHei";</p><p>}</p><p>.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,</p><p>.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {</p><p>content: "楷体";</p><p>font-family: "KaiTi";</p><p>}</p><p>.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,</p><p>.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {</p><p>content: "仿宋";</p><p>font-family: "FangSong";</p><p>}</p><p>.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,</p><p>.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {</p><p>content: "Arial";</p><p>font-family: "Arial";</p><p>}</p><p>.ql-snow</p><p>.ql-picker.ql-font</p><p>.ql-picker-label[data-value="Times-New-Roman"]::before,</p><p>.ql-snow</p><p>.ql-picker.ql-font</p><p>.ql-picker-item[data-value="Times-New-Roman"]::before {</p><p>content: "Times New Roman";</p><p>font-family: "Times New Roman";</p><p>}</p><p>.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,</p><p>.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {</p><p>content: "sans-serif";</p><p>font-family: "sans-serif";</p><p>}</p><p>.ql-font-SimSun { font-family: "SimSun"; }</p><p>.ql-font-SimHei { font-family: "SimHei"; }</p><p>.ql-font-Microsoft-YaHei { font-family: "Microsoft YaHei"; }</p><p>.ql-font-KaiTi { font-family: "KaiTi"; }</p><p>.ql-font-FangSong { font-family: "FangSong"; }</p><p>.ql-font-Arial { font-family: "Arial"; }</p><p>.ql-font-Times-New-Roman { font-family: "Times New Roman"; }</p><p>.ql-font-sans-serif { font-family: "sans-serif"; }</p><p>/* 字体大小 */</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label::before { content: "字体大小"; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: "常规"; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {</p><p>content: "14px";</p><p>font-size: 14px;</p><p>}</p><p>.ql-size-14px { font-size: 14px; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {</p><p>content: "16px";</p><p>font-size: 16px;</p><p>}</p><p>.ql-size-16px { font-size: 16px; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {</p><p>content: "18px";</p><p>font-size: 18px;</p><p>}</p><p>.ql-size-18px { font-size: 18px; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {</p><p>content: "20px";</p><p>font-size: 20px;</p><p>}</p><p>.ql-size-20px { font-size: 20px; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22px"]::before,</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22px"]::before {</p><p>content: "22px";</p><p>font-size: 22px;</p><p>}</p><p>.ql-size-22px { font-size: 22px; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before,</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before {</p><p>content: "26px";</p><p>font-size: 26px;</p><p>}</p><p>.ql-size-26px { font-size: 26px; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before,</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before {</p><p>content: "28px";</p><p>font-size: 28px;</p><p>}</p><p>.ql-size-28px { font-size: 28px; }</p><p>.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,</p><p>.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {</p><p>content: "30px";</p><p>font-size: 30px;</p><p>}</p><p>.ql-size-30px { font-size: 30px; }</p><p>/* 段落大小 */</p><p>.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {</p><p>content: "标题1";</p><p>}</p><p>.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {</p><p>content: "标题2";</p><p>}</p><p>.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {</p><p>content: "标题3";</p><p>}</p><p>.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {</p><p>content: "标题4";</p><p>}</p><p>.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {</p><p>content: "标题5";</p><p>}</p><p>.ql-snow .ql-picker.ql-header .ql-picker-item::before {</p><p>content: "常规";</p><p>}</p><p>.ql-snow .ql-picker.ql-header .ql-picker-label::before {</p><p>content: "标题大小";</p><p>}</p><p>/* 默认设置 */</p><p>.ql-snow .ql-editor { font-size: 14px; }</p><p>/* 查看样式 */</p><p>.view-editor .ql-toolbar { display: none; }</p><p>.view-editor .ql-container.ql-snow { border: 0; }</p><p>.view-editor .ql-container.ql-snow .ql-editor { padding: 0; }</p><p>/* 编辑样式 */</p><p>.edit-editor .ql-toolbar { display: block; }</p><p>.edit-editor .ql-container.ql-snow {</p><p>border: 1px solid #ccc;</p><p>min-height: inherit;</p><p>}</p><p>/* 自定义toobar样式设计 --- 根据情况设计 */</p><p>/* 工作汇报弹窗 */</p><p>.ql-snow.ql-toolbar .ql-formats .ql-report {</p><p>background: url("@/assets/logo.png") no-repeat;</p><p>background-size: contain;</p><p>display: inline-block;</p><p>height: 18px;</p><p>margin: 3px 5px;</p><p>width: 28px;</p><p>}</p><p>6、在页面中使用组件</p><p>基本使用quill-editor</p><p><quill-editor</p><p>v-model="content"</p><p>ref="myQuillEditor"</p><p>:options="editorOption"</p><p>@blur="onEditorBlur($event)"</p><p>@focus="onEditorFocus($event)"</p><p>@change="onEditorChange($event)"</p><p>@ready="onEditorReady($event)"></p><p></quill-editor></p><p><script></p><p>import { quillEditor } from "vue-quill-editor";</p><p>import "quill/dist/quill.core.css";</p><p>import "quill/dist/quill.snow.css";</p><p>import "quill/dist/quill.bubble.css";</p><p>// 导入自定义样式一定要在原插件css下面引入 (看上面修改字体字号)</p><p>import "@/assets/css/quillEditor.css";</p><p>// 导入修改字体及字号工具栏相关配置设置工具栏中文提示（详细内容看下边）</p><p>import { titleConfig, toolbarOptions } from "@/assets/js/quillEditor";</p><p>export default {</p><p>components: {</p><p>quillEditor,</p><p>},</p><p>data() {</p><p>return {</p><p>content: ``, //双向数据绑定数据</p><p>editorOption: {</p><p>modules: {</p><p>toolbar: {</p><p>container: toolbarOptions, //工具栏相关配置</p><p>handlers: {</p><p>image: function (value) {</p><p>if (value) {</p><p>alert("上传图片");</p><p>// 调用element的图片上传组件</p><p>document.querySelector(".avatar-uploader input").click();</p><p>} else {</p><p>this.quill.format("image", false);</p><p>}</p><p>},</p><p>},</p><p>},</p><p>},</p><p>placeholder: "请输入正文....",</p><p>theme: "snow", //主题 snow：有工具栏的；bubble：只有文本域的</p><p>},</p><p>};</p><p>},</p><p>methods: {</p><p>// 失去焦点事件</p><p>onEditorBlur(quill) {</p><p>console.log('editor blur!', quill)</p><p>},</p><p>// 获得焦点事件</p><p>onEditorFocus(quill) {</p><p>console.log('editor focus!', quill)</p><p>},</p><p>// 准备富文本编辑器</p><p>onEditorReady(quill) {</p><p>console.log('editor ready!', quill)</p><p>},</p><p>// 内容改变事件</p><p>onEditorChange({ quill, html, text }) {</p><p>console.log("内容改变事件", quill, html, text);</p><p>this.content = html;</p><p>},</p><p>//设置工具栏中文提示</p><p>setTitleConfig() {</p><p>for (const item of titleConfig) {</p><p>const tip = document.querySelector(".quill-editor " + item.Choice);</p><p>if (!tip) continue;</p><p>tip.setAttribute("title", item.title);</p><p>// 更改提示信息的内容</p><p>}</p><p>},</p><p>},</p><p>mounted() {</p><p>this.$nextTick(() => {</p><p>this.setTitleConfig();</p><p>});</p><p>},</p><p>};</p><p></script></p><p>在assets/js文件夹下创建js文件quillEditor.js</p><p>import { Quill } from "vue-quill-editor";</p><p>// 自定义字体大小</p><p>const sizes = [false,"14px","16px","18px","20px","22px","26px","28px","30px",];</p><p>const Size = Quill.import("formats/size");</p><p>Size.whitelist = sizes;</p><p>// 自定义字体</p><p>const fonts = ["SimSun","SimHei","Microsoft-YaHei","KaiTi","FangSong","Arial","Times-New-Roman","sans-serif",];</p><p>var Font = Quill.import("formats/font");</p><p>Font.whitelist = fonts;</p><p>Quill.register(Font, true);</p><p>// 工具栏相关配置</p><p>export const toolbarOptions = [</p><p>["bold", "italic", "underline", "strike"], // 加粗斜体下划线删除线</p><p>["blockquote", "code-block", "formula"], // 引用代码块</p><p>[{ header: 1 }, { header: 2 }], // 1、2 级标题</p><p>[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表</p><p>[{ script: "sub" }, { script: "super" }], // 上标/下标</p><p>[{ indent: "-1" }, { indent: "+1" }], // 缩进</p><p>[{ direction: "rtl" }], // 文本方向</p><p>[{ size: sizes }], // 字体大小</p><p>[{ header: [1, 2, 3, 4, 5, false] }], // 标题</p><p>[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色</p><p>[{ font: fonts }], // 字体种类</p><p>[{ align: [] }], // 对齐方式</p><p>["clean"], // 清除文本格式</p><p>["link", "image", "video", "report"], // 链接、图片、视频、自定义行为</p><p>];</p><p>// 设置工具栏中文提示</p><p>export const titleConfig = [</p><p>{ Choice: ".ql-insertMetric", title: "跳转配置" },</p><p>{ Choice: ".ql-bold", title: "加粗" },</p><p>{ Choice: ".ql-italic", title: "斜体" },</p><p>{ Choice: ".ql-underline", title: "下划线" },</p><p>{ Choice: ".ql-header", title: "段落格式" },</p><p>{ Choice: ".ql-strike", title: "删除线" },</p><p>{ Choice: ".ql-blockquote", title: "块引用" },</p><p>{ Choice: ".ql-code", title: "插入代码" },</p><p>{ Choice: ".ql-code-block", title: "插入代码段" },</p><p>{ Choice: ".ql-font", title: "字体" },</p><p>{ Choice: '.ql-list[value="ordered"]', title: "编号列表" },</p><p>{ Choice: '.ql-list[value="bullet"]', title: "项目列表" },</p><p>{ Choice: ".ql-direction", title: "文本方向" },</p><p>{ Choice: '.ql-header[value="1"]', title: "h1" },</p><p>{ Choice: '.ql-header[value="2"]', title: "h2" },</p><p>{ Choice: ".ql-align", title: "对齐方式" },</p><p>{ Choice: ".ql-color", title: "字体颜色" },</p><p>{ Choice: ".ql-background", title: "背景颜色" },</p><p>{ Choice: ".ql-image", title: "图像" },</p><p>{ Choice: ".ql-video", title: "视频" },</p><p>{ Choice: ".ql-link", title: "添加链接" },</p><p>{ Choice: ".ql-formula", title: "插入公式" },</p><p>{ Choice: ".ql-clean", title: "清除字体格式" },</p><p>{ Choice: '.ql-script[value="sub"]', title: "下标" },</p><p>{ Choice: '.ql-script[value="super"]', title: "上标" },</p><p>{ Choice: '.ql-indent[value="-1"]', title: "向左缩进" },</p><p>{ Choice: '.ql-indent[value="+1"]', title: "向右缩进" },</p><p>{ Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },</p><p>{ Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },</p><p>{Choice: '.ql-align .ql-picker-item[data-value="center"]',title: "居中对齐",},</p><p>{Choice: '.ql-align .ql-picker-item[data-value="right"]',title: "居右对齐",},</p><p>{Choice: '.ql-align .ql-picker-item[data-value="justify"]',title: "两端对齐",},</p><p>];</p><p>二、扩展使用</p><p>1、上传图片 - 支持图片拖拽和放大缩小</p><p>安装依赖包，包含编辑器包，拖拽包，缩放包 npm i quill-image-drop-module -S // 拖拽插件</p><p>npm i quill-image-resize-module -S // 放大缩小插件</p><p>在组件里引入使用： import { Quill } from "vue-quill-editor";</p><p>import resizeImage from 'quill-image-resize-module' // 图片缩放组件引用</p><p>import { ImageDrop } from 'quill-image-drop-module'; // 图片拖动组件引用</p><p>Quill.register('modules/imageDrop', ImageDrop); // 注册</p><p>Quill.register('modules/resizeImage ', resizeImage ) // 注册</p><p>设置editorOption对象 // 富文本编辑器配置</p><p>editorOption: {</p><p>modules: {</p><p>imageDrop: true, // 图片拖拽</p><p>imageResize: { // 放大缩小</p><p>displayStyles: {</p><p>backgroundColor: "black",</p><p>border: "none",</p><p>color: "white"</p><p>},</p><p>modules: ["Resize", "DisplaySize", "Toolbar"]</p><p>},</p><p>toolbar: {</p><p>container: toolbarOptions, //工具栏</p><p>handlers: {</p><p>}</p><p>},</p><p>}</p><p>}</p><p>当按照按照以上步骤正确的引入各种插件后，会显示以下报错：出现这个错误的原因是：插件需要配置webpack支持。修改根目录下的vue.config.js文件(需要重新运行一下项目) const { defineConfig } = require("@vue/cli-service");</p><p>const webpack = require("webpack");</p><p>module.exports = defineConfig({</p><p>transpileDependencies: true,</p><p>configureWebpack: {</p><p>plugins: [</p><p>new webpack.ProvidePlugin({</p><p>"window.Quill": "quill/dist/quill.js",</p><p>Quill: "quill/dist/quill.js",</p><p>}),</p><p>],</p><p>},</p><p>});</p><p>2、上传图片 - 图片动态上传到服务器</p><p>组件内调用element的upload组件和vue-quill-editor编辑器<template></p><p><div class="home"></p><p></p><p><el-upload</p><p>class="avatar-uploader"</p><p>:action="uploadUrl"</p><p>name="files"</p><p>:show-file-list="false"</p><p>:on-success="uploadSuccess"</p><p>></p><p></el-upload></p><p></p><p><quill-editor</p><p>v-model="content"</p><p>ref="myQuillEditor"</p><p>:options="editorOption"</p><p>@change="onEditorChange($event)"</p><p>></p><p></quill-editor></p><p></div></p><p></template></p><p>配置editorOption对象（定义富文本编辑器内的图片上传按钮点击事件，当点击上传图片图标时，触发 upoad 组件的图片上传事件） uploadUrl: "#######", // 服务器上传地址</p><p>content: ``, //双向数据绑定数据</p><p>editorOption: {</p><p>modules: {</p><p>toolbar: {</p><p>container: toolbarOptions, //工具栏</p><p>handlers: {</p><p>image: function (value) {</p><p>if (value) {</p><p>alert("上传图片");</p><p>// 调用element的图片上传组件</p><p>document.querySelector(".avatar-uploader input").click();</p><p>} else {</p><p>this.quill.format("image", false);</p><p>}</p><p>},</p><p>}</p><p>},</p><p>}</p><p>}</p><p>methods中，完善 upload图片上传成功事件。图片上传成功后，把图片加载到富文本编辑器内methods: {</p><p>// 内容改变事件</p><p>onEditorChange({ quill, html, text }) {</p><p>console.log("内容改变事件", quill, html, text);</p><p>this.content = html;</p><p>},</p><p>uploadSuccess(res) {</p><p>console.log(res, "上传图片");</p><p>// 获取富文本组件实例</p><p>let quill = this.$refs.myQuillEditor.quill;</p><p>// 如果上传成功</p><p>if (res) {</p><p>// 获取光标所在位置</p><p>let length = quill.getSelection().index;</p><p>// 插入图片，res为服务器返回的图片链接地址</p><p>quill.insertEmbed(length, "image", res.data[0].servicePath);</p><p>// 调整光标到最后</p><p>quill.setSelection(length + 1);</p><p>} else {</p><p>// 提示信息，需引入Message</p><p>this.$message.error("图片插入失败！");</p><p>}</p><p>},</p><p>},</p><p>3、上传视频 - 视频动态上传到服务器</p><p>组件内调用element的upload组件和vue-quill-editor编辑器<template></p><p><div class="home"></p><p></p><p><el-dialog</p><p>:close-on-click-modal="false"</p><p>width="50%"</p><p>style="margin-top: 1px"</p><p>title="视频上传"</p><p>:visible.sync="videoForm.show"</p><p>append-to-body</p><p>></p><p><el-tabs v-model="videoForm.activeName"></p><p><el-tab-pane label="添加视频链接" name="first"></p><p><el-input</p><p>v-model="videoForm.videoLink"</p><p>placeholder="请输入视频链接"</p><p>clearable</p><p>></el-input></p><p><el-button</p><p>type="primary"</p><p>size="small"</p><p>style="margin: 20px 0px 0px 0px"</p><p>@click="insertVideoLink(videoForm.videoLink)"</p><p>>确认</p><p></el-button></p><p></el-tab-pane></p><p><el-tab-pane label="本地视频上传" name="second"></p><p><el-upload</p><p>v-loading="loading"</p><p>style="text-align: center"</p><p>drag</p><p>:action="uploadUrl"</p><p>accept="video/*"</p><p>name="files"</p><p>:before-upload="onBeforeUploadVideo"</p><p>:on-success="onSuccessVideo"</p><p>:on-error="onErrorVideo"</p><p>:multiple="false"</p><p>></p><p><i class="el-icon-upload"></i></p><p><div class="el-upload__text"></p><p>将文件拖到此处，或<em>点击上传</em></p><p></div></p><p><div class="el-upload__tip" slot="tip"></p><p>只能上传MP4文件，且不超过10M</p><p></div></p><p></el-upload></p><p></el-tab-pane></p><p></el-tabs></p><p></el-dialog></p><p></p><p><quill-editor</p><p>v-model="content"</p><p>ref="myQuillEditor"</p><p>:options="editorOption"</p><p>@change="onEditorChange($event)"</p><p>></p><p></quill-editor></p><p></div></p><p></template></p><p>配置editorOption对象（定义富文本编辑器内的视频上传按钮点击事件，当点击上传视频图标时，触发 upoad 组件的视频上传事件） loading: false, // 加载loading</p><p>// 视频上传变量</p><p>videoForm: {</p><p>show: false, // 显示插入视频链接弹框的标识</p><p>videoLink: "",</p><p>activeName: "first",</p><p>},</p><p>uploadUrl: "#######", // 服务器上传地址</p><p>content: ``, //双向数据绑定数据</p><p>editorOption: {</p><p>modules: {</p><p>toolbar: {</p><p>container: toolbarOptions, //工具栏</p><p>handlers: {</p><p>video: () => {</p><p>// 覆盖默认的上传视频，点击视频图标，显示弹窗</p><p>this.videoForm.show = true;</p><p>},</p><p>}</p><p>},</p><p>}</p><p>}</p><p>methods中，完善 upload视频上传成功事件。视频上传成功后，把视频加载到富文本编辑器内methods: {</p><p>hideLoading() {</p><p>this.loading = false;</p><p>},</p><p>// 内容改变事件</p><p>onEditorChange({ quill, html, text }) {</p><p>console.log("内容改变事件", quill, html, text);</p><p>this.content = html;</p><p>},</p><p>insertVideoLink(videoLink) {</p><p>if (!videoLink) return this.$message.error("视频地址不能为空！");</p><p>this.videoForm.show = false;</p><p>let quill = this.$refs["myQuillEditor"].quill;</p><p>// 获取富文本</p><p>let range = quill.getSelection();</p><p>// 获取光标位置：当编辑器中没有输入文本时，这里获取到的 range 为 null</p><p>let index = range ? range.index : 0;</p><p>// 在光标所在位置插入视频</p><p>quill.insertEmbed(index, "video", videoLink);</p><p>// 调整光标到最后</p><p>quill.setSelection(index + 1);</p><p>},</p><p>// el-文件上传组件</p><p>onBeforeUploadVideo(file) {</p><p>this.loading = true;</p><p>let acceptArr = ["video/mp4"];</p><p>const isVideo = acceptArr.includes(file.type);</p><p>const isLt1M = file.size / 1024 / 1024 < 10;</p><p>if (!isVideo) {</p><p>this.hideLoading();</p><p>this.$message.error("只能上传mp4格式文件!");</p><p>}</p><p>if (!isLt1M) {</p><p>this.hideLoading();</p><p>this.$message.error(`上传文件大小不能超过 10MB!`);</p><p>}</p><p>return isLt1M && isVideo;</p><p>},</p><p>// 文件上传成功时的钩子</p><p>onSuccessVideo(res) {</p><p>this.hideLoading();</p><p>if (res.code === 200) {</p><p>this.insertVideoLink(res.data[0].servicePath);</p><p>} else {</p><p>this.$message.error(res.message);</p><p>}</p><p>},</p><p>// 文件上传失败时的钩子</p><p>onErrorVideo() {</p><p>this.hideLoading();</p><p>this.$message.error("上传失败");</p><p>},</p><p>}</p><p>4、上传视频 - 修改视频 <iframe> 标签为 <video></p><p>vue-quill-editor 默认是以 iframe 保存的。在assets/js文件夹下创建js文件quillVideo.jsimport { Quill } from "vue-quill-editor";</p><p>// 源码中是import直接倒入，这里要用Quill.import引入</p><p>const BlockEmbed = Quill.import("blots/block/embed");</p><p>const Link = Quill.import("formats/link");</p><p>const ATTRIBUTES = ["height", "width"];</p><p>class Video extends BlockEmbed {</p><p>static create(value) {</p><p>const node = super.create(value);</p><p>// 添加video标签所需的属性</p><p>node.setAttribute("controls", "controls");</p><p>node.setAttribute("type", "video/mp4");</p><p>node.setAttribute("src", this.sanitize(value));</p><p>return node;</p><p>}</p><p>static formats(domNode) {</p><p>return ATTRIBUTES.reduce((formats, attribute) => {</p><p>if (domNode.hasAttribute(attribute)) {</p><p>formats[attribute] = domNode.getAttribute(attribute);</p><p>}</p><p>return formats;</p><p>}, {});</p><p>}</p><p>static sanitize(url) {</p><p>return Link.sanitize(url);</p><p>}</p><p>static value(domNode) {</p><p>return domNode.getAttribute("src");</p><p>}</p><p>format(name, value) {</p><p>if (ATTRIBUTES.indexOf(name) > -1) {</p><p>if (value) {</p><p>this.domNode.setAttribute(name, value);</p><p>} else {</p><p>this.domNode.removeAttribute(name);</p><p>}</p><p>} else {</p><p>super.format(name, value);</p><p>}</p><p>}</p><p>html() {</p><p>const { video } = this.value();</p><p>return `<a href="${video}">${video}</a>`;</p><p>}</p><p>}</p><p>Video.blotName = "video"; // 这里不用改，楼主不用iframe，直接替换掉原来，如果需要也可以保留原来的，这里用个新的blot</p><p>Video.className = "ql-video";</p><p>Video.tagName = "video"; // 用video标签替换iframe</p><p>export default Video;</p><p>在页面中引入并注册import { quillEditor, Quill } from "vue-quill-editor";</p><p>import "quill/dist/quill.core.css";</p><p>import "quill/dist/quill.snow.css";</p><p>import "quill/dist/quill.bubble.css";</p><p>// 这里引入修改的video模块并注册</p><p>import Video from "../assets/js/quillVideo";</p><p>Quill.register(Video, true);</p><p>推荐文章</p><div class="ly_isview_code_1"><div class="ly_isview_codea" data-id="17829740"><span><a href="https://www.51969.com/zb_system/login.php" target="_blank">评论可见</a>，请评论后查看内容，谢谢！！！</span></div></div><div id="tingliu" style="background-color:#FFFFFF;border:1px dashed #FF0000;text-align:center;display:block;"><span class="tingliu2 hint--top hint--bounce"><a href="##read_time"><img src="https://www.51969.com/zb_users/plugin/zharry_Reading_time/images/tishi.gif" class="tingliu5" ></a></span>  <span class="tingliu2">您阅读本篇文章共花了：</span> <span class="tingliu3" id="stime"></span> </div></br><script language="JavaScript">var ss=0,mm=0,hh=0;function TimeGo(){ss++;if(ss>=60){mm+=1;ss=0}if(mm>=60){hh+=1;mm=0}ss_str=(ss<10?"0"+ss:ss);mm_str=(mm<10?"0"+mm:mm);tMsg=""+hh+"小时"+mm_str+"分"+ss_str+"秒";document.getElementById("stime").innerHTML=tMsg;setTimeout("TimeGo()",1000)}TimeGo();</script> </div> <div class="tags"> <a href="https://www.51969.com/tags/vue.js/" target="_blank">vue.js</a><a href="https://www.51969.com/tags/ui/" target="_blank">ui</a><a href="https://www.51969.com/tags/javascript/" target="_blank">javascript</a> </div> <div class="copyright"><blockquote>本文由用户于 2024-03-27 发布在金钥匙，如有疑问，请联系我们。<br>本文链接：<a href="https://www.51969.com/post/17829740.html">https://www.51969.com/post/17829740.html</a></blockquote></div> <div class="single-share"> <div class="post-share"> <a title="分享"><i class="jzicon-jzfenxiang"></i></a> <div class="share-icons share-sns" data-title="vue.js javascript Vue +vue-quill-editor+ Element UI使用富文本编辑器，上传图片，上传视频" data-url="https://www.51969.com/post/17829740.html"> <span class="share-icon share-wechat cl" data-type="wechat" title="分享到微信"><i class="jzicon-weixin"></i><span id="wechat-qrcode"></span></span> <span class="share-icon share-sina-weibo cl" data-type="weibo" title="分享到微博"><i class="jzicon-weibo"></i></span><span class="share-icon share-qq cl" data-type="qq" title="分享到QQ好友"><i class="jzicon-qq"></i></span> </div> </div> <div class="post-like"> <a href="javascript:;" onclick="Jz52_tsqa_prise('17829740')" class="Jz52_tsqa_prise_id-17829740 dotGood Jz52_tsqa_prise badge" title="好文！一定要点赞！" data-badge="0"><i class="jzicon-jzzan-h"></i><em class="emz">0</em><em>赞</em></a><a href="javascript:;" class="comiis_poster_a single_icon bill_icon" title="文章海报"><i class="jzicon-jzimg"></i></a> </div></div> </div> <div class="nextpro www_51969_com"> <div class="prev"> <article class="post-overlay"> <div class="background-img" style="background-image:url(https://www.51969.com/zb_users/theme/Jz52_tsqa/style/images/prevnoimg.jpg)"> </div> <div class="post_text"> <span><i class="jzicon-angle-left"></i>上一篇</span> <h3 class="post__title typescale-1 nav-prev">vue.js npm 几种引入element UI的方法详解</h3> </div> <a href="https://www.51969.com/post/17829739.html" class="link-overlay"></a> </article> </div> <div class="next"> <article class="post-overlay"> <div class="background-img" style="background-image:url(https://www.51969.com/zb_users/theme/Jz52_tsqa/style/images/nextnoimg.jpg)"> </div> <div class="post_text"> <span>下一篇<i class="jzicon-angle-right"></i></span> <h3 class="post__title typescale-1 nav-next">矩阵线性代数游戏引擎 Unity3D 法线转换&切线空间</h3> </div> <a href="https://www.51969.com/post/17829741.html" class="link-overlay"></a> </article> </div> </div> <div class="related-list www_51969_com"> <h3><i class="jzicon-jztuwen"></i> 相关文章</h3> <ul> <li><a href="https://www.51969.com/post/18790703.html" title="javascript vue.js html5 css3 typescript 前端Vue uni-app中的通用网络请求封装：common.js的使用"><p>javascript vue.js html5 css3 typescript 前端Vue uni-app中的通用网络请求封装：common.js的使用</p></a> </li> <li><a href="https://www.51969.com/post/18790689.html" title="javascript vue.js 音视频 vue项目中定制化音频展示，wavesurfer.js基本使用"><p>javascript vue.js 音视频 vue项目中定制化音频展示，wavesurfer.js基本使用</p></a> </li> <li><a href="https://www.51969.com/post/18790171.html" title="vue.js python农产品农药商城溯源系统vue+Django"><p>vue.js python农产品农药商城溯源系统vue+Django</p></a> </li> <li><a href="https://www.51969.com/post/18789660.html" title="javascript React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）"><p>javascript React Native Android 源码框架浅析（主流程及 Java 与 JS 双边通信）</p></a> </li> <li><a href="https://www.51969.com/post/18789688.html" title="react.js javascript React Native 框架开发的APP代码发布为APK文件，实现手机端可安装步骤详解，配图文"><p>react.js javascript React Native 框架开发的APP代码发布为APK文件，实现手机端可安装步骤详解，配图文</p></a> </li> <li><a href="https://www.51969.com/post/18790451.html" title="android jetpack ui 【Android-JetpackCompose】11、主题设置：Theme、Colors、Typography、Shapes"><p>android jetpack ui 【Android-JetpackCompose】11、主题设置：Theme、Colors、Typography、Shapes</p></a> </li> <li><a href="https://www.51969.com/post/18790675.html" title="算法华为机试 JavaScript C语言华为OD机试 - 员工派遣（Java & JS & Python & C & C++）"><p>算法华为机试 JavaScript C语言华为OD机试 - 员工派遣（Java & JS & Python & C & C++）</p></a> </li> <li><a href="https://www.51969.com/post/18790199.html" title="vue.js python+vue+flask企业设备报修管理系统"><p>vue.js python+vue+flask企业设备报修管理系统</p></a> </li> </ul> </div> <div class="comments www_51969_com"> <div id="comments" class="comments-area clearfix"> <div class="comment-list"><div class="jz-comment" id="divCommentPost"><h4 class="comments-title"> <span><i class="jzicon-jzqipaoc"></i>发表评论</span><a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;float:right;"><small>取消回复</small></a></h4> <form id="frmSumbit" target="_self" method="post" action="https://www.51969.com/zb_system/cmd.php?act=cmt&postid=17829740&key=03bad581e7103f509f60d3ab1dd5cf7c" ><input type="hidden" name="inpId" id="inpId" value="17829740"><input type="hidden" name="inpRevID" id="inpRevID" value="0"><div class="jz-comment-box jz-comment-ul3"> <input type="text" name="inpName" id="inpName" class="text" value="" size="28" tabindex="1" placeholder="名称(*)"> </div> <div class="jz-comment-box jz-comment-ul3 jz-comment-ul3-2"> <input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" placeholder="邮箱"> </div> <div class="jz-comment-box jz-comment-ul3"> <input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" placeholder="网站"> </div><div class="jz-comment-box jz-comment-textarea"> <textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="欢迎在这里交流评论，但是垃圾评论不受欢迎！"></textarea> </div><input name="sumbit" type="submit" tabindex="6" value="发表评论" onclick="return zbp.comment.post()" class="jz-commbut"> </form></div><label id="AjaxCommentBegin"></label><div class="pagelist page-comment"> </div><label id="AjaxCommentEnd"></label></div> </div></div> </div> </div> <aside id="sticky-wrapper"><div> <span class="ifread"><a href="javascript:;" onclick="Jz52_tsqa_prise('17829740')" class="Jz52_tsqa_prise_id-17829740 dotGood Jz52_tsqa_prise badge" title="好文！一定要点赞！" data-badge="0"><i class="jzicon-jzzan-h"></i><em class="emz">0</em><em>赞</em></a></span><span class="ifread"><a title="回复" href="#divCommentPost" class="badge" data-badge="0"><i class="jzicon-message-3-fill"></i></a></span><span class="ifread"><a title="热度" href="#" class="badge" data-badge="13"><i class="jzicon-fire-fill"></i></a></span><span class="ifread Cshare"><a title="分享" href="javascript:;" class=""><i class="jzicon-share-forward-fill"></i></a> <em class="share-sns" data-title="vue.js javascript Vue +vue-quill-editor+ Element UI使用富文本编辑器，上传图片，上传视频" data-url="https://www.51969.com/post/17829740.html"> <span class="cl" data-type="wechatl" title="分享到微信"><a title="分享到微信" href="#" class="bds_weixin" ><i class="jzicon-weixin"></i>微信<span id="wechat-qrcodel"></span></a></span><span class="cl" data-type="weibo" title="分享到微博"><a title="分享到新浪微博" href="#" class="bds_tsina" ><i class="jzicon-weibo"></i>新浪微博</a></span><span class="cl" data-type="qzone" title="分享到QQ空间"><a title="分享到QQ空间" href="#" class="bds_qzone" ><i class="jzicon-qzone"></i>QQ空间</a></span><span class="cl" data-type="qq" title="分享到QQ好友"><a title="分享到QQ好友" href="#" class="bds_qq" ><i class="jzicon-qq"></i>QQ</a></span> </em></span><span style="margin-top: 30px;"><a href="javascript:;" title="沉浸阅读" class="goread"><i class="jzicon-book-read-fill"></i></a></span></div></aside> <aside id="sidebar-right"><div class="widget ifread" id="side-new-userarticle"><h3 class="function_t">TA的新帖</h3><ul><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/18775639.html" target="_blank" title="网络安全 web安全网络协议安全：SSL/TLS协议详解，SSL协议执行原理、报文格式解析，Wireshark抓包分析SSL协议">网络安全 web安全网络协议安全：SSL/TLS协议详解，SSL协议执行原理、报文格式解析，Wireshark抓包分析SSL协议</a></div><div class="list-footer"><span>2024-05-06</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/15794396.html" target="_blank" title="uni-app 前端 html5 css 经验分享个人开发前端框架【Uniapp】高德地图的接入、定位、自定义标点与信息窗体使用">uni-app 前端 html5 css 经验分享个人开发前端框架【Uniapp】高德地图的接入、定位、自定义标点与信息窗体使用</a></div><div class="list-footer"><span>2024-05-05</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/17833835.html" target="_blank" title="机器学习 googlecloud GEE东拼西凑之随机森林分类">机器学习 googlecloud GEE东拼西凑之随机森林分类</a></div><div class="list-footer"><span>2024-05-04</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/18830869.html" target="_blank" title="java 解决idea中maven依赖显示ommited for duplicate的思路">java 解决idea中maven依赖显示ommited for duplicate的思路</a></div><div class="list-footer"><span>2024-05-03</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/18386971.html" target="_blank" title="运维 Linux多网卡绑定实现负载均衡详解">运维 Linux多网卡绑定实现负载均衡详解</a></div><div class="list-footer"><span>2024-05-02</span></div></div><div class="clear"></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"><a class="list-title" href="https://www.51969.com/post/15782853.html" target="_blank" title="特征选取随机森林实战（分类任务+特征重要性+回归任务）（含Python代码详解）">特征选取随机森林实战（分类任务+特征重要性+回归任务）（含Python代码详解）</a></div><div class="list-footer"><span>2024-05-01</span></div></div><div class="clear"></div></li></ul></div><div id="directory"></div><div class="widget ifread www_51969_com" id="divSearchPanel"><h3 class="function_t">搜索</h3><div><form name="search" method="post" action="https://www.51969.com/zb_system/cmd.php?act=search"><input type="text" name="q" size="11" /> <input type="submit" value="搜索" /></form></div></div><div class="widget ifread www_51969_com" id="side-hot-view-item"><h3 class="function_t">热门文章</h3><ul><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18728284.html" target="_blank" title="程序人生 ai 常用的6个的ChatGPT网站，国内可用！">程序人生 ai 常用的6个的ChatGPT网站，国内可用！</a> </div><div class="list-footer"> <span>2024-05-05</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15795636.html" target="_blank" title="网络 tcp/ip udp netstat 命令详解">网络 tcp/ip udp netstat 命令详解</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/1359274.html" target="_blank" title="GitHub打不开的解决方案（超简单）">GitHub打不开的解决方案（超简单）</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157989.html" target="_blank" title="测试工具 web安全网络安全安全网络 BurpSuite超详细安装教程-功能概述-配置-使用教程---(附下载链接)">测试工具 web安全网络安全安全网络 BurpSuite超详细安装教程-功能概述-配置-使用教程---(附下载链接)</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18376842.html" target="_blank" title="react.js React+Antd+Vite+TypeScript 项目实战教程">react.js React+Antd+Vite+TypeScript 项目实战教程</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157389.html" target="_blank" title="python pycharm Selenium安装WebDriver最新Chrome驱动(含116/117/118/119)">python pycharm Selenium安装WebDriver最新Chrome驱动(含116/117/118/119)</a> </div><div class="list-footer"> <span>2024-05-05</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15791529.html" target="_blank" title="linux 解决Error while loading conda entry point: conda-libmamba-solver (libarchive.so.19: cannot open shared">linux 解决Error while loading conda entry point: conda-libmamba-solver (libarchive.so.19: cannot open shared</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15789343.html" target="_blank" title="测试工具敏捷流程安全性测试前后端联调 postman-使用Postman的模拟服务来模拟（mock）后端数据，完成前端模拟API调用">测试工具敏捷流程安全性测试前后端联调 postman-使用Postman的模拟服务来模拟（mock）后端数据，完成前端模拟API调用</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18137074.html" target="_blank" title="python matplotlib笔记：坐标轴设置">python matplotlib笔记：坐标轴设置</a> </div><div class="list-footer"> <span>2024-05-05</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18796443.html" target="_blank" title="刘一哥 arcgis 空间相关性【GeoDa实用技巧100例】024：geoda计算全局（局部）莫兰指数Moran‘s I，LISA聚类地图，显著性地图">刘一哥 arcgis 空间相关性【GeoDa实用技巧100例】024：geoda计算全局（局部）莫兰指数Moran‘s I，LISA聚类地图，显著性地图</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157783.html" target="_blank" title="职场和发展京区航天研究所哪些比较好的研究所？">职场和发展京区航天研究所哪些比较好的研究所？</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18135863.html" target="_blank" title="人工智能机器学习自动驾驶芯片指标AI算力TOPS和CPU算力DMIPS">人工智能机器学习自动驾驶芯片指标AI算力TOPS和CPU算力DMIPS</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15780907.html" target="_blank" title="软件工程网络协议网络安全 scrum 结对编程软考-软件设计师知识点整理（一篇就过了建议收藏）">软件工程网络协议网络安全 scrum 结对编程软考-软件设计师知识点整理（一篇就过了建议收藏）</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15782743.html" target="_blank" title="java spring boot postman 无法发送请求之Error: connect ECONNREFUSED 127.0.0.1:8080">java spring boot postman 无法发送请求之Error: connect ECONNREFUSED 127.0.0.1:8080</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/17817591.html" target="_blank" title="数学建模 vue.js 前端用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。">数学建模 vue.js 前端用Typescript 的方式封装Vue3的表单绑定，支持防抖等功能。</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/17825034.html" target="_blank" title="python 【数据分析之道-Matplotlib(五)】Matplotlib柱状图">python 【数据分析之道-Matplotlib(五)】Matplotlib柱状图</a> </div><div class="list-footer"> <span>2024-05-05</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15787067.html" target="_blank" title="Ruoyi集成echarts 解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题">Ruoyi集成echarts 解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题</a> </div><div class="list-footer"> <span>2024-05-05</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15790426.html" target="_blank" title="云数据仓库实践：AWS Redshift在大数据储存分析上的落地经验分享">云数据仓库实践：AWS Redshift在大数据储存分析上的落地经验分享</a> </div><div class="list-footer"> <span>2024-05-05</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15786044.html" target="_blank" title="git javascript TypeScript - 函数（下）">git javascript TypeScript - 函数（下）</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15782357.html" target="_blank" title="深度学习目标检测计算机视觉 yolov8 opencv模型部署（C++版）">深度学习目标检测计算机视觉 yolov8 opencv模型部署（C++版）</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15782925.html" target="_blank" title="运维 Linux系统下安装配置 Nginx 超详细图文教程">运维 Linux系统下安装配置 Nginx 超详细图文教程</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18743299.html" target="_blank" title="超级详细的电脑通过网线连接树莓派操作步骤，以及无法查询到树莓派ip的解决办法（本人亲自踩坑无数总结而来，学不会来揍我系列）">超级详细的电脑通过网线连接树莓派操作步骤，以及无法查询到树莓派ip的解决办法（本人亲自踩坑无数总结而来，学不会来揍我系列）</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18767330.html" target="_blank" title="Ubuntu系统使用Docker本地部署Android模拟器并实现公网访问">Ubuntu系统使用Docker本地部署Android模拟器并实现公网访问</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15782126.html" target="_blank" title="容器运维持续部署 docker从安装到部署项目，一篇文章教会你">容器运维持续部署 docker从安装到部署项目，一篇文章教会你</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/13760819.html" target="_blank" title="人工智能自然语言处理语言模型常见大模型对比[ChatGPT（智能聊天机器人）、Newbing(必应)、Bard（巴德）、讯飞星火认知大模型（SparkDesk）、ChatGLM-6B]">人工智能自然语言处理语言模型常见大模型对比[ChatGPT（智能聊天机器人）、Newbing(必应)、Bard（巴德）、讯飞星火认知大模型（SparkDesk）、ChatGLM-6B]</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15789344.html" target="_blank" title="postman 测试工具接口测试 Apifox：详细使用教程，带你轻松拿捏">postman 测试工具接口测试 Apifox：详细使用教程，带你轻松拿捏</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157496.html" target="_blank" title="算法 c++ 【每日易题】Leetcode上Hard难度的动态规划题目——地下城游戏的实现">算法 c++ 【每日易题】Leetcode上Hard难度的动态规划题目——地下城游戏的实现</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/18112984.html" target="_blank" title="ChatGPT论文：大语言模型LLM之战:Dolly、LLaMA 、Vicuna、Guanaco、Bard、ChatGPT--在自然语言转SQL(NL2SQL、Text-to-SQL)的比较（二）">ChatGPT论文：大语言模型LLM之战:Dolly、LLaMA 、Vicuna、Guanaco、Bard、ChatGPT--在自然语言转SQL(NL2SQL、Text-to-SQL)的比较（二）</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/15787887.html" target="_blank" title="xcode objective-c macos iOS 奔溃EXC">xcode objective-c macos iOS 奔溃EXC</a> </div><div class="list-footer"> <span>2024-05-05</span> </div></div></li><li class="widget-list-item"><div class="widget-post-list-item"><div class="list-body"> <a class="list-title" href="https://www.51969.com/post/157640.html" target="_blank" title="程序人生职场和发展 30岁了，说几句大实话">程序人生职场和发展 30岁了，说几句大实话</a> </div><div class="list-footer"> <span>2024-05-06</span> </div></div></li></ul></div><div class="widget ifread www_51969_com" id="side-new-comment-item"><h3 class="function_t">最新评论</h3><ul><li><a href="https://www.51969.com/post/18732400.html#cmt1492" title="gg在kubernetes 容器云原生 K8s（七）：部署、使用 metrics-server的评论"><img alt="gg" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>湖广会馆湖广会馆湖广会馆湖广会馆韩国货</p><span>2024-05-06</span></a></li><li><a href="https://www.51969.com/post/18722929.html#cmt1485" title="你好在c语言 visual studio github 内容运营软件工程一篇文章让你完全掌握使用Git推送代码到新版GitCode的评论"><img alt="你好" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>可以这样子</p><span>2024-05-06</span></a></li><li><a href="https://www.51969.com/post/18771271.html#cmt1478" title="你好在百度搜索引擎用户运营内容运营流量运营头条搜索下拉词怎么做?高粱seo实战告诉你答案的评论"><img alt="你好" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>这个效果不错</p><span>2024-05-06</span></a></li><li><a href="https://www.51969.com/post/18808420.html#cmt1471" title="学生在python 后端 django直播带货系统的设计与实现(程序+开题报告)的评论"><img alt="学生" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>想要源码</p><span>2024-05-03</span></a></li><li><a href="https://www.51969.com/post/51969.html#cmt1464" title="归海奕筎在完全免费白嫖chatGPT-4的终极方法！的评论"><img alt="归海奕筎" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>好想白嫖。</p><span>2024-04-30</span></a></li><li><a href="https://www.51969.com/post/18775205.html#cmt1457" title="奚静婉在typescript vue3+ts 在获取接口响应数据时，在ts中报错类型“AxiosResponse＜any, any＞”上不存在属性“state”的评论"><img alt="奚静婉" src="https://www.51969.com/zb_users/avatar/0.png" class="avatar" height="24" width="24"><p>看看</p><span>2024-04-28</span></a></li></ul></div></aside> </div><script>var billmE = new Array("","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Spt","Oct","Nov","Dec"); var billhost = "https://www.51969.com/",billtxt1 = "老司机，路子野，随时超车",billtxt2 = "POWERED: Z-BLOGPHP THEMES: YEELZ",billurl = "https://www.51969.com/post/17829740.html",billtag = "产品设计",billtitle = "vue.js javascript Vue +vue-quill-editor+ Element UI使用富文本编辑器，上传图片，上传视频",billcont = "...",billimg = "https://www.51969.com/zb_users/plugin/zharry_Reading_time/images/tishi.gif",billlogo = "https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/logo.png",billd = "27",billY = "2024",billm = billmE[parseInt("3")]; var hbtim = '<div class="img_time">'+billd+'<span>'+billm+'. '+billY+'</span></div>';</script><link href="https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/bill.css" media="all" rel="stylesheet"><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/html2canvas.min.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/bill.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/bill/billgo.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/asid.js"></script> <div id="footer"> <p><div><a href="https://www.51969.com/" target="_blank">金钥匙</a> | <a href="https://www.51969.com/sitemap/map.xml" target="_blank">网站地图</a> | <a href="http://ai.51969.com/" target="_blank">金钥匙ai</a> | <a href="http://yzkb.51969.com/" target="_blank">柚子快报</a> | <a href="https://www.51969.com/user/51969561/" target="_blank">柚子快报教程</a> | <a href="http://yzkbyqm.51969.com/" target="_blank">柚子快报邀请码</a> | <a href="http://yzkbjhm.51969.com/" target="_blank">柚子快报激活码</a></div><div>本站部分信息来自互联网收集，仅供学习和交流，如有侵权、后门、不妥之处，请联系我们进行删除处理。 </div><script charset="UTF-8" id="kuazhi_ai_click" src="https://kuazhi.com/kuazhi_ai_click.js"></script><div>金钥匙www.51969.com.2009-2024 All Rights Reserved.</div><script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script><script>LA.init({id:"JsGTT7LZ90ZlKYPn",ck:"JsGTT7LZ90ZlKYPn"})</script> <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">浙ICP备15009899号-2</a></p></p> </div></div></div><a href="javascript:void(0);" class="to-top" id="to-top"><i class="jzicon-jzzhiding"></i><em>返回顶部</em></a><a class="jznight" href="javascript:switchNightMode()" target="_self"><i class="jzicon-yejian-b"></i><em>暗黑模式</em></a><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/custom.js?v1.0.9"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/qrcode.min.js"></script><script src="https://www.51969.com/zb_users/plugin/gbll_rollname/names.js"></script><script src="https://www.51969.com/zb_users/plugin/gbll_rollname/roll.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/sticky-left.js"></script><script src="https://www.51969.com/zb_users/theme/Jz52_tsqa/script/sidebar-right.js"></script><div id="ly_cache" data-id="17829740"></div></body></html>