图：
有空再做补充：
main.js:
- 图标库：font-awesome
-
扩展模块modules：此功能扩展性强，添加一个图标，点击图标展示全部自定义，建议复杂的展示可以封装成一个组件再进行插入
import 'font-awesome/scss/font-awesome.scss' import VueHtml5Editor from 'vue-html5-editor' var options = { name: "vue-html5-editor", // 是否显示模块名称，开启的话会在工具栏的图标后台直接显示名称 showModuleName: false, // 自定义各个图标的class，默认使用的是font-awesome提供的图标 icons: { text: "fa fa-pencil", color: "fa fa-paint-brush", font: "fa fa-font", align: "fa fa-align-justify", list: "fa fa-list", link: "fa fa-chain", unlink: "fa fa-chain-broken", tabulation: "fa fa-table", image: "fa fa-file-image-o", hr: "fa fa-minus", eraser: "fa fa-eraser", undo: "fa-undo fa", info: "fa fa-info", }, // 配置图片模块 image: { // 文件最大体积，单位字节 max file size sizeLimit: 512 * 1024, // 上传参数,默认把图片转为base64而不上传 upload: { url: null, headers: {}, params: {}, fieldName: {} }, // 压缩参数,默认使用localResizeIMG进行压缩,设置为null禁止压缩 compress: { width: 200, height: 200, quality: 80 }, // 响应数据处理,最终返回图片链接 uploadHandler(response) { return response.data } }, // 语言，内建的有英文（en-us）和中文（zh-cn） language: "zh-cn", // 自定义语言 i18n: { "zh-cn": { "align": "对齐方式", "image": "图片", "list": "列表", "link": "链接", "unlink": "去除链接", "table": "表格", "font": "文字", "text": "排版", "eraser": "格式清除", "info": "关于", "color": "颜色", "please enter a url": "请输入地址", "create link": "创建链接", "bold": "加粗", "italic": "倾斜", "underline": "下划线", "strike through": "删除线", "subscript": "上标", "superscript": "下标", "heading": "标题", "font name": "字体", "font size": "文字大小", "left justify": "左对齐", "center justify": "居中", "right justify": "右对齐", "ordered list": "有序列表", "unordered list": "无序列表", "fore color": "前景色", "background color": "背景色", "row count": "行数", "column count": "列数", "save": "确定", "upload": "上传", "progress": "进度", "unknown": "未知", "please wait": "请稍等", "error": "错误", "abort": "中断", "reset": "重置" } }, // 隐藏不想要显示出来的模块 hiddenModules: [], // 自定义要显示的模块，并控制顺序 visibleModules: [ "text", "color", "font", "align", "list", //列表 "link", //链接 "unlink", //去除链接 "tabulation", //表格 "hr", //分隔线 "eraser", //格式清除 "undo", //撤销 "image", "video", "audio" ], // 扩展模块，具体可以参考examples或查看源码 modules: [{ name: 'video', icon: 'el-icon-video-camera', i18n: 'video', show: true, init: function (editor) { }, //vue component dashboard: { template: '<div><el-tabs v-model="customForm.activeName"> <el-tab-pane label="添加视频链接" name="first"> <div style="margin-top:10px"> <el-input v-model="customForm.videoLink" placeholder="请输入视频链接" clearable /><el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="insertVideoLink(customForm.videoLink,null)">确认</el-button></div></el-tab-pane><el-tab-pane label="本地视频上传" name="second"><div style="margin-top:10px"><drUploadAli :buttonName.sync="buttonName" :type="typeFileVideo" :fileListUrl.sync="licenseUrlVideo" @upData="uploadSuccessVideo" /></div> </el-tab-pane></el-tabs></div>', data: function () { return { videoUrl: '', customForm: { videoLink: '', activeName: 'first' //标签默认选择 }, buttonName: '上传视频', typeFileVideo: 'video', licenseUrlVideo: [], } }, methods: { //上传视频-自定义-视频链接 insertVideoLink(videoLink, poster) { if (!videoLink) { this.$message.info('视频地址不能为空！') return false; } this.$parent.execCommand('insertHTML', '<br><video class="ql-video video-width" src="' + videoLink + '" autoplay controls x5-video-player-type="h5" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" type="video/mp4">') this.customForm.videoLink = '' }, // 上传视频-自定义-回调阿里上传组件 uploadSuccessVideo() { this.$parent.execCommand('insertHTML', '<br><video class="ql-video video-width" src="' + this.licenseUrlVideo[0].url + '" autoplay controls x5-video-player-type="h5" x5-video-orientation="portraint" x5-playsinline="true" x5-video-player-fullscreen="true" type="video/mp4">') }, } } },{ name: 'audio', icon: 'el-icon-headset', i18n: 'audio', show: true, init: function (editor) { }, //vue component dashboard: { template: '<div><el-tabs v-model="customForm.activeName"> <el-tab-pane label="添加音频链接" name="first"> <div style="margin-top:10px"> <el-input v-model="customForm.audioLink" placeholder="请输入音频链接" clearable /><el-button type="primary" size="small" style="margin: 20px 0px 0px 0px " @click="insertAudioLink(customForm.audioLink,null)">确认</el-button></div></el-tab-pane><el-tab-pane label="本地音频上传" name="second"><div style="margin-top:10px"><drUploadAli :buttonName.sync="buttonName" :type="typeFileAudio" :fileListUrl.sync="licenseUrlAudio" @upData="uploadSuccessAudio" /></div> </el-tab-pane></el-tabs></div>', data: function () { return { audioUrl: '', customForm: { audioLink: '', activeName: 'first' //标签默认选择 }, buttonName: '上传音频', typeFileAudio: 'audio', licenseUrlAudio: [], } }, methods: { //上传视频-自定义-视频链接 insertAudioLink(audioLink, poster) { if (!audioLink) { this.$message.info('视频地址不能为空！') return false; } this.$parent.execCommand('insertHTML', '<br><audio controls><source class="ql-audio" src="' + audioLink + '" type="audio/mpeg">') this.customForm.audioLink = '' }, // 上传视频-自定义-回调阿里上传组件 uploadSuccessAudio() { this.$parent.execCommand('insertHTML', '<br><audio class="ql-audio" src="' + this.licenseUrlAudio[0].url + '" type="audio/mpeg">') }, } } }] }; Vue.use(VueHtml5Editor, options);
封装的组件 html5Editor.vue:
<template> <div> <vue-html5-editor ref="editor" :height="260" :content="contentEditor" :auto-height="false" @change="updateData"> </vue-html5-editor> </div> </template> <script> export default { name: "html5Editor", props: { /* 编辑器的内容 */ content: { type: String, default: "" }, }, data() { return { contentEditor: '', num:1, } }, watch:{ content(newVal, oldVal) { if(this.num==1){ this.contentEditor = newVal } } }, mounted() {}, methods: { // 更新编辑器内容 updateData() { this.num = 2 let obj = document.getElementsByClassName("content")[0]; let html = obj.innerHTML; let filterHtml = html.replace(/crossorigin="anonymous"/g, ""); this.contentEditor = filterHtml; // 编辑器封装后，将内容传出去 this.$emit('update:contentc', filterHtml); this.$emit('upData'); }, }, } </script> <style> .vue-html5-editor>.toolbar>ul{ background: linear-gradient(180deg, #FAFAFA 0%, #E9E9E9 100%); } </style>
父组件使用：
<html5Editor:content.sync="form.leftcontent" @upData="upDataleftcontent" />
