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 best solutions below

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 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 On 08 February 2021 at 16:40

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 On 05 October 2022 at 14:04

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>

How to initiate designMode of iframe?

There are 4 best solutions below

Related Questions in REACTJS

Related Questions in IFRAME

Related Questions in DESIGNMODE

Trending Questions

Popular # Hahtags

Popular Questions