解决contenteditable编辑器回车换行行高异常问题：在线与离线环境差异
本文探讨contenteditable编辑器中，按回车键产生换行符时，在线环境行高异常（实际高度10px，而非预期20px）,而离线环境正常的问题。 该问题并非简单的固定高度就能解决，因为字体大小变化会影响行高。
问题描述:
在contenteditable元素中，按下回车键后，在线环境下每行行高会自动调整为回车符的实际高度(10px)，导致排版错误。然而，同样的操作在离线环境中却能保持预期的20px行高。
解决方案：使用自定义字体覆盖回车符
该方案的核心是利用CSS的高优先级，通过自定义字体来替代回车符的默认显示方式。
首先，创建一个包含回车符的自定义字体，并将其嵌入CSS：
<code class="css">@font-face {
font-family: 'customReturn';
src: url('data:application/font-woff;charset=utf-8;base64,...'); /* 此处替换为你的base64编码的字体文件 */
font-weight: normal;
font-style: normal;
}</code>
然后，使用CSS选择器，在contenteditable元素获得焦点时，强制使用自定义字体：
<code class="css">.contenteditable:focus {
font-family: 'customReturn', sans-serif;
}</code>
通过此方法，当用户按下回车键时，回车符将被自定义字体中的回车图标替代，从而避免了行高自适应问题，并保持了其他文本的预期行高。 其他文本将使用sans-serif字体。 请注意替换data:application/font-woff;charset=utf-8;base64,... 为你实际的base64编码字体文件。
这个方法巧妙地利用了CSS的优先级，解决了在线环境与离线环境差异导致的行高问题，确保了编辑器在不同环境下的稳定性。
