|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <div :style="styleEditor"> | 
|---|
|  |  |  | <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" /> | 
|---|
|  |  |  | <Editor style="height: 300px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode" | 
|---|
|  |  |  | <Editor style="min-height: 80px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode" | 
|---|
|  |  |  | @onCreated="onCreated" @onChange="onChange" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | 
|---|
|  |  |  | import Vue from 'vue' | 
|---|
|  |  |  | import { Editor, Toolbar } from '@wangeditor/editor-for-vue' | 
|---|
|  |  |  | import { Loading } from 'element-ui'; | 
|---|
|  |  |  | let loadingInstance = null | 
|---|
|  |  |  | export default Vue.extend({ | 
|---|
|  |  |  | props: { | 
|---|
|  |  |  | richData: { // 父组件传递的数据 | 
|---|
|  |  |  | 
|---|
|  |  |  | // "numberedList", // 有序列表 | 
|---|
|  |  |  | // "codeSelectLang" // 选择语言 | 
|---|
|  |  |  | // 表格功能分组 | 
|---|
|  |  |  | /* { | 
|---|
|  |  |  | key: 'table-style', // 必填,要以 group 开头 | 
|---|
|  |  |  | title: '表格', // 必填 | 
|---|
|  |  |  | // iconSvg: '<svg>....</svg>', // 可选 | 
|---|
|  |  |  | menuKeys: [ | 
|---|
|  |  |  | "insertTable", // 插入表格 | 
|---|
|  |  |  | "deleteTable", // 删除表格 | 
|---|
|  |  |  | "insertTableRow", // 插入行 | 
|---|
|  |  |  | "deleteTableRow", // 删除行 | 
|---|
|  |  |  | "insertTableCol", // 插入列 | 
|---|
|  |  |  | "deleteTableCol", // 删除列 | 
|---|
|  |  |  | "tableHeader", // 表头 | 
|---|
|  |  |  | "tableFullWidth", // 宽度自适应 | 
|---|
|  |  |  | ] // 下级菜单 key ,必填 | 
|---|
|  |  |  | },*/ | 
|---|
|  |  |  | /* { | 
|---|
|  |  |  | key: 'table-style', // 必填,要以 group 开头 | 
|---|
|  |  |  | title: '表格', // 必填 | 
|---|
|  |  |  | // iconSvg: '<svg>....</svg>', // 可选 | 
|---|
|  |  |  | menuKeys: [ | 
|---|
|  |  |  | "insertTable", // 插入表格 | 
|---|
|  |  |  | "deleteTable", // 删除表格 | 
|---|
|  |  |  | "insertTableRow", // 插入行 | 
|---|
|  |  |  | "deleteTableRow", // 删除行 | 
|---|
|  |  |  | "insertTableCol", // 插入列 | 
|---|
|  |  |  | "deleteTableCol", // 删除列 | 
|---|
|  |  |  | "tableHeader", // 表头 | 
|---|
|  |  |  | "tableFullWidth", // 宽度自适应 | 
|---|
|  |  |  | ] // 下级菜单 key ,必填 | 
|---|
|  |  |  | },*/ | 
|---|
|  |  |  | // 上传图片分组 | 
|---|
|  |  |  | /* { | 
|---|
|  |  |  | { | 
|---|
|  |  |  | key: 'img-style', // 必填,要以 group 开头 | 
|---|
|  |  |  | title: '图片', // 必填 | 
|---|
|  |  |  | // iconSvg: '<svg>....</svg>', // 可选 | 
|---|
|  |  |  | 
|---|
|  |  |  | "imageWidth50", // 图片宽度相对于编辑器宽度的百分比50 | 
|---|
|  |  |  | "imageWidth100", // 图片宽度相对于编辑器宽度的百分比100 | 
|---|
|  |  |  | ] // 下级菜单 key ,必填 | 
|---|
|  |  |  | },*/ | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 视频分组 | 
|---|
|  |  |  | /* { | 
|---|
|  |  |  | { | 
|---|
|  |  |  | key: 'video-style', // 必填,要以 group 开头 | 
|---|
|  |  |  | title: '视频', // 必填 | 
|---|
|  |  |  | // iconSvg: '<svg>....</svg>', // 可选 | 
|---|
|  |  |  | 
|---|
|  |  |  | "uploadVideo", // 上传视频 | 
|---|
|  |  |  | "editVideoSize", // 修改视频尺寸 | 
|---|
|  |  |  | ] // 下级菜单 key ,必填 | 
|---|
|  |  |  | },*/ | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | "fullScreen", // 全屏 | 
|---|
|  |  |  | ], | 
|---|
|  |  |  | excludeKeys: [ // 隐藏指定的菜单项 | 
|---|
|  |  |  | 
|---|
|  |  |  | MENU_CONF: { | 
|---|
|  |  |  | // 图片上传 | 
|---|
|  |  |  | uploadImage: { | 
|---|
|  |  |  | server: process.env.VUE_APP_BASE_API + "/common/upload", | 
|---|
|  |  |  | server: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/upload?folder=richeditor', | 
|---|
|  |  |  | fieldName: 'file', | 
|---|
|  |  |  | // 单个文件的最大体积限制,默认为 2M | 
|---|
|  |  |  | maxFileSize: 10 * 1024 * 1024, // 10M | 
|---|
|  |  |  | 
|---|
|  |  |  | timeout: 10 * 1000, //10 秒 | 
|---|
|  |  |  | // 上传前 | 
|---|
|  |  |  | onBeforeUpload(files) { | 
|---|
|  |  |  | Loading.service({ | 
|---|
|  |  |  | loadingInstance = Loading.service({ | 
|---|
|  |  |  | lock: true, | 
|---|
|  |  |  | text: '上传中...', | 
|---|
|  |  |  | spinner: 'el-icon-loading', | 
|---|
|  |  |  | 
|---|
|  |  |  | console.log(res); | 
|---|
|  |  |  | // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理 | 
|---|
|  |  |  | // 先关闭等待的Message | 
|---|
|  |  |  | Loading.service({ | 
|---|
|  |  |  | loadingInstance = Loading.service({ | 
|---|
|  |  |  | lock: true, | 
|---|
|  |  |  | text: '上传中...', | 
|---|
|  |  |  | spinner: 'el-icon-loading', | 
|---|
|  |  |  | 
|---|
|  |  |  | //     message: `${res.data.originalName} 上传失败,请重新尝试` | 
|---|
|  |  |  | // }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | insertFn(res.url, res.originalFilename, res.newFileName); | 
|---|
|  |  |  | insertFn(res.data.url, res.data.originname, res.data.imgname); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // 单个文件上传成功之后 | 
|---|
|  |  |  | 
|---|
|  |  |  | // 单个文件上传失败 | 
|---|
|  |  |  | onFailed(file, res) { | 
|---|
|  |  |  | console.log(`${file.originalFilename} 上传失败`, res); | 
|---|
|  |  |  | loadingInstance.close(); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 上传进度的回调函数 | 
|---|
|  |  |  | onProgress(progress) { | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 上传错误,或者触发 timeout 超时 | 
|---|
|  |  |  | onError(file, err, res) { | 
|---|
|  |  |  | loadingInstance.close(); | 
|---|
|  |  |  | console.log(`${file.originalFilename} 上传出错`, err, res); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 视频上传 | 
|---|
|  |  |  | uploadVideo: { | 
|---|
|  |  |  | fieldName: 'file', | 
|---|
|  |  |  | server: process.env.VUE_APP_BASE_API + "/common/upload", | 
|---|
|  |  |  | server: process.env.VUE_APP_API_PREFIX + '/public/upload?folder=richeditor', | 
|---|
|  |  |  | // 单个文件的最大体积限制,默认为 10M | 
|---|
|  |  |  | maxFileSize: 50 * 1024 * 1024, // 50M | 
|---|
|  |  |  | // 最多可上传几个文件,默认为 5 | 
|---|
|  |  |  | 
|---|
|  |  |  | //     message: `${res.data.originalName} 上传失败,请重新尝试` | 
|---|
|  |  |  | // }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | insertFn(res.data.link, res.data.link); | 
|---|
|  |  |  | insertFn(res.data.url, res.data.url); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | // 上传进度的回调函数 | 
|---|
|  |  |  | onProgress(progress) { | 
|---|