在Firefox中使用contentEditable:'bold'正确呈现,但html代码不正确

Question

在Firefox中使用contentEditable:'bold'正确呈现,但html代码不正确

我正在尝试使用contentEditable div编写一个所见即所得的编辑器,并且在处理粗体(和斜体)时遇到了麻烦.

当选择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>

Run Code Online (Sandbox Code Playgroud)

请尝试以下方法:

只选择单词"Some".单击"粗体"按钮.这将使文本变为粗体,如预期的那样.HTML输出用于<span style="font-weight:bold;">加粗单词,这有点不幸(<b>在Safari,Chrome中),但仍然可以胜任.
选择整个短语"某些可编辑文本"(手动或使用CTRL-A).单击"粗体"按钮.虽然contentEditable文本是粗体,但正如预期的那样,HTML输出没有应用粗体格式.

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

Answer 1

Tim*_*own 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);
}

Run Code Online (Sandbox Code Playgroud)

你的按钮变成:

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	14 年，4 月前
查看次数：	2679 次
最近记录：	11 年，6 月前