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。