mooho-base-admin-plus 2.10.90 → 2.10.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mooho-base-admin-plus",
   "description": "MOOHO basic framework for admin by Vue3",
-  "version": "2.10.90",
+  "version": "2.10.92",
   "author": "jinyifan <jinyifan@mooho.com.cn>",
   "license": "MIT",
   "private": false,
@@ -13,10 +13,11 @@
     "package": "vite build --mode lib"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-vue": "^7.4.0",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@handsontable/vue3": "^16.1.1",
     "axios": "^1.6.7",
-    "ckeditor4-integrations-common": "^1.0.0",
+    "ckeditor5": "^47.6.1",
     "date-fns": "^2.9.0",
     "echarts": "^5.3.2",
     "file-saver": "^2.0.2",

package/src/ckeditor/mooho-classic-editor.js

@@ -0,0 +1,187 @@
+/**
+ * 自定义 Classic 编辑器：在 GPL 下按需组合开源插件（替代 @ckeditor/ckeditor5-build-classic）
+ */
+import {
+  Alignment,
+  Autoformat,
+  BlockQuote,
+  Bold,
+  ClassicEditor,
+  Code,
+  Essentials,
+  FindAndReplace,
+  Font,
+  Heading,
+  HorizontalLine,
+  Image,
+  ImageCaption,
+  ImageStyle,
+  ImageToolbar,
+  ImageUpload,
+  Indent,
+  IndentBlock,
+  Italic,
+  Link,
+  List,
+  MediaEmbed,
+  PageBreak,
+  Paragraph,
+  PasteFromOffice,
+  PictureEditing,
+  RemoveFormat,
+  SelectAll,
+  ShowBlocks,
+  SourceEditing,
+  SpecialCharacters,
+  Strikethrough,
+  Subscript,
+  Superscript,
+  Table,
+  TableCaption,
+  TableCellProperties,
+  TableColumnResize,
+  TableProperties,
+  TableToolbar,
+  TextTransformation,
+  TodoList,
+  Underline
+} from 'ckeditor5';
+import 'ckeditor5/ckeditor5.css';
+import zhCnTranslations from 'ckeditor5/translations/zh-cn.js';
+
+export class MoohoClassicEditor extends ClassicEditor {
+  static builtinPlugins = [
+    Essentials,
+    Autoformat,
+    TextTransformation,
+    Bold,
+    Italic,
+    Underline,
+    Strikethrough,
+    Subscript,
+    Superscript,
+    Code,
+    RemoveFormat,
+    Paragraph,
+    Heading,
+    Link,
+    List,
+    TodoList,
+    BlockQuote,
+    Indent,
+    IndentBlock,
+    Alignment,
+    Font,
+    Image,
+    ImageCaption,
+    ImageStyle,
+    ImageToolbar,
+    ImageUpload,
+    PictureEditing,
+    Table,
+    TableToolbar,
+    TableProperties,
+    TableCellProperties,
+    TableCaption,
+    TableColumnResize,
+    MediaEmbed,
+    PasteFromOffice,
+    HorizontalLine,
+    PageBreak,
+    SpecialCharacters,
+    SourceEditing,
+    SelectAll,
+    FindAndReplace,
+    ShowBlocks
+  ];
+
+  static defaultConfig = {
+    licenseKey: 'GPL',
+    /** 必须传入翻译对象；仅 side-effect import 不会注册语言包，界面会回退英文 */
+    translations: [zhCnTranslations],
+    language: 'zh-cn',
+    menuBar: {
+      isVisible: true
+    },
+    toolbar: {
+      shouldNotGroupWhenFull: true,
+      items: [
+        'undo',
+        'redo',
+        '|',
+        'findAndReplace',
+        'selectAll',
+        '|',
+        'heading',
+        '|',
+        'fontSize',
+        'fontFamily',
+        'fontColor',
+        'fontBackgroundColor',
+        '|',
+        'bold',
+        'italic',
+        'underline',
+        'strikethrough',
+        'code',
+        'subscript',
+        'superscript',
+        'removeFormat',
+        '|',
+        'alignment',
+        '|',
+        'link',
+        '|',
+        'bulletedList',
+        'numberedList',
+        'todoList',
+        '|',
+        'outdent',
+        'indent',
+        '|',
+        'blockQuote',
+        'horizontalLine',
+        'pageBreak',
+        '|',
+        'imageUpload',
+        'insertTable',
+        'mediaEmbed',
+        'specialCharacters',
+        '|',
+        'sourceEditing',
+        'showBlocks'
+      ]
+    },
+    image: {
+      toolbar: [
+        'imageTextAlternative',
+        'toggleImageCaption',
+        '|',
+        'imageStyle:inline',
+        'imageStyle:block',
+        'imageStyle:side',
+        '|',
+        'linkImage'
+      ]
+    },
+    table: {
+      contentToolbar: [
+        'tableColumn',
+        'tableRow',
+        'mergeTableCells',
+        'tableProperties',
+        'tableCellProperties',
+        'toggleTableCaption'
+      ]
+    },
+    heading: {
+      options: [
+        { model: 'paragraph', title: '正文', class: 'ck-heading_paragraph' },
+        { model: 'heading1', view: 'h1', title: '标题 1', class: 'ck-heading_heading1' },
+        { model: 'heading2', view: 'h2', title: '标题 2', class: 'ck-heading_heading2' },
+        { model: 'heading3', view: 'h3', title: '标题 3', class: 'ck-heading_heading3' },
+        { model: 'heading4', view: 'h4', title: '标题 4', class: 'ck-heading_heading4' }
+      ]
+    }
+  };
+}

