Skip to content

V
Vue-Dashboard
Commit 7d94604c by User
Options

富文本编辑器集成

parent 24e0a776
Showing with 23 additions and 4 deletions
dist/index.html
<!doctype html> <!doctype html>
<html lang="zh-cmn-Hans"> <html lang="zh-cmn-Hans">
<head> <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" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.svg" /> <link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<title>VueDashboard</title> <title>VueDashboard</title>
<script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-CXO-yZSS.js"></script> <script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-HfdlqkRG.js"></script>
<link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-9k_B1ZU8.css"> <link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-DhhgO4aJ.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package.json
...@@ -55,6 +55,8 @@ ...@@ -55,6 +55,8 @@
"@sa/materials": "workspace:*", "@sa/materials": "workspace:*",
"@sa/utils": "workspace:*", "@sa/utils": "workspace:*",
"@vueuse/core": "10.11.0", "@vueuse/core": "10.11.0",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"clipboard": "2.0.11", "clipboard": "2.0.11",
"dayjs": "1.11.12", "dayjs": "1.11.12",
"echarts": "5.5.1", "echarts": "5.5.1",
...@@ -68,7 +70,8 @@ ...@@ -68,7 +70,8 @@
"vue-grid-layout": "3.0.0-beta1", "vue-grid-layout": "3.0.0-beta1",
"vue-i18n": "9.13.1", "vue-i18n": "9.13.1",
"vue-router": "4.4.1", "vue-router": "4.4.1",
"vue3-sfc-loader": "^0.9.5" "vue3-sfc-loader": "^0.9.5",
"wangeditor": "4.7.15"
}, },
"devDependencies": { "devDependencies": {
"@elegant-router/vue": "0.3.8", "@elegant-router/vue": "0.3.8",
......
src/main.ts
import { createApp } from 'vue'; 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 VueGridLayout from 'vue-grid-layout';
import './plugins/assets'; import './plugins/assets';
import { localStg } from '@/utils/storage'; import { localStg } from '@/utils/storage';
...@@ -65,6 +67,10 @@ async function setupApp() { ...@@ -65,6 +67,10 @@ async function setupApp() {
app.use(VueGridLayout); app.use(VueGridLayout);
// 全局注册 wangeditor 组件
app.component('WangEditor', Editor);
app.component('WangToolbar', Toolbar);
app.mount('#app'); app.mount('#app');
} }
......
src/views/_builtin/iframe-page/vueComponent.vue
...@@ -13,6 +13,7 @@ import { NConfigProvider, darkTheme } from 'naive-ui'; ...@@ -13,6 +13,7 @@ import { NConfigProvider, darkTheme } from 'naive-ui';
import * as naive from 'naive-ui'; import * as naive from 'naive-ui';
import axios from 'axios'; import axios from 'axios';
import * as echarts from 'echarts/core'; import * as echarts from 'echarts/core';
import WangEditor from 'wangeditor';
import { useThemeStore } from '@/store/modules/theme'; import { useThemeStore } from '@/store/modules/theme';
// 引入echarts相关 // 引入echarts相关
import { useEcharts } from '@/hooks/common/echarts'; import { useEcharts } from '@/hooks/common/echarts';
...@@ -47,6 +48,7 @@ declare global { ...@@ -47,6 +48,7 @@ declare global {
$echarts: typeof echarts; $echarts: typeof echarts;
$useEcharts: typeof useEcharts; $useEcharts: typeof useEcharts;
$themeStore: typeof themeStore; $themeStore: typeof themeStore;
$WangEditor: typeof WangEditor;
} }
} }
...@@ -57,6 +59,8 @@ declare global { ...@@ -57,6 +59,8 @@ declare global {
(window as any).$useEcharts = useEcharts; (window as any).$useEcharts = useEcharts;
// 全局注入主题存储 // 全局注入主题存储
(window as any).$themeStore = themeStore; (window as any).$themeStore = themeStore;
// 全局注入WangEditor
(window as any).$WangEditor = WangEditor;
// 清理函数 - 完全销毁Vue组件 // 清理函数 - 完全销毁Vue组件
function cleanup() { function cleanup() {
...@@ -69,6 +73,12 @@ function cleanup() { ...@@ -69,6 +73,12 @@ function cleanup() {
if (container) { if (container) {
container.innerHTML = ''; container.innerHTML = '';
} }
// 清理编辑器实例
const editor = (window as any).$WangEditor?.getInstance();
if (editor) {
editor.destroy();
}
} catch (e) { } catch (e) {
// console.error('清理Vue组件时出错:', e); // console.error('清理Vue组件时出错:', e);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment