fix(富文本编辑器): 修复连续空格在回显和小程序中丢失的问题

董国庆

2026-05-09 412554e26a7f29b8fd9580522082af86968d5c24

fix(富文本编辑器): 修复连续空格在回显和小程序中丢失的问题

添加 preserveConsecutiveSpaces 函数，将连续空格转换为   实体，确保后端回显和小程序富文本都能保持原始间距格式。同时调整规则页面的编辑器容器最大高度，防止内容区域溢出。

 src/components/custom/Editor/AiRichTextEditor/index.vue

@@ -231,8 +231,37 @@
  return container.innerHTML
}

function preserveConsecutiveSpaces(html: string) {
  if (!html || typeof document === 'undefined')
    return html || ''

  const container = document.createElement('div')
  container.innerHTML = html

  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT)
  const textNodes: Text[] = []

  let currentNode = walker.nextNode()
  while (currentNode) {
    textNodes.push(currentNode as Text)
    currentNode = walker.nextNode()
  }

  textNodes.forEach((node) => {
    const text = node.nodeValue || ''
    if (!text.includes('  '))
      return

    // Convert consecutive spaces to non-breaking spaces so backend echoes
    // and mini-program rich text both preserve the original spacing.
    node.nodeValue = text.replace(/ {2,}/g, spaces => '\u00A0'.repeat(spaces.length))
  })

  return container.innerHTML
}

function formatRichTextContent(html: string) {
  return formatRichTextList(formatTableForMiniProgram(html))
  return preserveConsecutiveSpaces(formatRichTextList(formatTableForMiniProgram(html)))
}

function syncModelValue(html: string) {

 src/views/transaction/pricingManagement/rules.vue

@@ -41,7 +41,7 @@
<template>
  <div class="w-full h-full relative content">
    <div class="p-12px h-full">
      <div class="box py-16px! mb-12px h-full">
      <div class="box py-16px! mb-50px">
        <div class="head">计费规则说明</div>
        <div class="rich-text-wrapper">
          <AiRichTextEditor v-model="text" height="300px" />
@@ -121,6 +121,7 @@
}
.rich-text-wrapper :deep(.aie-container) {
  min-height: 300px;
  max-height: calc(100vh - 76px - 56px - 40px - 64px);
  font-size: 14px;
}