代码初始化

k94314517

2024-10-16 aa73ca3b93e5b5c98c9f27620ce456805e291273

 admin/src/components/common/RichEditor.vue

@@ -1,7 +1,7 @@
<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="max-height: 300px;min-height: 100px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="onCreated" @onChange="onChange" />
  </div>
</template>
@@ -10,6 +10,7 @@
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: { // 父组件传递的数据
@@ -69,23 +70,23 @@
          // "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>', // 可选
@@ -98,9 +99,9 @@
              "imageWidth50", // 图片宽度相对于编辑器宽度的百分比50
              "imageWidth100", // 图片宽度相对于编辑器宽度的百分比100
            ] // 下级菜单 key ，必填
          },*/
          },
          // 视频分组
         /* {
          {
            key: 'video-style', // 必填，要以 group 开头
            title: '视频', // 必填
            // iconSvg: '<svg>....</svg>', // 可选
@@ -109,7 +110,7 @@
              "uploadVideo", // 上传视频
              "editVideoSize", // 修改视频尺寸
            ] // 下级菜单 key ，必填
          },*/
          },
          "fullScreen", // 全屏
        ],
        excludeKeys: [ // 隐藏指定的菜单项
@@ -128,7 +129,7 @@
        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
@@ -149,7 +150,7 @@
            timeout: 10 * 1000, //10 秒
            // 上传前
            onBeforeUpload(files) {
              Loading.service({
              loadingInstance = Loading.service({
                lock: true,
                text: '上传中...',
                spinner: 'el-icon-loading',
@@ -162,7 +163,7 @@
              console.log(res);
              // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
              // 先关闭等待的Message
              Loading.service({
              loadingInstance = Loading.service({
                lock: true,
                text: '上传中...',
                spinner: 'el-icon-loading',
@@ -177,7 +178,7 @@
                //     message: `${res.data.originalName} 上传失败，请重新尝试`
                // });
              }
              insertFn(res.url, res.originalFilename, res.newFileName);
              insertFn(res.data.url, res.data.originname, res.data.imgname);
            },

            // 单个文件上传成功之后
@@ -187,6 +188,7 @@
            // 单个文件上传失败
            onFailed(file, res) {
              console.log(`${file.originalFilename} 上传失败`, res);
              loadingInstance.close();
            },
            // 上传进度的回调函数
            onProgress(progress) {
@@ -195,13 +197,14 @@
            },
            // 上传错误，或者触发 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
@@ -243,7 +246,7 @@
                //     message: `${res.data.originalName} 上传失败，请重新尝试`
                // });
              }
              insertFn(res.data.link, res.data.link);
              insertFn(res.data.url, res.data.url);
            },
            // 上传进度的回调函数
            onProgress(progress) {