1

我正在尝试使用 contentEditable div 编写一个所见即所得的编辑器，并且在处理粗体（和斜体）时在 Firefox 中遇到了麻烦。

When all text in the div is selected, execCommand('bold') works in the div, but when I try to grab the HTML of that content, the HTML does not reveal any formatting.

要明白我的意思，请尝试在 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;">粗体字，这有点不幸（它<b>在 Safari、Chrome 中），但仍然有效。
  • 选择整个短语“一些可编辑的文本”（手动或使用 CTRL-A）。单击粗体按钮。虽然 contentEditable 文本是粗体，但正如预期的那样，HTML 输出没有应用粗体格式。

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

4

2 回答 2

5

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

问题是 Firefox 正在添加可编辑元素font-weight: bold的style属性<div>以使其全部变为粗体，这是非常合理的做法。如果您希望它使用<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/

于 2011-08-07T11:40:31.753 回答
0

If... that's IF using jQuery.

After exec command:

$('b').contents().unwrap().wrap('<strong/>');
于 2014-06-10T19:49:22.997 回答