在Firefox中使用contentEditable：'bold'呈現正確，但html代碼不正確

我正在嘗試使用contentEditable div編寫wysiwyg編輯器，並且在處理粗體（和斜體）時遇到Firefox問題。在Firefox中使用contentEditable：'bold'呈現正確，但html代碼不正確

當選中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）。點擊粗體按鈕。雖然內容可編輯文本如預期的那樣是粗體，但HTML輸出沒有應用粗體格式。

任何有關可能導致這些問題以及如何解決這些問題的想法將不勝感激！

來源

2011-08-05 paula

在Firefox 5，這是我得到的HTML：''

Some editable text

。由於整個'input'已經應用了'bold'，它將它作爲style的樣式應用於'input'，而不是創建'span'。 – tw16

這裏有一個的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/

來源

2011-08-07 11:40:31

如果...，使用jQuery的IF。

exec命令後：

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

來源

2014-06-10 19:49:22

在Firefox中使用contentEditable：'bold'呈現正確，但html代碼不正確

回答

相關問題