How to initiate designMode of iframe?

Question

How to initiate designMode of iframe?

474 views Asked by sir-haver At 26 January 2019 at 13:01

I'm trying to implement a simple iframe designmode I initiated in javascript into React. My pure js code:

<body>
<div id="textEditor">
    <button id="action" title="Bold"><b>Click me</b></button>
    <div id="richTextArea"></div>
        <iframe id="theWYSIWYG" name="theWYSIWYG" frameborder="0"></iframe>
</div>

<script>
    window.addEventListener("load", function () {
        var editor = theWYSIWYG.document;
        editor.designMode = 'on';
</script>

This is working of course. But trying in React:

class ExamCreate extends React.Component {
constructor(props) {
    super(props);
    this.examBody = null
}
state = {
    modalStage: 0,
    newExamName: '',
    newExamDescription: '',
    newExamTime: '',
}
componentDidUpdate = () => {
        var a = this.examBody.document;
        a.designMode = 'on';
}

and jsx:

<iframe ref={examBody => this.examBody = examBody} 
        id="examBody" name="examBody" frameBorder="0"></iframe>

But I cannot access the ref's document at all. How can I setup the designmode of the iframe ref?

Original Q&A

There are 4 answers

**kenodek** · Answer 1 · 2019-01-26T13:45:07+00:00

kenodek On 26 January 2019 at 13:45

I'm new to React and this is confusing to me why don't you wrtie this.state inside of a constructor?

**sir-haver** · Answer 2 · 2019-01-26T22:41:37+00:00

sir-haver On 26 January 2019 at 22:41

I managed to solve it by adding the contentWindow property like so:

let editor = this.examBody.contentWindow.document;
editor.designMode = 'on'

I don't know why different in Reacat and why you cannot reach the document directly, hope it can help someone...

**Ramazan Aliskhanov** · Answer 3 · 2021-02-08T16:40:43+00:00

I had the same problem. I solved within body tag outside of React:

  <body onLoad='enableEditor()'>

and before body closing tag i have a script

<script type='text/javascript'>

      function enableEditor () {
          todoEditor.document.designMode = 'On'
          todoEditor.focus();
    }

</script>

todoEditor is a name of my (iframe name='todoEditor')

**Chijioke Peter** · Answer 4 · 2022-10-05T14:04:15+00:00

useEffect(() => {
    theWYSIWYG.document.designMode = 'on';
  }, []);

<div id="textEditor">
    <button id="action" title="Bold"><b>Click me</b></button>
    <div id="richTextArea"></div>
        <iframe id="theWYSIWYG" name="theWYSIWYG" frameborder="0"></iframe>
</div>

TechQA.

How to initiate designMode of iframe?

There are 4 answers

Related Questions in REACTJS

Related Questions in IFRAME

Related Questions in DESIGNMODE

Popular Questions

Popular Tags

Trending Questions