Gin-Vue-Admin项目中富文本编辑器内容回显问题的分析与解决

孔振菲Orson

491人浏览 · 2025-08-08 09:00:32

孔振菲Orson · 2025-08-08 09:00:32 发布

Gin-Vue-Admin项目中富文本编辑器内容回显问题的分析与解决

【免费下载链接】gin-vue-admin 🚀Vite+Vue3+Gin的开发基础平台，支持TS和JS混用。它集成了JWT鉴权、权限管理、动态路由、显隐可控组件、分页封装、多点登录拦截、资源权限、上传下载、代码生成器【可AI辅助】、表单生成器和可配置的导入导出等开发必备功能。项目地址: https://gitcode.com/flipped-aurora/gin-vue-admin

问题背景

在Gin-Vue-Admin项目开发过程中，富文本编辑器（Rich Text Editor）是常用的表单组件之一。项目采用了基于Vue3的wangEditor组件来实现富文本编辑功能，但在实际使用中，开发者经常会遇到内容回显失败的问题：编辑时保存的内容在重新打开编辑页面时无法正确显示，或者查看页面中富文本内容显示异常。

问题分析

1. 组件生命周期时序问题

通过分析项目中的富文本组件实现，发现主要问题在于组件初始化时序：

<script setup>
const handleCreated = (editor) => {
  editorRef.value = editor
  valueHtml.value = props.modelValue  // 这里存在时序问题
}

watch(
  () => props.modelValue,
  () => {
    valueHtml.value = props.modelValue  // 这里可能触发时机不对
  }
)
</script>

2. 数据流同步机制缺陷

当前实现中，v-model的双向绑定与编辑器实例的创建存在竞争条件：

mermaid

解决方案

方案一：优化组件初始化逻辑

修改rich-edit.vue组件的初始化逻辑：

<script setup>
import { onMounted, nextTick } from 'vue'

// 在组件挂载后确保数据同步
onMounted(() => {
  nextTick(() => {
    if (editorRef.value && props.modelValue) {
      editorRef.value.setHtml(props.modelValue)
    }
  })
})

const handleCreated = (editor) => {
  editorRef.value = editor
  // 立即设置内容，避免时序问题
  if (props.modelValue) {
    editor.setHtml(props.modelValue)
  }
}

// 增强watch处理
watch(
  () => props.modelValue,
  (newVal) => {
    if (editorRef.value && newVal !== valueHtml.value) {
      editorRef.value.setHtml(newVal)
      valueHtml.value = newVal
    }
  },
  { immediate: true }
)
</script>

方案二：添加防抖和内容验证

<script setup>
import { debounce } from 'lodash-es'

// 防抖处理内容更新
const updateEditorContent = debounce((content) => {
  if (editorRef.value && content) {
    // 验证内容有效性
    if (isValidHtml(content)) {
      editorRef.value.setHtml(content)
      valueHtml.value = content
    }
  }
}, 100)

// HTML内容验证函数
const isValidHtml = (html) => {
  return html && typeof html === 'string' && html.trim().length > 0
}

watch(
  () => props.modelValue,
  (newVal) => {
    updateEditorContent(newVal)
  }
)
</script>

方案三：完整的健壮性解决方案

<template>
  <div class="border border-solid border-gray-100 h-full z-10">
    <Toolbar
      :editor="editorRef"
      :default-config="toolbarConfig"
      mode="default"
    />
    <Editor
      v-model="valueHtml"
      class="overflow-y-hidden mt-0.5"
      style="height: 18rem"
      :default-config="editorConfig"
      mode="default"
      @onCreated="handleCreated"
      @onChange="handleChange"
      @onDestroyed="handleDestroyed"
    />
    <!-- 加载状态提示 -->
    <div v-if="loading" class="editor-loading">
      <el-icon class="is-loading"><Loading /></el-icon>
      内容加载中...
    </div>
  </div>
</template>

<script setup>
import { ref, shallowRef, watch, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'

const emits = defineEmits(['change', 'update:modelValue'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  // 新增配置项
  placeholder: {
    type: String,
    default: '请输入内容...'
  },
  height: {
    type: String,
    default: '18rem'
  }
})

const editorRef = shallowRef()
const valueHtml = ref('')
const loading = ref(false)
const isEditorReady = ref(false)

const editorConfig = {
  placeholder: props.placeholder,
  MENU_CONF: {
    uploadImage: {
      fieldName: 'file',
      server: basePath + '/fileUploadAndDownload/upload?noSave=1',
      headers: {
        'x-token': userStore.token,
      },
      customInsert(res, insertFn) {
        if (res.code === 0) {
          const urlPath = getUrl(res.data.file.url)
          insertFn(urlPath, res.data.file.name)
          return
        }
        ElMessage.error(res.msg)
      }
    }
  }
}

// 编辑器创建回调
const handleCreated = (editor) => {
  editorRef.value = editor
  isEditorReady.value = true
  
  // 确保内容正确设置
  nextTick(() => {
    if (props.modelValue) {
      setEditorContent(props.modelValue)
    }
  })
}

// 内容变化回调
const handleChange = (editor) => {
  const newContent = editor.getHtml()
  if (newContent !== valueHtml.value) {
    valueHtml.value = newContent
    emits('change', editor)
    emits('update:modelValue', newContent)
  }
}

// 编辑器销毁回调
const handleDestroyed = () => {
  isEditorReady.value = false
}

// 安全的设置编辑器内容
const setEditorContent = (content) => {
  if (!editorRef.value || !content) return
  
  try {
    loading.value = true
    editorRef.value.setHtml(content)
    valueHtml.value = content
  } catch (error) {
    console.error('设置编辑器内容失败:', error)
    ElMessage.error('内容加载失败，请重试')
  } finally {
    loading.value = false
  }
}

// 监听props变化
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    if (newVal !== oldVal && isEditorReady.value) {
      setEditorContent(newVal)
    }
  },
  { immediate: true }
)

// 组件销毁时清理
onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy()
  }
})
</script>

<style scoped lang="scss">
.editor-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  z-index: 10;
}
</style>

常见问题排查表

问题现象	可能原因	解决方案
内容完全空白	编辑器初始化时序问题	使用nextTick确保DOM渲染完成
部分样式丢失	HTML内容过滤	检查编辑器配置的allowedTags
图片无法显示	图片路径问题	确保使用getUrl处理图片路径
内容闪烁	多次设置内容	添加防抖和内容对比
编辑器卡顿	大数据量内容	分页或虚拟滚动处理

最佳实践建议

1. 数据持久化策略

// 在保存数据时进行内容清理
const cleanHtmlContent = (html) => {
  // 移除空标签
  return html.replace(/<(\w+)\b(?:\s+[^>]*)?>\s*<\/\1>/g, '')
}

// 使用示例
const saveContent = async () => {
  const cleanedContent = cleanHtmlContent(formData.content)
  // 保存到后端
}

2. 性能优化

<script setup>
// 大数据量内容分块处理
const chunkedContent = computed(() => {
  if (props.modelValue && props.modelValue.length > 10000) {
    return processLargeContent(props.modelValue)
  }
  return props.modelValue
})

const processLargeContent = (content) => {
  // 实现分块逻辑
  return content
}
</script>