在 Firefox 中使用 contentEditable：“粗体”正确呈现，但 html 代码不正确答案

【问题标题】：Using contentEditable in Firefox: 'bold' renders correctly, but html code is incorrect在 Firefox 中使用 contentEditable：“粗体”正确呈现，但 html 代码不正确
【发布时间】：2011-10-21 05:56:25
【问题描述】：

我正在尝试使用 contentEditable div 编写所见即所得的编辑器，但在 Firefox 中处理粗体（和斜体）时遇到了问题。

当 div 中的所有文本都被选中时，execCommand('bold') 在 div 中起作用，但是当我尝试抓取该内容的 HTML 时，HTML 不会显示任何格式。

要明白我的意思，请尝试在 Firefox 5 中运行以下 HTML 代码：

<script type="text/javascript">
window.onload = function () {

    var output = document.getElementById('output');
    var input = document.getElementById('input');

}
</script>
<body>
<button onClick="execCommand('bold', false, null);output.value=input.innerHTML;">Bold</button>
<div style="width: 300px; border: 1px solid #000000;">
<div id="input" contenteditable="true">Some editable text</div>
</div>
<textarea id="output"></textarea>
</body>
</html>

请尝试以下方法：

仅选择“一些”一词。单击粗体按钮。正如预期的那样，这将使文本变为粗体。 HTML 输出使用<span style="font-weight:bold;"> 将单词加粗，这有点令人遗憾（在 Safari、Chrome 中是 <b>），但仍然可以完成工作。
选择整个短语“一些可编辑的文本”（手动或使用 CTRL-A）。单击粗体按钮。虽然 contentEditable 文本是粗体，但正如预期的那样，HTML 输出没有应用粗体格式。

任何关于可能导致这些问题的原因以及如何解决这些问题的想法都将不胜感激！

【问题讨论】：

在 Firefox 5 中，这是我得到的 html：<div contenteditable="true" id="input" style="font-weight: bold;">Some editable text</div>。由于整个input 已应用bold，因此它将其作为样式应用到input，而不是创建span。

标签： html select contenteditable bold

【解决方案1】：

这是您原始代码的 jsFiddle：http://jsfiddle.net/Bv2Ek/

问题在于 Firefox 正在将 font-weight: bold 添加到可编辑的 <div> 元素的 style 属性中，以使其全部变为粗体，这是非常合理的做法。如果您希望它使用<b> 或<strong> 元素来应用粗体，您可以先使用StyleWithCSS 命令。将以下内容添加到您的脚本中：

function bold() {
    document.execCommand('StyleWithCSS', false, false);
    document.execCommand('bold', false, null);
}

你的按钮变成：

<button onClick="bold(); output.value=input.innerHTML;">Bold</button>

修改代码的jsFiddle示例：http://jsfiddle.net/Bv2Ek/1/

【讨论】：

【解决方案2】：

如果...那就是 IF 使用 jQuery。

执行命令后：

$('b').contents().unwrap().wrap('<strong/>');

【讨论】：