CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Faiz Ahmed
Faiz Ahmed

Reputation: 1103

iFrame not being editable ( wysiwyg javascript )

I am trying to get a simple concept of wysiwyg editor. And I am stuck at this:

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);
}

Problem: The iframe is not editable.

JSFIDDLE

Upvotes: 1

Views: 741

Answers (1)

james00794
james00794

Reputation: 1147

Change:

richTextField.document.designMode = "On";

To:

richTextField.contentDocument.designMode = "On";

to make the iframe editable.

See: https://developer.mozilla.org/en-US/docs/Web/API/document.designMode

EDIT: For your second question, change your current function to:

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

It is because your function is defined in the onLoad event, and not within the scope of the window. See JavaScript not running on jsfiddle.net for a good explanation.

Upvotes: 1

Related Questions