1

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

Faiz Ahmed
  • 1,083
  • 8
  • 16

1 Answers1

1

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.

Community
  • 1
  • 1
james00794
  • 1,137
  • 7
  • 14