iFrame不可編輯（wysiwyg javascript）

Question

我試圖獲得一個簡單的wysiwyg編輯器的概念。而我堅持這個：

HTML

<iframe name="rte" id="rte" style="border:#000000 1px solid;"></iframe> 
<button onclick="makeBold();"><span class="fa fa-bold"></span></button> 

的Javascript

var richTextField = document.getElementById("rte"); 
richTextField.document.designMode = "On"; 

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

問題：iframe是不可編輯。

JSFIDDLE

Answer 1

變化：

richTextField.document.designMode = "On"; 

要：

richTextField.contentDocument.designMode = "On"; 

，使iframe的編輯。

參見：https://developer.mozilla.org/en-US/docs/Web/API/document.designMode

編輯：對於你的第二個問題，改變當前功能：

window.makeBold = function() 
{ 
    richTextField.contentDocument.execCommand('bold', false, null); 
} 

這是因爲你的函數是在onload事件定義，而不是在範圍之內窗口。請參閱JavaScript not running on jsfiddle.net以獲得很好的解釋。