From 173038ff593e41724ac255fe1a77b9160ff8d39d Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Fri, 1 Sep 2023 23:12:29 +0800
Subject: [PATCH] branch: use wangEditor

---
 .vscode/settings.json                         |   7 -
 package.json                                  |   2 +
 pnpm-lock.yaml                                | 433 ++++++++++++++++++
 .../{top-bar => TopBar}/Hamburger.vue         |   0
 .../{top-bar => TopBar}/KUNGalgameTopBar.vue  |   0
 .../{top-bar => TopBar}/topBarItem.ts         |   0
 src/components/WangEditor.vue                 | 139 ++++++
 src/components/editor/KUNGalgameEditor.vue    |  17 -
 .../editor/KUNGalgameEditormenu.vue           |  11 -
 src/layout/KUNGalgameAPP.vue                  |   2 +-
 src/styles/editor/editor.scss                 |  54 +++
 src/views/edit/Edit.vue                       | 111 ++++-
 src/views/edit/components/Header.vue          |  91 ----
 .../topic/content/components/Content.vue      |  11 +-
 .../topic/content/components/ReplyPanel.vue   |   4 +-
 15 files changed, 740 insertions(+), 142 deletions(-)
 rename src/components/{top-bar => TopBar}/Hamburger.vue (100%)
 rename src/components/{top-bar => TopBar}/KUNGalgameTopBar.vue (100%)
 rename src/components/{top-bar => TopBar}/topBarItem.ts (100%)
 create mode 100644 src/components/WangEditor.vue
 delete mode 100644 src/components/editor/KUNGalgameEditor.vue
 delete mode 100644 src/components/editor/KUNGalgameEditormenu.vue
 create mode 100644 src/styles/editor/editor.scss
 delete mode 100644 src/views/edit/components/Header.vue

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 38b31692..d75cd8df 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,16 +6,13 @@
     "azkhx",
     "bangumi",
     "Bilibili",
-    "commonmark",
     "dompurify",
     "fontawesome",
     "galgame",
     "Galgame",
     "gsap",
-    "Hardbreak",
     "iconify",
     "INTLIFY",
-    "Keymap",
     "kungal",
     "kungalgame",
     "kungalgamer",
@@ -23,17 +20,13 @@
     "Licence",
     "loli",
     "majesticons",
-    "Milkdown",
     "mockjs",
     "moemoe",
     "moemoepoint",
     "non-moe",
-    "nord",
     "persistedstate",
     "Pinia",
-    "Prosemirror",
     "rdquo",
-    "Shiki",
     "shinnku",
     "signin",
     "sina",
diff --git a/package.json b/package.json
index 9f6cba5b..d1cb45a7 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "animate.css": "^4.1.1",
     "dayjs": "^1.11.9",
     "dompurify": "^3.0.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8ce74726..d6ba3f51 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,12 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@wangeditor/editor':
+    specifier: ^5.1.23
+    version: 5.1.23
+  '@wangeditor/editor-for-vue':
+    specifier: ^5.1.12
+    version: 5.1.12(@wangeditor/editor@5.1.23)(vue@3.3.4)
   animate.css:
     specifier: ^4.1.1
     version: 4.1.1
@@ -334,6 +340,13 @@ packages:
       '@babel/plugin-syntax-typescript': 7.22.5(@babel/core@7.22.10)
     dev: true
 
