I am trying to make a rich text editor using React.js and I am using iframe with the designMode property set to 'ON'. I want to make the selected text bold on click of a button. I want to use the execCommand() function but I keep getting this error: TypeError: Cannot read property 'contentWindow' of undefined. I am a beginner in React and I'm unable to figure out how to tackle this problem.

I've attached my code for your reference.

import React, { Component } from 'react'
import 'font-awesome/css/font-awesome.css'


export default class Editor extends Component {

    constructor(){
        super()
        this.execComd = this.execComd.bind(this)
    }

    ponentDidMount(){
       let editor = this.textField.contentWindow.document
       editor.designMode = 'on'
    }

    execComd(mand){
        this.textField.contentWindow.execCommand(mand, false, null)   
    }

    render() {
        return (
            <> 
                <div>
                    <button onClick={this.execComd('bold')}><i className="fa fa-bold"></i></button>
                </div>
                <iframe 
                    ref={textField => this.textField = textField} 
                    id="textField" 
                    name="textField" 
                    style={{width: "1000px",height: "500px"}} 
                    frameborder="1">
                </iframe>
            </>
        )
    }
}

I am trying to make a rich text editor using React.js and I am using iframe with the designMode property set to 'ON'. I want to make the selected text bold on click of a button. I want to use the execCommand() function but I keep getting this error: TypeError: Cannot read property 'contentWindow' of undefined. I am a beginner in React and I'm unable to figure out how to tackle this problem.

I've attached my code for your reference.

import React, { Component } from 'react'
import 'font-awesome/css/font-awesome.css'


export default class Editor extends Component {

    constructor(){
        super()
        this.execComd = this.execComd.bind(this)
    }

    ponentDidMount(){
       let editor = this.textField.contentWindow.document
       editor.designMode = 'on'
    }

    execComd(mand){
        this.textField.contentWindow.execCommand(mand, false, null)   
    }

    render() {
        return (
            <> 
                <div>
                    <button onClick={this.execComd('bold')}><i className="fa fa-bold"></i></button>
                </div>
                <iframe 
                    ref={textField => this.textField = textField} 
                    id="textField" 
                    name="textField" 
                    style={{width: "1000px",height: "500px"}} 
                    frameborder="1">
                </iframe>
            </>
        )
    }
}

• javascript
• reactjs

• You are calling this.execComd and assigning the result as your event handler. At that point, this.textField isn't set yet and this isn't what you want to do anyway. You meant roughly <button onClick={() => this.execComd('bold')}> I'm 99% certain. – Aluan Haddad Commented Aug 15, 2020 at 13:51

1 Answer 1

You have to create a ref binded ti this,. Such as this.myRef = React.createRef(), inside the constructor. Then assign that in the render method.

ref={this.myRef}

Inside escCommand you can have now:

execComd(mand){
       this.myRef.current.contentWindow.execCommand(mand, false, null)   
    }

To create a working demo of my proposal, please ignore as I have removed few unwanted code which i am not aware:

import React, { Component } from 'react'


export default class Editor extends Component {

    constructor(){
        super()
        this.execComd = this.execComd.bind(this)
        this.myRef=React.createRef();
    }

    ponentDidMount(){
      
    }

    execComd(mand){
      console.log("fired");
      console.log(this.myRef.current.contentWindow);
    
    }

    render() {
        return (
            <> 
                <div>
                    <button onClick={()=>this.execComd('bold')}>Click<i className="fa fa-bold"></i></button>
                </div>
                <iframe 
                    ref={this.myRef} 
                    title="hello"
                    id="textField" 
                    name="textField" 
                    style={{width: "1000px",height: "500px"}} 
                    frameborder="1">
                </iframe>
            </>
        )
    }
}