富文本编辑器集成

7d94604c · User · 24e0a776 · 7d94604c · 7d94604c · 7d94604c
Commit 7d94604c authored Apr 14, 2025 by User
Showing with 23 additions and 4 deletions

index.html dist/index.html +3 -3

package.json package.json +4 -1

pnpm-lock.yaml pnpm-lock.yaml +0 -0

main.ts src/main.ts +6 -0

vueComponent.vue src/views/_builtin/iframe-page/vueComponent.vue +10 -0

No files found.
--- a/dist/index.html
+++ b/dist/index.html
 <!doctype html>
 <html lang="zh-cmn-Hans">
  <head>
-    <meta name="buildTime" content="2025-03-18 11:10:53">
+    <meta name="buildTime" content="2025-04-08 13:46:49">
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="light dark" />
    <title>VueDashboard</title>
-    <script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-CXO-yZSS.js"></script>
-    <link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-9k_B1ZU8.css">
+    <script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-HfdlqkRG.js"></script>
+    <link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-DhhgO4aJ.css">
  </head>
  <body>
    <div id="app"></div>

--- a/package.json
+++ b/package.json
@@ -55,6 +55,8 @@
    "@sa/materials": "workspace:*",
    "@sa/utils": "workspace:*",
    "@vueuse/core": "10.11.0",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
    "clipboard": "2.0.11",
    "dayjs": "1.11.12",
    "echarts": "5.5.1",
@@ -68,7 +70,8 @@
    "vue-grid-layout": "3.0.0-beta1",
    "vue-i18n": "9.13.1",
    "vue-router": "4.4.1",
-    "vue3-sfc-loader": "^0.9.5"
+    "vue3-sfc-loader": "^0.9.5",
+    "wangeditor": "4.7.15"
  },
  "devDependencies": {
    "@elegant-router/vue": "0.3.8",

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/main.ts
+++ b/src/main.ts
 import { createApp } from 'vue';
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+import '@wangeditor/editor/dist/css/style.css';
 import VueGridLayout from 'vue-grid-layout';
 import './plugins/assets';
 import { localStg } from '@/utils/storage';
@@ -65,6 +67,10 @@ async function setupApp() {

  app.use(VueGridLayout);

+  // 全局注册 wangeditor 组件
+  app.component('WangEditor', Editor);
+  app.component('WangToolbar', Toolbar);
+
  app.mount('#app');
 }


--- a/src/views/_builtin/iframe-page/vueComponent.vue
+++ b/src/views/_builtin/iframe-page/vueComponent.vue
@@ -13,6 +13,7 @@ import { NConfigProvider, darkTheme } from 'naive-ui';
 import * as naive from 'naive-ui';
 import axios from 'axios';
 import * as echarts from 'echarts/core';
+import WangEditor from 'wangeditor';
 import { useThemeStore } from '@/store/modules/theme';
 // 引入echarts相关
 import { useEcharts } from '@/hooks/common/echarts';
@@ -47,6 +48,7 @@ declare global {
    $echarts: typeof echarts;
    $useEcharts: typeof useEcharts;
    $themeStore: typeof themeStore;
+    $WangEditor: typeof WangEditor;
  }
 }

@@ -57,6 +59,8 @@ declare global {
 (window as any).$useEcharts = useEcharts;
 // 全局注入主题存储
 (window as any).$themeStore = themeStore;
+// 全局注入WangEditor
+(window as any).$WangEditor = WangEditor;

 // 清理函数 - 完全销毁Vue组件
 function cleanup() {
@@ -69,6 +73,12 @@ function cleanup() {
    if (container) {
      container.innerHTML = '';
    }
+
+    // 清理编辑器实例
+    const editor = (window as any).$WangEditor?.getInstance();
+    if (editor) {
+      editor.destroy();
+    }
  } catch (e) {
    // console.error('清理Vue组件时出错:', e);
  }