| | |
| | | <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) { |