+  /@babel/runtime@7.22.6:
+    resolution: {integrity: sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      regenerator-runtime: 0.13.11
+    dev: false
+
   /@babel/template@7.22.5:
     resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
     engines: {node: '>=6.9.0'}
@@ -677,12 +690,20 @@ packages:
       fastq: 1.15.0
     dev: true
 
+  /@transloadit/prettier-bytes@0.0.7:
+    resolution: {integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==}
+    dev: false
+
   /@types/dompurify@3.0.2:
     resolution: {integrity: sha512-YBL4ziFebbbfQfH5mlC+QTJsvh0oJUrWbmxKMyEdL7emlHJqGR2Qb34TEFKj+VCayBvjKy3xczMFNhugThUsfQ==}
     dependencies:
       '@types/trusted-types': 2.0.3
     dev: true
 
+  /@types/event-emitter@0.3.3:
+    resolution: {integrity: sha512-UfnOK1pIxO7P+EgPRZXD9jMpimd8QEFcEZ5R67R1UhGbv4zghU5+NE7U8M8G9H5Jc8FI51rqDWQs6FtUfq2e/Q==}
+    dev: false
+
   /@types/mockjs@1.0.7:
     resolution: {integrity: sha512-OCxXz6hEaJOVpRwuJMiVY5a6LtJcih+br9gwB/Q8ooOBikvk5FpBQ31OlNimXo3EqKha1Z7PFBni+q9m+8NCWg==}
     dev: true
@@ -695,6 +716,47 @@ packages:
     resolution: {integrity: sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==}
     dev: true
 
+  /@uppy/companion-client@2.2.2:
+    resolution: {integrity: sha512-5mTp2iq97/mYSisMaBtFRry6PTgZA6SIL7LePteOV5x0/DxKfrZW3DEiQERJmYpHzy7k8johpm2gHnEKto56Og==}
+    dependencies:
+      '@uppy/utils': 4.1.3
+      namespace-emitter: 2.0.1
+    dev: false
+
+  /@uppy/core@2.3.4:
+    resolution: {integrity: sha512-iWAqppC8FD8mMVqewavCz+TNaet6HPXitmGXpGGREGrakZ4FeuWytVdrelydzTdXx6vVKkOmI2FLztGg73sENQ==}
+    dependencies:
+      '@transloadit/prettier-bytes': 0.0.7
+      '@uppy/store-default': 2.1.1
+      '@uppy/utils': 4.1.3
+      lodash.throttle: 4.1.1
+      mime-match: 1.0.2
+      namespace-emitter: 2.0.1
+      nanoid: 3.3.6
+      preact: 10.16.0
+    dev: false
+
+  /@uppy/store-default@2.1.1:
+    resolution: {integrity: sha512-xnpTxvot2SeAwGwbvmJ899ASk5tYXhmZzD/aCFsXePh/v8rNvR2pKlcQUH7cF/y4baUGq3FHO/daKCok/mpKqQ==}
+    dev: false
+
+  /@uppy/utils@4.1.3:
+    resolution: {integrity: sha512-nTuMvwWYobnJcytDO3t+D6IkVq/Qs4Xv3vyoEZ+Iaf8gegZP+rEyoaFT2CK5XLRMienPyqRqNbIfRuFaOWSIFw==}
+    dependencies:
+      lodash.throttle: 4.1.1
+    dev: false
+
+  /@uppy/xhr-upload@2.1.3(@uppy/core@2.3.4):
+    resolution: {integrity: sha512-YWOQ6myBVPs+mhNjfdWsQyMRWUlrDLMoaG7nvf/G6Y3GKZf8AyjFDjvvJ49XWQ+DaZOftGkHmF1uh/DBeGivJQ==}
+    peerDependencies:
+      '@uppy/core': ^2.3.3
+    dependencies:
+      '@uppy/companion-client': 2.2.2
+      '@uppy/core': 2.3.4
+      '@uppy/utils': 4.1.3
+      nanoid: 3.3.6
+    dev: false
+
   /@vitejs/plugin-vue-jsx@3.0.2(vite@4.4.8)(vue@3.3.4):
     resolution: {integrity: sha512-obF26P2Z4Ogy3cPp07B4VaW6rpiu0ue4OT2Y15UxT5BZZ76haUY9guOsZV3uWh/I6xc+VeiW+ZVabRE82FyzWw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -868,6 +930,192 @@ packages:
       - typescript
     dev: true
 
+  /@wangeditor/basic-modules@1.1.7(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1):
+    resolution: {integrity: sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==}
+    peerDependencies:
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      lodash.throttle: ^4.1.1
+      nanoid: ^3.2.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+    dependencies:
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      dom7: 3.0.0
+      is-url: 1.2.4
+      lodash.throttle: 4.1.1
+      nanoid: 3.3.6
+      slate: 0.72.8
+      snabbdom: 3.5.1
+    dev: false
+
+  /@wangeditor/code-highlight@1.0.3(@wangeditor/core@1.1.19)(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.5.1):
+    resolution: {integrity: sha512-iazHwO14XpCuIWJNTQTikqUhGKyqj+dUNWJ9288Oym9M2xMVHvnsOmDU2sgUDWVy+pOLojReMPgXCsvvNlOOhw==}
+    peerDependencies:
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+    dependencies:
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      dom7: 3.0.0
+      prismjs: 1.29.0
+      slate: 0.72.8
+      snabbdom: 3.5.1
+    dev: false
+
+  /@wangeditor/core@1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1):
+    resolution: {integrity: sha512-KevkB47+7GhVszyYF2pKGKtCSj/YzmClsD03C3zTt+9SR2XWT5T0e3yQqg8baZpcMvkjs1D8Dv4fk8ok/UaS2Q==}
+    peerDependencies:
+      '@uppy/core': ^2.1.1
+      '@uppy/xhr-upload': ^2.0.3
+      dom7: ^3.0.0
+      is-hotkey: ^0.2.0
+      lodash.camelcase: ^4.3.0
+      lodash.clonedeep: ^4.5.0
+      lodash.debounce: ^4.0.8
+      lodash.foreach: ^4.5.0
+      lodash.isequal: ^4.5.0
+      lodash.throttle: ^4.1.1
+      lodash.toarray: ^4.4.0
+      nanoid: ^3.2.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+    dependencies:
+      '@types/event-emitter': 0.3.3
+      '@uppy/core': 2.3.4
+      '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
+      dom7: 3.0.0
+      event-emitter: 0.3.5
+      html-void-elements: 2.0.1
+      i18next: 20.6.1
+      is-hotkey: 0.2.0
+      lodash.camelcase: 4.3.0
+      lodash.clonedeep: 4.5.0
+      lodash.debounce: 4.0.8
+      lodash.foreach: 4.5.0
+      lodash.isequal: 4.5.0
+      lodash.throttle: 4.1.1
+      lodash.toarray: 4.4.0
+      nanoid: 3.3.6
+      scroll-into-view-if-needed: 2.2.31
+      slate: 0.72.8
+      slate-history: 0.66.0(slate@0.72.8)
+      snabbdom: 3.5.1
+    dev: false
+
+  /@wangeditor/editor-for-vue@5.1.12(@wangeditor/editor@5.1.23)(vue@3.3.4):
+    resolution: {integrity: sha512-0Ds3D8I+xnpNWezAeO7HmPRgTfUxHLMd9JKcIw+QzvSmhC5xUHbpCcLU+KLmeBKTR/zffnS5GQo6qi3GhTMJWQ==}
+    peerDependencies:
+      '@wangeditor/editor': '>=5.1.0'
+      vue: ^3.0.5
+    dependencies:
+      '@wangeditor/editor': 5.1.23
+      vue: 3.3.4
+    dev: false
+
+  /@wangeditor/editor@5.1.23:
+    resolution: {integrity: sha512-0RxfeVTuK1tktUaPROnCoFfaHVJpRAIE2zdS0mpP+vq1axVQpLjM8+fCvKzqYIkH0Pg+C+44hJpe3VVroSkEuQ==}
+    dependencies:
+      '@uppy/core': 2.3.4
+      '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
+      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      '@wangeditor/code-highlight': 1.0.3(@wangeditor/core@1.1.19)(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.5.1)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      '@wangeditor/list-module': 1.0.5(@wangeditor/core@1.1.19)(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.5.1)
+      '@wangeditor/table-module': 1.1.4(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      '@wangeditor/upload-image-module': 1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(@wangeditor/basic-modules@1.1.7)(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.5.1)
+      '@wangeditor/video-module': 1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(@wangeditor/core@1.1.19)(dom7@3.0.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      dom7: 3.0.0
+      is-hotkey: 0.2.0
+      lodash.camelcase: 4.3.0
+      lodash.clonedeep: 4.5.0
+      lodash.debounce: 4.0.8
+      lodash.foreach: 4.5.0
+      lodash.isequal: 4.5.0
+      lodash.throttle: 4.1.1
+      lodash.toarray: 4.4.0
+      nanoid: 3.3.6
+      slate: 0.72.8
+      snabbdom: 3.5.1
+    dev: false
+
+  /@wangeditor/list-module@1.0.5(@wangeditor/core@1.1.19)(dom7@3.0.0)(slate@0.72.8)(snabbdom@3.5.1):
+    resolution: {integrity: sha512-uDuYTP6DVhcYf7mF1pTlmNn5jOb4QtcVhYwSSAkyg09zqxI1qBqsfUnveeDeDqIuptSJhkh81cyxi+MF8sEPOQ==}
+    peerDependencies:
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+    dependencies:
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      dom7: 3.0.0
+      slate: 0.72.8
+      snabbdom: 3.5.1
+    dev: false
+
+  /@wangeditor/table-module@1.1.4(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1):
+    resolution: {integrity: sha512-5saanU9xuEocxaemGdNi9t8MCDSucnykEC6jtuiT72kt+/Hhh4nERYx1J20OPsTCCdVr7hIyQenFD1iSRkIQ6w==}
+    peerDependencies:
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      lodash.isequal: ^4.5.0
+      lodash.throttle: ^4.1.1
+      nanoid: ^3.2.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+    dependencies:
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      dom7: 3.0.0
+      lodash.isequal: 4.5.0
+      lodash.throttle: 4.1.1
+      nanoid: 3.3.6
+      slate: 0.72.8
+      snabbdom: 3.5.1
+    dev: false
+
+  /@wangeditor/upload-image-module@1.0.2(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(@wangeditor/basic-modules@1.1.7)(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.foreach@4.5.0)(slate@0.72.8)(snabbdom@3.5.1):
+    resolution: {integrity: sha512-z81lk/v71OwPDYeQDxj6cVr81aDP90aFuywb8nPD6eQeECtOymrqRODjpO6VGvCVxVck8nUxBHtbxKtjgcwyiA==}
+    peerDependencies:
+      '@uppy/core': ^2.0.3
+      '@uppy/xhr-upload': ^2.0.3
+      '@wangeditor/basic-modules': 1.x
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      lodash.foreach: ^4.5.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+    dependencies:
+      '@uppy/core': 2.3.4
+      '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
+      '@wangeditor/basic-modules': 1.1.7(@wangeditor/core@1.1.19)(dom7@3.0.0)(lodash.throttle@4.1.1)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      dom7: 3.0.0
+      lodash.foreach: 4.5.0
+      slate: 0.72.8
+      snabbdom: 3.5.1
+    dev: false
+
+  /@wangeditor/video-module@1.1.4(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(@wangeditor/core@1.1.19)(dom7@3.0.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1):
+    resolution: {integrity: sha512-ZdodDPqKQrgx3IwWu4ZiQmXI8EXZ3hm2/fM6E3t5dB8tCaIGWQZhmqd6P5knfkRAd3z2+YRSRbxOGfoRSp/rLg==}
+    peerDependencies:
+      '@uppy/core': ^2.1.4
+      '@uppy/xhr-upload': ^2.0.7
+      '@wangeditor/core': 1.x
+      dom7: ^3.0.0
+      nanoid: ^3.2.0
+      slate: ^0.72.0
+      snabbdom: ^3.1.0
+    dependencies:
+      '@uppy/core': 2.3.4
+      '@uppy/xhr-upload': 2.1.3(@uppy/core@2.3.4)
+      '@wangeditor/core': 1.1.19(@uppy/core@2.3.4)(@uppy/xhr-upload@2.1.3)(dom7@3.0.0)(is-hotkey@0.2.0)(lodash.camelcase@4.3.0)(lodash.clonedeep@4.5.0)(lodash.debounce@4.0.8)(lodash.foreach@4.5.0)(lodash.isequal@4.5.0)(lodash.throttle@4.1.1)(lodash.toarray@4.4.0)(nanoid@3.3.6)(slate@0.72.8)(snabbdom@3.5.1)
+      dom7: 3.0.0
+      nanoid: 3.3.6
+      slate: 0.72.8
+      snabbdom: 3.5.1
+    dev: false
+
   /animate.css@4.1.1:
     resolution: {integrity: sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==}
     dev: false
@@ -1010,6 +1258,10 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
+  /compute-scroll-into-view@1.0.20:
+    resolution: {integrity: sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg==}
+    dev: false
+
   /connect@3.7.0:
     resolution: {integrity: sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ==}
     engines: {node: '>= 0.10.0'}
@@ -1046,6 +1298,13 @@ packages:
   /csstype@3.1.2:
     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 
+  /d@1.0.1:
+    resolution: {integrity: sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==}
+    dependencies:
+      es5-ext: 0.10.62
+      type: 1.2.0
+    dev: false
+
   /dayjs@1.11.9:
     resolution: {integrity: sha512-QvzAURSbQ0pKdIye2txOzNaHmxtUBXerpY0FJsFXUMKbIZeFm5ht1LS/jFsrncjnmtv8HsG0W2g6c0zUjZWmpA==}
     dev: false
@@ -1082,6 +1341,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /dom7@3.0.0:
+    resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==}
+    dependencies:
+      ssr-window: 3.0.0
+    dev: false
+
   /dompurify@3.0.5:
     resolution: {integrity: sha512-F9e6wPGtY+8KNMRAVfxeCOHU0/NPWMSENNq4pQctuXRqqdEPW7q3CrLbR5Nse044WwacyjHGOMlvNsBe1y6z9A==}
     dev: false
@@ -1103,6 +1368,31 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /es5-ext@0.10.62:
+    resolution: {integrity: sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==}
+    engines: {node: '>=0.10'}
+    requiresBuild: true
+    dependencies:
+      es6-iterator: 2.0.3
+      es6-symbol: 3.1.3
+      next-tick: 1.1.0
+    dev: false
+
+  /es6-iterator@2.0.3:
+    resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+      es6-symbol: 3.1.3
+    dev: false
+
+  /es6-symbol@3.1.3:
+    resolution: {integrity: sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==}
+    dependencies:
+      d: 1.0.1
+      ext: 1.7.0
+    dev: false
+
   /esbuild@0.18.19:
     resolution: {integrity: sha512-ra3CaIKCzJp5bU5BDfrCc0FRqKj71fQi+gbld0aj6lN0ifuX2fWJYPgLVLGwPfA+ruKna+OWwOvf/yHj6n+i0g==}
     engines: {node: '>=12'}
@@ -1150,6 +1440,19 @@ packages:
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
+  /event-emitter@0.3.5:
+    resolution: {integrity: sha512-D9rRn9y7kLPnJ+hMq7S/nhvoKwwvVJahBi2BPmx3bvbsEdK3W9ii8cBSGjP+72/LnM4n6fo3+dkCX5FeTQruXA==}
+    dependencies:
+      d: 1.0.1
+      es5-ext: 0.10.62
+    dev: false
+
+  /ext@1.7.0:
+    resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
+    dependencies:
+      type: 2.7.2
+    dev: false
+
   /fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -1234,6 +1537,20 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /html-void-elements@2.0.1:
+    resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
+    dev: false
+
+  /i18next@20.6.1:
+    resolution: {integrity: sha512-yCMYTMEJ9ihCwEQQ3phLo7I/Pwycf8uAx+sRHwwk5U9Aui/IZYgQRyMqXafQOw5QQ7DM1Z+WyEXWIqSuJHhG2A==}
+    dependencies:
+      '@babel/runtime': 7.22.6
+    dev: false
+
+  /immer@9.0.21:
+    resolution: {integrity: sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==}
+    dev: false
+
   /immutable@4.3.2:
     resolution: {integrity: sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==}
     dev: true
@@ -1268,11 +1585,24 @@ packages:
       is-extglob: 2.1.1
     dev: true
 
+  /is-hotkey@0.2.0:
+    resolution: {integrity: sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==}
+    dev: false
+
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
     dev: true
 
+  /is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /is-url@1.2.4:
+    resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
+    dev: false
+
   /is-wsl@2.2.0:
     resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
     engines: {node: '>=8'}
@@ -1305,6 +1635,34 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dev: true
 
+  /lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    dev: false
+
+  /lodash.clonedeep@4.5.0:
+    resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==}
+    dev: false
+
+  /lodash.debounce@4.0.8:
+    resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
+    dev: false
+
+  /lodash.foreach@4.5.0:
+    resolution: {integrity: sha512-aEXTF4d+m05rVOAUG3z4vZZ4xVexLKZGF0lIxuHZ1Hplpk/3B6Z1+/ICICYRLm7c41Z2xiejbkCkJoTlypoXhQ==}
+    dev: false
+
+  /lodash.isequal@4.5.0:
+    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
+    dev: false
+
+  /lodash.throttle@4.1.1:
+    resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
+    dev: false
+
+  /lodash.toarray@4.4.0:
+    resolution: {integrity: sha512-QyffEA3i5dma5q2490+SgCvDN0pXLmRGSyAANuVi0HQ01Pkfr9fuoKQW8wm1wGBnJITs/mS7wQvS6VshUEBFCw==}
+    dev: false
+
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
@@ -1337,6 +1695,12 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /mime-match@1.0.2:
+    resolution: {integrity: sha512-VXp/ugGDVh3eCLOBCiHZMYWQaTNUHv2IJrut+yXA6+JbLPXHglHwfS/5A5L0ll+jkCY7fIzRJcH6OIunF+c6Cg==}
+    dependencies:
+      wildcard: 1.1.2
+    dev: false
+
   /minimatch@9.0.3:
     resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1363,11 +1727,19 @@ packages:
     resolution: {integrity: sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==}
     dev: true
 
+  /namespace-emitter@2.0.1:
+    resolution: {integrity: sha512-N/sMKHniSDJBjfrkbS/tpkPj4RAbvW3mr8UAzvlMHyun93XEm83IAvhWtJVHo+RHn/oO8Job5YN4b+wRjSVp5g==}
+    dev: false
+
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  /next-tick@1.1.0:
+    resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
+    dev: false
+
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
     dev: true
@@ -1449,6 +1821,15 @@ packages:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
+  /preact@10.16.0:
+    resolution: {integrity: sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==}
+    dev: false
+
+  /prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -1460,6 +1841,10 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /regenerator-runtime@0.13.11:
+    resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
+    dev: false
+
   /require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -1510,6 +1895,12 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /scroll-into-view-if-needed@2.2.31:
+    resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
+    dependencies:
+      compute-scroll-into-view: 1.0.20
+    dev: false
+
   /semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -1535,6 +1926,28 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /slate-history@0.66.0(slate@0.72.8):
+    resolution: {integrity: sha512-6MWpxGQZiMvSINlCbMW43E2YBSVMCMCIwQfBzGssjWw4kb0qfvj0pIdblWNRQZD0hR6WHP+dHHgGSeVdMWzfng==}
+    peerDependencies:
+      slate: '>=0.65.3'
+    dependencies:
+      is-plain-object: 5.0.0
+      slate: 0.72.8
+    dev: false
+
+  /slate@0.72.8:
+    resolution: {integrity: sha512-/nJwTswQgnRurpK+bGJFH1oM7naD5qDmHd89JyiKNT2oOKD8marW0QSBtuFnwEbL5aGCS8AmrhXQgNOsn4osAw==}
+    dependencies:
+      immer: 9.0.21
+      is-plain-object: 5.0.0
+      tiny-warning: 1.0.3
+    dev: false
+
+  /snabbdom@3.5.1:
+    resolution: {integrity: sha512-wHMNIOjkm/YNE5EM3RCbr/+DVgPg6AqQAX1eOxO46zYNvCXjKP5Y865tqQj3EXnaMBjkxmQA5jFuDpDK/dbfiA==}
+    engines: {node: '>=8.3.0'}
+    dev: false
+
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -1549,6 +1962,10 @@ packages:
     engines: {node: '>= 8'}
     dev: true
 
+  /ssr-window@3.0.0:
+    resolution: {integrity: sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA==}
+    dev: false
+
   /statuses@1.5.0:
     resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
     engines: {node: '>= 0.6'}
@@ -1581,6 +1998,10 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: true
 
+  /tiny-warning@1.0.3:
+    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
+    dev: false
+
   /to-fast-properties@2.0.0:
     resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
     engines: {node: '>=4'}
@@ -1592,6 +2013,14 @@ packages:
       is-number: 7.0.0
     dev: true
 
+  /type@1.2.0:
+    resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==}
+    dev: false
+
+  /type@2.7.2:
+    resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
+    dev: false
+
   /typescript@5.1.6:
     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
     engines: {node: '>=14.17'}
@@ -1750,6 +2179,10 @@ packages:
       isexe: 2.0.0
     dev: true
 
+  /wildcard@1.1.2:
+    resolution: {integrity: sha512-DXukZJxpHA8LuotRwL0pP1+rS6CS7FF2qStDDE1C7DDg2rLud2PXRMuEDYIPhgEezwnlHNL4c+N6MfMTjCGTng==}
+    dev: false
+
   /wrap-ansi@7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
     engines: {node: '>=10'}
diff --git a/src/components/top-bar/Hamburger.vue b/src/components/TopBar/Hamburger.vue
similarity index 100%
rename from src/components/top-bar/Hamburger.vue
rename to src/components/TopBar/Hamburger.vue
diff --git a/src/components/top-bar/KUNGalgameTopBar.vue b/src/components/TopBar/KUNGalgameTopBar.vue
similarity index 100%
rename from src/components/top-bar/KUNGalgameTopBar.vue
rename to src/components/TopBar/KUNGalgameTopBar.vue
diff --git a/src/components/top-bar/topBarItem.ts b/src/components/TopBar/topBarItem.ts
similarity index 100%
rename from src/components/top-bar/topBarItem.ts
rename to src/components/TopBar/topBarItem.ts
diff --git a/src/components/WangEditor.vue b/src/components/WangEditor.vue
new file mode 100644
index 00000000..eb3e897a
--- /dev/null
+++ b/src/components/WangEditor.vue
@@ -0,0 +1,139 @@
+<!-- 
+    编辑器实例共用组件
+ -->
+<script setup lang="ts">
+import '@wangeditor/editor/dist/css/style.css'
+import '@/styles/editor/editor.scss'
+import { IDomEditor } from '@wangeditor/editor'
+import { onBeforeMount, onBeforeUnmount, ref, shallowRef } from 'vue'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+// 导入编辑帖子的 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
+import { storeToRefs } from 'pinia'
+// 导入过滤 xss 的工具
+import DOMPurify from 'dompurify'
+// 导入防抖函数
+import { debounce } from '@/utils/debounce'
+
+const topicData = storeToRefs(useKUNGalgameEditStore())
+
+// 定义父组件传参
+const props = defineProps(['height', 'isShowToolbar', 'isShowAdvance'])
+
+// 自定义编辑区域高度
+const editorHeight = `height: ${props.height}px`
+
+// 创建编辑器，必须用 shallowRef
+const editorRef = shallowRef<IDomEditor | undefined>(undefined)
+
+// 编辑器内的内容
+const valueHtml = ref('')
+// 编辑器文字计数
+const textCount = ref(0)
+
+// 编辑器相关配置
+const editorConfig = {
+  placeholder: 'Moe Moe Moe!',
+  readOnly: false,
+  MENU_CONF: {
+    uploadImage: {
+      server: 'http://127.0.0.1:10008/upload/img',
+
+      timeout: 5 * 1000, // 5s
+
+      fieldName: 'custom-fileName',
+      meta: { token: 'xxx', a: 100 },
+      metaWithUrl: true, // join params to url
+      headers: { Accept: 'text/x-json' },
+
+      maxFileSize: 10 * 1024 * 1024, // 10M
+
+      base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
+    },
+  },
+}
+
+const handleCreated = (editor: IDomEditor) => {}
+
+// 挂载之前载入数据，如果不保存，则不载入
+onBeforeMount(() => {
+  if (topicData.isSave.value) {
+    valueHtml.value = topicData.content.value
+  }
+})
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+// 编辑器文本改变时自动保存数据
+const handleChange = (editor: IDomEditor) => {
+  editorRef.value = editor
+  // 创建一个防抖处理函数
+  const debouncedUpdateContent = debounce(() => {
+    // 过滤 xss
+    topicData.content.value = DOMPurify.sanitize(editor.getHtml())
+  }, 1007)
+
+  // 调用防抖处理函数，会在延迟时间内只执行一次更新操作
+  debouncedUpdateContent()
+  // 计算用户输入了多少个字符
+  textCount.value = editor.getText().trim().length
+}
+</script>
+
+<template>
+  <!-- 编辑器 -->
+  <div class="editor—wrapper">
+    <!-- 这里不能用 v-if，否则加载不出来 toolBar -->
+    <Toolbar
+      class="toolbar-container"
+      :editor="editorRef"
+      :mode="$props.isShowAdvance ? 'default' : 'simple'"
+      v-show="props.isShowToolbar"
+    />
+    <Editor
+      :style="editorHeight"
+      v-model="valueHtml"
+      :defaultConfig="editorConfig"
+      @onCreated="handleCreated"
+      @onChange="handleChange"
+    />
+    <span class="count">{{ textCount + ` ${$tm('edit.word')}` }}</span>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 编辑器的样式 */
+.editor—wrapper {
+  /* 编辑器的 border */
+  border: 1px solid var(--kungalgame-blue-4);
+  box-sizing: border-box;
+  /* 编辑器的宽度 */
+  width: 100%;
+  margin: 0 auto;
+  z-index: 1008; /* 按需定义 */
+}
+.toolbar-container {
+  border-bottom: 1px solid var(--kungalgame-blue-4);
+}
+
+.count {
+  padding: 3px 7px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: end;
+  color: var(--kungalgame-font-color-0);
+  background-color: var(--kungalgame-white);
+}
+
+@media (max-width: 700px) {
+  .toolbar-container {
+    display: none;
+  }
+}
+</style>
diff --git a/src/components/editor/KUNGalgameEditor.vue b/src/components/editor/KUNGalgameEditor.vue
deleted file mode 100644
index a05cff6d..00000000
--- a/src/components/editor/KUNGalgameEditor.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import KUNGalgameEditorMenu from './KUNGalgameEditorMenu.vue'
-</script>
-
-<template>
-  <div class="editor-container">
-    <KUNGalgameEditorMenu />
-    <div class="editor"></div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.editor-container {
-  min-height: 300px;
-  padding: 10px;
-}
-</style>
diff --git a/src/components/editor/KUNGalgameEditormenu.vue b/src/components/editor/KUNGalgameEditormenu.vue
deleted file mode 100644
index c5a2000a..00000000
--- a/src/components/editor/KUNGalgameEditormenu.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-<script setup lang='ts'>
-
-</script>
-
-<template>
-
-</template>
-
-<style lang='scss' scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/layout/KUNGalgameAPP.vue b/src/layout/KUNGalgameAPP.vue
index 8ff61691..24cfc101 100644
--- a/src/layout/KUNGalgameAPP.vue
+++ b/src/layout/KUNGalgameAPP.vue
@@ -5,7 +5,7 @@ import 'animate.css'
 
 import { currBackground } from '@/hooks/useBackgroundPicture'
 
-import KUNGalgameTopBar from '@/components/top-bar/KUNGalgameTopBar.vue'
+import KUNGalgameTopBar from '@/components/TopBar/KUNGalgameTopBar.vue'
 </script>
 
 <template>
diff --git a/src/styles/editor/editor.scss b/src/styles/editor/editor.scss
new file mode 100644
index 00000000..b78ce46c
--- /dev/null
+++ b/src/styles/editor/editor.scss
@@ -0,0 +1,54 @@
+/* wangEditor5 使用了 Shadow DOM，不能直接修改颜色，在全局覆盖 */
+
+.w-e-scroll {
+  &::-webkit-scrollbar {
+    display: inline;
+    width: 6px;
+    height: 0;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--kungalgame-blue-4);
+    border-radius: 3px;
+  }
+}
+
+/* 删除线，不然会不显示 */
+s {
+  text-decoration: line-through;
+}
+
+/* 下划线，不然会不显示 */
+u {
+  text-decoration: underline;
+}
+
+/* 设置为 none，不然黑夜模式代码块会花屏 */
+* {
+  text-shadow: none;
+}
+
+:root {
+  /* textarea - css vars */
+  --w-e-textarea-bg-color: var(--kungalgame-white);
+  --w-e-textarea-color: var(--kungalgame-font-color-3);
+  --w-e-textarea-border-color: var(--kungalgame-blue-1);
+  --w-e-textarea-slight-border-color: var(--kungalgame-blue-4);
+  --w-e-textarea-slight-color: var(--kungalgame-font-color-0);
+  --w-e-textarea-slight-bg-color: var(--kungalgame-white);
+  --w-e-textarea-selected-border-color: var(--kungalgame-blue-1);
+  /* 选中的元素，如选中了分割线 */
+  --w-e-textarea-handler-bg-color: var(--kungalgame-blue-4);
+  /* 工具，如图片拖拽按钮 */
+
+  /* toolbar - css vars */
+  --w-e-toolbar-color: var(--kungalgame-font-color-1);
+  --w-e-toolbar-bg-color: var(--kungalgame-white);
+  --w-e-toolbar-active-color: var(--kungalgame-font-color-3);
+  --w-e-toolbar-active-bg-color: var(--kungalgame-white);
+  --w-e-toolbar-disabled-color: var(--kungalgame-red-4);
+  --w-e-toolbar-border-color: var(--kungalgame-blue-4);
+
+  /* modal - css vars */
+  --w-e-modal-button-bg-color: var(--kungalgame-white);
+  --w-e-modal-button-border-color: var(--kungalgame-blue-4);
+}
diff --git a/src/views/edit/Edit.vue b/src/views/edit/Edit.vue
index a89a4344..6e939518 100644
--- a/src/views/edit/Edit.vue
+++ b/src/views/edit/Edit.vue
@@ -1,9 +1,51 @@
 <script setup lang="ts">
-import KUNGalgameEditor from '@/components/editor/KUNGalgameEditor.vue'
+import { onBeforeMount, ref } from 'vue'
+import WangEditor from '@/components/WangEditor.vue'
 import Tags from './components/Tags.vue'
 import Footer from './components/Footer.vue'
-import Header from './components/Header.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
+
+// 导入编辑帖子的 store
+import { useKUNGalgameEditStore } from '@/store/modules/edit'
+import { storeToRefs } from 'pinia'
+
+// 导入防抖函数
+import { debounce } from '@/utils/debounce'
+
+const topicData = storeToRefs(useKUNGalgameEditStore())
+
+// 话题标题的文字
+const topicTitle = ref('')
+// 标题的最大长度
+const maxInputLength = 40
+
+onBeforeMount(() => {
+  if (topicData.isSave.value) {
+    topicTitle.value = topicData.title.value
+  }
+})
+
+// 处理用户输入
+const handelInput = () => {
+  // 标题不能超过 40 字
+  if (topicTitle.value.length > maxInputLength) {
+    topicTitle.value = topicTitle.value.slice(0, maxInputLength)
+  }
+
+  // 用户输入了纯空格
+  if (topicTitle.value.trim() === '') {
+    return
+  }
+
+  // 创建一个防抖处理函数
+  const debouncedInput = debounce(() => {
+    // 过滤 xss
+    topicData.title.value = topicTitle.value
+  }, 300)
+
+  // 调用防抖处理函数，会在延迟时间内只执行一次更新操作
+  debouncedInput()
+}
 </script>
 
 <template>
@@ -12,26 +54,48 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
     <div class="container">
       <!-- 内容区容器 -->
       <div class="content">
-        <!-- 标题 -->
-        <Header />
+        <!-- 内容区的头部 -->
+        <div class="header">
+          <!-- 话题的标题 -->
+          <div class="title">
+            <input
+              type="text"
+              placeholder="请输入话题的标题（40字以内）"
+              v-model="topicTitle"
+              @input="handelInput"
+              :maxlength="maxInputLength"
+            />
+          </div>
+        </div>
         <!-- 编辑器 -->
-        <KUNGalgameEditor />
+        <WangEditor
+          class="editor"
+          :height="400"
+          :isShowToolbar="true"
+          :isShowAdvance="true"
+        />
       </div>
 
       <!-- 内容区的底部 -->
       <div class="content-footer">
-        <!-- 话题的 Tag -->
         <Tags />
-        <!-- 话题的 Footer -->
+
         <Footer />
       </div>
     </div>
     <!-- 版权 -->
     <KUNGalgameFooter style="margin: 0 auto" />
+    <span style="margin: 0 auto; color: var(--kungalgame-font-color-3)"
+      >Editor powered by wangEditor</span
+    >
   </div>
 </template>
 
 <style lang="scss" scoped>
+.content {
+  margin: 0 auto;
+}
+
 .root {
   height: 100vh;
   min-height: 1200px;
@@ -51,12 +115,39 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   color: var(--kungalgame-font-color-3);
   border: 1px solid var(--kungalgame-blue-1);
   padding: 10px;
-  backdrop-filter: blur(5px);
 }
 
-.content {
-  margin: 0 auto;
+/* 容器的顶部 */
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 话题的发布标题 */
+.title {
+  width: 100%;
+}
+
+/* 话题标题的输入框 */
+.title input {
+  color: var(--kungalgame-font-color-2);
+  /* 距离外轮廓的距离 */
+  padding: 7px;
+  /* 内边距盒子 */
+  box-sizing: border-box;
+  width: 100%;
+  /* 标题输入字体大小 */
+  font-size: 40px;
   border: 1px solid var(--kungalgame-blue-4);
+  background-color: var(--kungalgame-white);
+  margin-bottom: 10px;
+}
+
+/* 标题输入框 focus 之后的样式 */
+.title input:focus {
+  box-shadow: 0px 0px 5px var(--kungalgame-blue-4);
 }
 
 .content-footer {
diff --git a/src/views/edit/components/Header.vue b/src/views/edit/components/Header.vue
deleted file mode 100644
index 94d0991f..00000000
--- a/src/views/edit/components/Header.vue
+++ /dev/null
@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { onBeforeMount, ref } from 'vue'
-// 导入编辑帖子的 store
-import { useKUNGalgameEditStore } from '@/store/modules/edit'
-import { storeToRefs } from 'pinia'
-
-// 导入防抖函数
-import { debounce } from '@/utils/debounce'
-
-const topicData = storeToRefs(useKUNGalgameEditStore())
-
-// 话题标题的文字
-const topicTitle = ref('')
-// 标题的最大长度
-const maxInputLength = 40
-
-onBeforeMount(() => {
-  if (topicData.isSave.value) {
-    topicTitle.value = topicData.title.value
-  }
-})
-
-// 处理用户输入
-const handelInput = () => {
-  // 标题不能超过 40 字
-  if (topicTitle.value.length > maxInputLength) {
-    topicTitle.value = topicTitle.value.slice(0, maxInputLength)
-  }
-
-  // 用户输入了纯空格
-  if (topicTitle.value.trim() === '') {
-    return
-  }
-
-  // 创建一个防抖处理函数
-  const debouncedInput = debounce(() => {
-    // 过滤 xss
-    topicData.title.value = topicTitle.value
-  }, 300)
-
-  // 调用防抖处理函数，会在延迟时间内只执行一次更新操作
-  debouncedInput()
-}
-</script>
-
-<template>
-  <!-- 内容区的头部 -->
-  <div class="header">
-    <!-- 话题的标题 -->
-    <div class="title">
-      <input
-        type="text"
-        placeholder="请输入标题（40字以内）"
-        v-model="topicTitle"
-        @input="handelInput"
-        :maxlength="maxInputLength"
-      />
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-/* 容器的顶部 */
-.header {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 10px;
-}
-
-/* 话题的发布标题 */
-.title {
-  width: 100%;
-  border-bottom: 5px solid var(--kungalgame-red-4);
-}
-
-/* 话题标题的输入框 */
-.title input {
-  color: var(--kungalgame-font-color-2);
-  /* 距离外轮廓的距离 */
-  padding: 7px;
-  /* 内边距盒子 */
-  box-sizing: border-box;
-  width: 100%;
-  /* 标题输入字体大小 */
-  font-size: 40px;
-  border: none;
-  background-color: var(--kungalgame-trans-white-9);
-}
-</style>
diff --git a/src/views/topic/content/components/Content.vue b/src/views/topic/content/components/Content.vue
index 92d29fe0..33a11512 100644
--- a/src/views/topic/content/components/Content.vue
+++ b/src/views/topic/content/components/Content.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 
+import '@wangeditor/editor/dist/css/style.css'
+import '@/styles/editor/editor.scss'
+
 const width = ref('')
 
 defineProps<{
@@ -17,12 +20,14 @@ onMounted(() => {
 <template>
   <!-- 内容区右侧的话题展示区，这里富文本必须用 v-html，已经确定文本经过三次处理 -->
   <!-- 这里用的 v-html，样式是页面刷新后才会有的，所以必须动态绑定样式 -->
-  <div class="text" v-html="content"></div>
+  <div class="w-e-text-container">
+    <div v-html="content" data-slate-editor></div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 /* 内容区右侧的话题展示区 */
-.text {
+.w-e-text-container {
   width: 82%;
   font-size: 15px;
   padding: 17px;
@@ -35,7 +40,7 @@ onMounted(() => {
 }
 
 @media (max-width: 700px) {
-  .text {
+  .w-e-text-container {
     width: 100%;
   }
 }
diff --git a/src/views/topic/content/components/ReplyPanel.vue b/src/views/topic/content/components/ReplyPanel.vue
index eb16b3b5..d15bd565 100644
--- a/src/views/topic/content/components/ReplyPanel.vue
+++ b/src/views/topic/content/components/ReplyPanel.vue
@@ -9,7 +9,7 @@ import 'animate.css'
 import { defineAsyncComponent } from 'vue'
 
 // 导入编辑器
-import KUNGalgameEditor from '@/components/editor/KUNGalgameEditor.vue'
+import WangEditor from '@/components/WangEditor.vue'
 
 // 异步导入话题标签
 const Tags = defineAsyncComponent(
@@ -52,7 +52,7 @@ const handelClosePanel = () => {
           </div>
           <!-- 回复的编辑器 -->
           <div class="content">
-            <KUNGalgameEditor />
+            <WangEditor :height="300" :isShowToolbar="isShowAdvance" />
           </div>
           <!-- 回复的页脚 -->
           <div class="footer">