package/src/components/richEditor/index.vue

@@ -1,23 +1,32 @@
 <template>
-  <div :id="'editor_' + uid"></div>
+  <div class="mooho-rich-editor" :style="wrapStyle">
+    <ckeditor
+      :editor="editorRef"
+      :model-value="editorHtml"
+      :disabled="readonly"
+      :config="editorConfig"
+      @update:model-value="onEditorUpdate"
+    />
+  </div>
 </template>
 
 <script>
-  /* global CKEDITOR */
-
+  import { markRaw } from 'vue';
+  import { Ckeditor } from '@ckeditor/ckeditor5-vue';
+  import { MoohoClassicEditor } from '../../ckeditor/mooho-classic-editor.js';
   import mixinPage from '../../mixins/page';
   import util from '../../libs/util';
-  import { debounce, getEditorNamespace } from 'ckeditor4-integrations-common';
-  import Setting from '../../setting';
+  import { createLegacyCkEditorUploadPlugin } from '../../libs/ckeditor5-upload-adapter';
 
   export default {
+    name: 'RichEditor',
+    components: { Ckeditor },
     mixins: [mixinPage],
     props: {
       modelValue: {
         type: String,
         default: ''
       },
-      // 只读
       readonly: {
         type: Boolean,
         default: false
@@ -27,163 +36,46 @@
       },
       height: {
         type: Number
-      },
-      editorUrl: {
-        type: String,
-        default: Setting.editorUrl
       }
     },
     data() {
       return {
-        uid: Math.random().toString().replace('.', ''),
-        instance: null, // 当前实例
-        $_destroyed: false // 是否销毁
+        editorRef: markRaw(MoohoClassicEditor)
       };
     },
     computed: {
-      config() {
-        const token = util.cookies.get('token');
+      /** 表单 parseData 可能为 null/undefined，CKEditor DataController.set 必须是字符串，否则会 Object.keys 报错 */
+      editorHtml() {
+        const v = this.modelValue;
+        if (v == null) return '';
+        return typeof v === 'string' ? v : String(v);
+      },
+      wrapStyle() {
+        const h = this.height == null ? 500 : this.height;
         return {
-          height: this.height == null ? 500 : this.height,
-          fileTools_requestHeaders: {
-            Authorization: 'Bearer ' + token
-          },
-          // toolbargroups: [
-          //   { name: 'clipboard', groups: ['clipboard', 'undo'] },
-          //   { name: 'editing', groups: ['find', 'selection', 'spellchecker'] },
-          //   { name: 'links' },
-          //   { name: 'insert' },
-          //   { name: 'forms' },
-          //   { name: 'tools' },
-          //   { name: 'document', groups: ['mode', 'document', 'doctools'] },
-          //   { name: 'others' },
-          //   '/',
-          //   { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
-          //   { name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align'] },
-          //   { name: 'styles' },
-          //   { name: 'colors' },
-          //   { name: 'about' }
-          // ],
-          filebrowserUploadUrl: this.apiBaseURL + 'api/CKEditor?r=1',
-          removePlugins: 'easyimage,cloudservices,exportpdf',
-          clipboard_handleImages: false
+          width: this.width == null ? undefined : `${this.width}px`,
+          '--mooho-re-min-height': `${h}px`
         };
-      }
-    },
-    mounted() {
-      getEditorNamespace(this.editorUrl, namespace => {
-        this.$emit('namespaceloaded', namespace);
-      }).then(() => {
-        if (this.$_destroyed) {
-          return;
-        }
-
-        const config = this.prepareConfig();
-
-        CKEDITOR.replace('editor_' + this.uid, config);
-      });
-    },
-    beforeUnmount() {
-      if (this.instance) {
-        this.instance.destroy();
-      }
-
-      this.$_destroyed = true;
-    },
-    watch: {
-      modelValue(val) {
-        if (this.instance && this.instance.getData() !== val) {
-          this.instance.setData(val);
-        }
       },
-
-      readonly(val) {
-        if (this.instance) {
-          this.instance.setReadOnly(val);
-        }
+      editorConfig() {
+        const uploadUrl = this.apiBaseURL + 'api/CKEditor?r=1';
+        return {
+          extraPlugins: [
+            createLegacyCkEditorUploadPlugin(uploadUrl, () => util.cookies.get('token') || '')
+          ]
+        };
       }
     },
     methods: {
-      prepareConfig() {
-        const config = this.config || {};
-        config.on = config.on || {};
-
-        if (config.delayIfDetached === undefined) {
-          config.delayIfDetached = true;
-        }
-        if (this.readonly !== null) {
-          config.readOnly = this.readonly;
-        }
-
-        const userInstanceReadyCallback = config.on.instanceReady;
-
-        config.on.instanceReady = evt => {
-          this.instance = evt.editor;
-
-          this.$nextTick().then(() => {
-            this.prepareComponentData();
-
-            if (userInstanceReadyCallback) {
-              userInstanceReadyCallback(evt);
-            }
-          });
-        };
-
-        return config;
-      },
-      prepareComponentData() {
-        const data = this.modelValue;
-
-        this.instance.fire('lockSnapshot');
-
-        this.instance.setData(data, {
-          callback: () => {
-            this.$_setUpEditorEvents();
-
-            const newData = this.instance.getData();
-
-            // Locking the snapshot prevents the 'change' event.
-            // Trigger it manually to update the bound data.
-            if (data !== newData) {
-              // this.$once('input', () => {
-              //   this.$emit('ready', this.instance);
-              // });
-
-              this.$emit('update:modelValue', newData);
-            }
-
-            this.instance.fire('unlockSnapshot');
-          }
-        });
-      },
-      $_setUpEditorEvents() {
-        const editor = this.instance;
-
-        editor.on(
-          'change',
-          debounce(evt => {
-            const data = editor.getData();
-
-            // Editor#change event might be fired without an actual data change.
-            if (this.modelValue !== data) {
-              // The compatibility with the v-model and general Vue.js concept of input–like components.
-              this.$emit('update:modelValue', data, evt, editor);
-            }
-          }, 80)
-        );
-
-        editor.on('fileUploadResponse', evt => {
-          setTimeout(() => {
-            const data = editor.getData();
-
-            // Editor#change event might be fired without an actual data change.
-            if (this.modelValue !== data) {
-              // The compatibility with the v-model and general Vue.js concept of input–like components.
-              this.$emit('update:modelValue', data, evt, editor);
-            }
-          });
-        });
+      onEditorUpdate(val) {
+        this.$emit('update:modelValue', val == null ? '' : val);
       }
     }
   };
 </script>
+
+<style scoped>
+  .mooho-rich-editor :deep(.ck-editor__editable) {
+    min-height: var(--mooho-re-min-height, 500px);
+  }
+</style>

package/src/components/view/view-table.vue

@@ -2821,9 +2821,11 @@
       // 上移
       up(row, index) {
         let data = this.staticData;
-        if (index > 0) {
-          data.splice(index, 1);
-          data.splice(index - 1, 0, row);
+        // 计算全局索引（考虑分页）
+        let globalIndex = (this.current - 1) * this.size + index;
+        if (globalIndex > 0 && globalIndex < data.length) {
+          data.splice(globalIndex, 1);
+          data.splice(globalIndex - 1, 0, row);
 
           // for (let item of data) {
           //   delete item.id;
@@ -2835,9 +2837,11 @@
       // 下移
       down(row, index) {
         let data = this.staticData;
-        if (index < data.length - 1) {
-          data.splice(index, 1);
-          data.splice(index + 1, 0, row);
+        // 计算全局索引（考虑分页）
+        let globalIndex = (this.current - 1) * this.size + index;
+        if (globalIndex < data.length - 1 && globalIndex >= 0) {
+          data.splice(globalIndex, 1);
+          data.splice(globalIndex + 1, 0, row);
 
           // for (let item of data) {
           //   delete item.id;

package/src/libs/ckeditor5-upload-adapter.js

@@ -0,0 +1,38 @@
+/**
+ * 对接现有 api/CKEditor 上传接口（multipart + { uploaded, url } / { uploaded:0, error }）
+ */
+export function createLegacyCkEditorUploadPlugin(uploadUrl, getToken) {
+  return function LegacyCkEditorUploadPlugin(editor) {
+    editor.plugins.get('FileRepository').createUploadAdapter = loader => ({
+      upload() {
+        return loader.file.then(file => {
+          const data = new FormData();
+          data.append('upload', file);
+          // 勿用 credentials:'include'：与 API 不同源时，服务端若返回 ACAO:* 会违反 CORS（带凭证不允许 *）。
+          // 鉴权已走 Authorization Bearer，一般不必再发跨域 Cookie。
+          return fetch(uploadUrl, {
+            method: 'POST',
+            body: data,
+            headers: {
+              Authorization: 'Bearer ' + (getToken ? getToken() : '')
+            }
+          }).then(response => {
+            if (!response.ok) {
+              return response.text().then(text => {
+                throw new Error(text || response.statusText);
+              });
+            }
+            return response.json();
+          }).then(body => {
+            if (body.uploaded === 1 && body.url) {
+              return { default: body.url };
+            }
+            const msg = (body.error && body.error.message) || 'Upload failed';
+            throw new Error(msg);
+          });
+        });
+      },
+      abort() {}
+    });
+  };
+}

package/src/setting.js

@@ -203,9 +203,7 @@ const Setting = {
    * 功能配置
    * */
   // 相同路由，不同参数间进行切换，是否强力更新
-  sameRouteForceUpdate: false,
-  // 富文本编辑器
-  editorUrl: 'https://cdn-source.ckeditor.com/4.21.0/full-all/ckeditor.js'
+  sameRouteForceUpdate: false
 };
 
 // const copyTo = (source, target) => {

package/token.txt

@@ -1,2 +1,2 @@
-echo "//registry.npmjs.org/:_authToken=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" >> .npmrc
-npm config set //registry.npmjs.org/:_authToken=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
+echo "//registry.npmjs.org/:_authToken=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" >> .npmrc
+npm config set //registry.npmjs.org/:_authToken=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

package/vite.config.js

@@ -1,9 +1,71 @@
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import { resolve } from 'path';
+import { existsSync, readdirSync, statSync } from 'node:fs';
+import { resolve } from 'node:path';
 import Setting from './test/setting.env';
 import compression from 'vite-plugin-compression';
 
+/**
+ * npm 会把「核心包」装在 ckeditor5 的嵌套 node_modules，而 ckeditor5-emoji 等顶层插件各自再带一份
+ * core/utils/ui…，运行时就加载了两份 → ckeditor-duplicated-modules。
+ * 凡在 ckeditor5/node_modules/@ckeditor 下存在的包，全部别名到该目录，保证全应用单实例。
+ */
+function ckeditorSingleInstanceAliases() {
+  const nestedRoot = resolve(__dirname, 'node_modules/ckeditor5/node_modules/@ckeditor');
+  const aliases = {};
+  if (!existsSync(nestedRoot)) return aliases;
+  for (const name of readdirSync(nestedRoot)) {
+    const dir = resolve(nestedRoot, name);
+    if (statSync(dir).isDirectory()) {
+      aliases[`@ckeditor/${name}`] = dir;
+    }
+  }
+  return aliases;
+}
+
+/** CKEditor 5：避免 @ckeditor/ckeditor5-utils 等被拆进多个 chunk 触发 ckeditor-duplicated-modules */
+function isCKEditorModule(id) {
+  const n = id.replace(/\\/g, '/');
+  return n.includes('/@ckeditor/') || n.includes('/ckeditor5/');
+}
+
+function ckeditorManualChunk(id) {
+  if (isCKEditorModule(id)) {
+    return 'ckeditor';
+  }
+}
+
+const ckeditorResolve = {
+  alias: {
+    '@': resolve(__dirname, '.', 'src'),
+    ...ckeditorSingleInstanceAliases()
+  }
+};
+
+/**
+ * `optimizeDeps.exclude` 掉 ckeditor5 / Vue 集成包后，CKEditor 链路上的 CJS/UMD 裸依赖不会自动预构建，
+ * 浏览器按 ESM 直出会报「无 default」；下列包仍需 include 做 esbuild 互操作。
+ */
+/** 勿包含 @ckeditor/*：预构建会打进第二份 utils/core，与上面 alias 单实例冲突 */
+const ckeditorLinkedDepInterop = [
+  '@ungap/structured-clone',
+  'color-convert',
+  'color-name',
+  'color-parse',
+  'es-toolkit/compat/isEqual',
+  'extend',
+  'fuzzysort',
+  'rehype-dom-parse',
+  'rehype-dom-stringify',
+  'rehype-remark',
+  'remark-breaks',
+  'remark-gfm',
+  'remark-parse',
+  'remark-rehype',
+  'remark-stringify',
+  'unified'
+];
+
 const build = defineConfig({
   define: {
     __VUE_OPTIONS_API__: true,
@@ -19,18 +81,29 @@ const build = defineConfig({
     })
   ],
   base: Setting.publicPath,
+  // 勿对 ckeditor5 做预打包，否则易与源码路径下的 @ckeditor 子依赖形成双份 utils（ckeditor-duplicated-modules）
+  optimizeDeps: {
+    exclude: [
+      'ckeditor5',
+      '@ckeditor/ckeditor5-vue',
+      '@ckeditor/ckeditor5-integrations-common'
+    ],
+    include: ckeditorLinkedDepInterop
+  },
   build: {
     sourcemap: false, // 输出.map文件
     outDir: Setting.outputDir,
-    assetsDir: Setting.assetsDir
+    assetsDir: Setting.assetsDir,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          return ckeditorManualChunk(id);
+        }
+      }
+    }
     // minify: 'terser', // 混淆器，terser构建后文件体积更小
   },
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, '.', 'src')
-    }
-    // extensions: ['.js', '.json', '.vue']
-  }
+  resolve: ckeditorResolve
 });
 
 const lib = defineConfig({
@@ -59,9 +132,8 @@ const lib = defineConfig({
           entryFileNames: 'mooho-base-admin-plus.min.js',
           chunkFileNames: '[name].js',
           assetFileNames: '[name].[ext]',
-          namespaceToStringTag: true,
-          inlineDynamicImports: false,
-          manualChunks: undefined,
+          // UMD / IIFE 不支持多 chunk，不能与 manualChunks 同时使用
+          inlineDynamicImports: true,
           globals: { vue: 'Vue', 'view-ui-plus': 'viewUiPlus' }
         },
         {
@@ -72,20 +144,16 @@ const lib = defineConfig({
           entryFileNames: 'mooho-base-admin-plus.min.esm.js',
           chunkFileNames: '[name].js',
           assetFileNames: '[name].[ext]',
-          namespaceToStringTag: true,
           inlineDynamicImports: false,
-          manualChunks: undefined,
+          manualChunks(id) {
+            return ckeditorManualChunk(id);
+          },
           globals: { vue: 'Vue', 'view-ui-plus': 'viewUiPlus' }
         }
       ]
     }
   },
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, '.', 'src')
-    }
-    // extensions: ['.js', '.json', '.vue']
-  }
+  resolve: ckeditorResolve
 });
 
 export default ({ mode }) => {