MySQL存储的HTML在页面显示无空格，TinyMCE正常：原因及解决方法

这个问题我碰到过好几次，其实是浏览器和富文本编辑器对空白字符的处理逻辑不一样导致的，先帮你理清楚场景和解决方法：

场景还原 #

你在MySQL中存储了这段带样式的HTML内容：

<p style='text-align: left;'><span style='font-size: 10px;'>Test</span><strong style='font-size: 10px;'><span style='color: red;'> red bold </span></strong><span style='font-size: 10px;'>text</span></p>

然后通过PHP读取并输出到页面的div中：

$htmlText = ... // 从数据库获取上述HTML内容
<div id="text1" onclick="modalText(this)" style="border: 1px solid;"> 
<?php echo $htmlText;?> 
</div>

结果发现初始显示时空格不生效，但点击div打开模态框用TinyMCE编辑时，空格却能正常显示。

为什么会这样？ #

核心原因是浏览器默认的HTML空白处理规则和TinyMCE的空白处理机制完全不同：

• 浏览器渲染普通div这类非编辑元素时，会自动把连续的空格、换行、制表符合并成单个空格，甚至会忽略开头或结尾的空格——这就是你看到“空格消失”的直接原因。
• TinyMCE这类富文本编辑器，会把内容放在支持编辑的区域内，要么自动把普通空格转换成 （不会被浏览器合并的非换行空格），要么给编辑区域设置了white-space: pre-wrap的CSS属性，强制保留原始的空白字符，所以编辑时空格能正常显示。

解决方法（按需选一个就行） #

方案1：给div加个CSS属性（最简单快捷）

直接给显示内容的div设置white-space: pre-wrap，让浏览器保留所有空白字符，同时还能自动换行：

<div id="text1" onclick="modalText(this)" style="border: 1px solid; white-space: pre-wrap;"> 
<?php echo $htmlText;?> 
</div>

这个方法不需要修改PHP代码，直接改CSS就能解决，推荐优先用。

方案2：PHP输出时把空格转成 （精准控制）

如果不想全局设置CSS，也可以在PHP输出前，把HTML文本里的普通空格替换成 ——注意要只替换文本内容里的空格，别破坏HTML标签属性里的空格，用DOMDocument处理会更安全：

$dom = new DOMDocument();
// 加载HTML，避免自动添加<html><body>标签
@$dom->loadHTML($htmlText, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

// 遍历所有文本节点，替换空格
$textNodes = $dom->getElementsByTagName('*');
foreach ($textNodes as $node) {
    foreach ($node->childNodes as $child) {
        if ($child->nodeType === XML_TEXT_NODE) {
            $child->nodeValue = str_replace(' ', '&nbsp;', $child->nodeValue);
        }
    }
}

$processedHtml = $dom->saveHTML();
?>
<div id="text1" onclick="modalText(this)" style="border: 1px solid;"> 
<?php echo $processedHtml;?> 
</div>

方案3：调整TinyMCE配置（从源头统一）

如果希望编辑器保存到数据库的内容本身就适合直接显示，可以在TinyMCE的配置里开启实体转换，让它把空格转成 后再保存：

tinymce.init({
  selector: '#your-editor-id',
  entities: '160,nbsp', // 指定要处理的实体
  entity_encoding: 'raw' // 直接输出实体而非转义
});

这样数据库里存储的内容自带 ，页面输出时就不用额外处理了。

内容的提问来源于stack exchange，提问作者RGriffiths