【需求 25171】refactor: 优化富文本编辑器配置与样式

src/components/common/WangEditor/index.vue

 <template>
-  <div style="border: 1px solid #ccc"  class="w-100%" >
+  <div class="wang-editor">
     <Toolbar
-      style="border-bottom: 1px solid #ccc"
+      style="border-bottom: 1px solid #e5e7eb"
       :editor="editorRef"
       :defaultConfig="toolbarConfig"
       :mode="mode"
     />
     <Editor
-      style="height: 70vh; overflow-y: hidden"
       v-model="valueHtml"
       :defaultConfig="editorConfig"
       :mode="mode"
+      :style="{ height, overflowY: 'auto' }"
       @onCreated="handleCreated"
     />
   </div>
 </template>
+
 <script setup lang="ts">
-import '@wangeditor/editor/dist/css/style.css' // 引入 css
+import '@wangeditor/editor/dist/css/style.css'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import { uploadFile } from '@/api'
-const mode = 'default'
 
-// 编辑器实例，必须用 shallowRef
-const editorRef = shallowRef()
+const { height = '70vh', maxLength = 0 } = defineProps<{
+  height?: string
+  // 富文本内容最大字符数，0 表示不限制。
+  maxLength?: number
+}>()
 
-// 内容 HTML
-const valueHtml = defineModel<string>()
+const valueHtml = defineModel<string>({ default: '' })
+const editorRef = shallowRef()
+const mode = 'default'
 
-// 去掉上传视频的功能
 const toolbarConfig = {
-  excludeKeys: ['group-video', 'group-more-video', 'group-more-video'],
+  excludeKeys: ['group-video', 'group-more-video'],
 }
-// 去掉上传视频
-const editorConfig = {
+
+const editorConfig = computed(() => ({
   placeholder: '请输入内容...',
+  maxLength,
   MENU_CONF: {
     uploadImage: {
       customUpload: async (file: File, insertFn: (url: string) => void) => {
@@ -43,21 +47,27 @@ const editorConfig = {
       },
     },
   },
+}))
+
+// 编辑器切换页面时及时销毁实例，避免重复编辑器残留和内存泄漏。
+const handleCreated = (editor: typeof Editor) => {
+  editorRef.value = editor
 }
 
-// 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
-  const editor = editorRef.value
-  if (editor == null) return
-  editor.destroy()
+  editorRef.value?.destroy()
 })
-
-const handleCreated = (editor: typeof Editor) => {
-  editorRef.value = editor // 记录 editor 实例，重要！
-}
 </script>
+
 <style scoped>
-/* 使用 :deep() 来穿透 scoped 样式的限制, 直接为编辑器内容区域设置样式。这里的 p 标签是内容的最小单位，为其设置样式最精确。 */
+.wang-editor {
+  overflow: hidden;
+  border: 1px solid #dbe3ef;
+  border-radius: 10px;
+  background: #fff;
+}
+
+/* 使用 :deep() 穿透 scoped 样式，统一设置编辑器正文的字号。 */
 :deep(.w-e-text-container p) {
   font-size: 18px !important;
 }