123

server/HoneyBox/src/HoneyBox.Admin/admin-web/src/views/business/danye/components/DanyeFormDialog.vue

@@ -26,7 +26,7 @@
       </el-form-item>
 
       <el-form-item label="内容" prop="content">
-        <div v-if="dialogVisible" class="editor-container">
+        <div v-if="editorReady" class="editor-container">
           <Toolbar
             :editor="editorRef"
             :defaultConfig="toolbarConfig"
@@ -34,13 +34,16 @@
             class="editor-toolbar"
           />
           <Editor
-            v-model="formData.content"
             :defaultConfig="editorConfig"
             :mode="mode"
             class="editor-content"
             @onCreated="handleCreated"
           />
         </div>
+        <div v-else-if="dialogVisible" class="editor-loading">
+          <el-icon class="is-loading"><Loading /></el-icon>
+          <span>加载编辑器中...</span>
+        </div>
       </el-form-item>
     </el-form>
 
@@ -54,8 +57,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch, shallowRef, onBeforeUnmount } from 'vue'
+import { ref, reactive, computed, watch, shallowRef, onBeforeUnmount, nextTick } from 'vue'
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
+import { Loading } from '@element-plus/icons-vue'
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import type { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
 import '@wangeditor/editor/dist/css/style.css'
@@ -84,6 +88,7 @@ const dialogVisible = computed({
 
 // 编辑器实例
 const editorRef = shallowRef<IDomEditor>()
+const editorReady = ref(false)
 const mode = 'default'
 
 // 工具栏配置
@@ -159,7 +164,7 @@ const formRules: FormRules = {
 
 // 清理 HTML 内容，修复可能导致编辑器解析错误的格式问题
 const cleanHtmlContent = (html: string): string => {
-  if (!html) return ''
+  if (!html) return '<p></p>'
   
   // 修复以分号开头的 style 属性（如 style=";font-family:宋体"）
   let cleaned = html.replace(/style=";/g, 'style="')
@@ -173,109 +178,82 @@ const cleanHtmlContent = (html: string): string => {
   // 移除 style 属性开头的分号
   cleaned = cleaned.replace(/style=";\s*/g, 'style="')
   
-  return cleaned
+  // 移除可能导致问题的特殊字符
-}
+  cleaned = cleaned.replace(/[\u0000-\u0008\u000B\u000C\u000E-\u001F]/g, '')
   
-// 安全地设置编辑器内容
+  return cleaned || '<p></p>'
-const safeSetEditorContent = (editor: IDomEditor, content: string) => {
-  if (!editor || editor.isDestroyed) return
-  
-  try {
-    // 清理 HTML 内容
-    const cleanedContent = cleanHtmlContent(content)
-    
-    // 先清空编辑器
-    editor.clear()
-    
-    // 使用 setTimeout 确保 clear 操作完成
-    setTimeout(() => {
-      if (!editor.isDestroyed) {
-        try {
-          editor.setHtml(cleanedContent)
-        } catch (e) {
-          console.error('[DanyeFormDialog] Error setting HTML content:', e)
-          // 如果设置失败，尝试设置纯文本
-          try {
-            // 提取纯文本内容
-            const tempDiv = document.createElement('div')
-            tempDiv.innerHTML = cleanedContent
-            const textContent = tempDiv.textContent || tempDiv.innerText || ''
-            editor.insertText(textContent)
-          } catch (e2) {
-            console.error('[DanyeFormDialog] Error setting text content:', e2)
-          }
-        }
-      }
-    }, 50)
-  } catch (e) {
-    console.error('[DanyeFormDialog] Error in safeSetEditorContent:', e)
-  }
 }
 
 // 编辑器创建完成
 const handleCreated = (editor: IDomEditor) => {
-  console.log('[DanyeFormDialog] handleCreated called, editor:', editor)
+  console.log('[DanyeFormDialog] handleCreated called')
-  console.log('[DanyeFormDialog] editor.isDestroyed:', editor.isDestroyed)
   editorRef.value = editor
   
-  // 如果有内容，设置到编辑器
+  // 延迟设置内容，确保编辑器完全初始化
-  if (formData.content) {
+  nextTick(() => {
-    console.log('[DanyeFormDialog] Setting initial content to editor:', formData.content.substring(0, 100))
+    setTimeout(() => {
-    safeSetEditorContent(editor, formData.content)
+      if (editor && !editor.isDestroyed && formData.content) {
+        try {
+          const cleanedContent = cleanHtmlContent(formData.content)
+          console.log('[DanyeFormDialog] Setting cleaned content')
+          editor.setHtml(cleanedContent)
+        } catch (e) {
+          console.error('[DanyeFormDialog] Error setting content:', e)
+          // 如果设置失败，尝试设置为空
+          try {
+            editor.setHtml('<p></p>')
+          } catch (e2) {
+            console.error('[DanyeFormDialog] Error setting empty content:', e2)
           }
+        }
+      }
+      editorReady.value = true
+    }, 100)
+  })
 }
 
 // 监听弹窗打开，初始化数据
 watch(() => props.modelValue, (visible) => {
-  console.log('[DanyeFormDialog] modelValue changed:', visible, 'danye:', props.danye?.id)
+  console.log('[DanyeFormDialog] modelValue changed:', visible)
   if (visible && props.danye) {
     formData.title = props.danye.title
     formData.content = props.danye.content || ''
-    console.log('[DanyeFormDialog] formData.content set to:', formData.content.substring(0, 100))
+    editorReady.value = false
-    console.log('[DanyeFormDialog] editorRef.value:', editorRef.value)
-    console.log('[DanyeFormDialog] editorRef.value?.isDestroyed:', editorRef.value?.isDestroyed)
-    
-    // 如果编辑器已存在且未销毁，直接设置内容
-    if (editorRef.value && !editorRef.value.isDestroyed) {
-      safeSetEditorContent(editorRef.value, formData.content)
-    }
   }
 })
 
 // 监听 dialogVisible 变化
 watch(dialogVisible, (visible) => {
   console.log('[DanyeFormDialog] dialogVisible changed:', visible)
+  if (!visible) {
+    editorReady.value = false
+  }
 })
 
 // 组件销毁时销毁编辑器
 onBeforeUnmount(() => {
-  console.log('[DanyeFormDialog] onBeforeUnmount called')
   const editor = editorRef.value
-  if (editor) {
+  if (editor && !editor.isDestroyed) {
-    console.log('[DanyeFormDialog] Destroying editor in onBeforeUnmount')
     editor.destroy()
   }
 })
 
 // 重置表单
 const resetForm = () => {
-  console.log('[DanyeFormDialog] resetForm called')
   formData.title = ''
   formData.content = ''
+  editorReady.value = false
   formRef.value?.resetFields()
 }
 
 // 关闭弹窗
 const handleClose = () => {
-  console.log('[DanyeFormDialog] handleClose called')
-  console.log('[DanyeFormDialog] editorRef.value before destroy:', editorRef.value)
   // 先销毁编辑器实例
-  if (editorRef.value) {
+  if (editorRef.value && !editorRef.value.isDestroyed) {
-    console.log('[DanyeFormDialog] Destroying editor, isDestroyed:', editorRef.value.isDestroyed)
     editorRef.value.destroy()
     editorRef.value = undefined
-    console.log('[DanyeFormDialog] Editor destroyed and set to undefined')
   }
+  editorReady.value = false
   dialogVisible.value = false
   resetForm()
 }
@@ -290,6 +268,11 @@ const handleSubmit = async () => {
     return
   }
 
+  // 从编辑器获取最新内容
+  if (editorRef.value && !editorRef.value.isDestroyed) {
+    formData.content = editorRef.value.getHtml()
+  }
+
   submitLoading.value = true
   try {
     const submitData: DanyeUpdateRequest = {
@@ -312,6 +295,10 @@ const handleSubmit = async () => {
 </script>
 
 <style scoped>
+.page-container {
+  padding: 0;
+}
+
 .editor-container {
   width: 100%;
   border: 1px solid #dcdfe6;
@@ -329,6 +316,17 @@ const handleSubmit = async () => {
   overflow-y: auto;
 }
 
+.editor-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 400px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  color: #909399;
+  gap: 8px;
+}
+
 .form-tip {
   font-size: 12px;
   color: #909399;