MindMap富文本模式下字号与行高问题的解决方案

在MindMap项目中，当使用富文本模式时，开发者可能会遇到一个常见的排版问题：节点显示和编辑状态下的文本行高不一致。这种现象通常表现为编辑框中的文本位置与节点实际显示的文本位置存在明显偏移。

问题根源分析

该问题的产生主要与CSS的字体继承机制有关。当思维导图容器元素或其任意祖先元素显式设置了font-size属性时，会导致以下两种情况：

1. 节点显示异常：容器元素的font-size会影响节点文本的渲染位置，可能导致文本明显偏下
2. 编辑状态不一致：由于富文本编辑框默认插入到body元素下，不受容器元素font-size影响，造成编辑时和显示时的文本位置不匹配

解决方案

方案一：重置容器字体大小

最直接的解决方法是去除容器元素及其祖先元素上的font-size样式。如果由于某些原因无法去除祖先元素的样式，可以为思维导图容器添加以下CSS：

#mindMapContainer {
    font-size: initial;
}

这种方法通过将字体大小重置为初始值，消除了继承带来的影响。

方案二：统一编辑框字体大小

如果希望保持现有的字体大小设置，可以通过CSS显式指定富文本编辑框的字体大小：

.smm-richtext-node-edit-wrap {
    font-size: 20px; /* 与容器字体大小保持一致 */
}

方案三：调整编辑框插入位置

更彻底的解决方案是修改富文本编辑框的DOM插入位置，使其与思维导图容器处于相同的样式上下文中：

new MindMap({
    el: document.querySelector('#mindMapContainer'),
    customInnerElsAppendTo: document.querySelector('#mindMapContainer')
})

这种方法通过将编辑框插入到容器元素内部，使其自然继承相同的字体样式，从根本上解决了不一致的问题。

最佳实践建议

1. 优先考虑方案三：修改编辑框插入位置是最推荐的做法，因为它保持了样式的一致性，且不需要额外维护字体大小
2. 谨慎使用全局样式：避免在项目全局样式中设置可能影响思维导图容器的字体大小
3. 测试不同环境：在复杂项目中，注意测试不同层级的样式继承情况

通过理解这些解决方案，开发者可以有效地解决MindMap项目中富文本模式下的字号与行高不一致问题，确保编辑和显示状态下的文本呈现一致。