Tinymce content doesnt change dynamically

[rakeshadak137]

I am using tiny-mce in one of my forms where I have to create and edit the form. At edit time when I set the content property to a dynamic value that I have got from server, it is not getting set into the editor. See the code below:

render(){
        let content = this.props.overview;
        return (
            <div className="form-group">
                <label htmlFor="description" >Description</label>
                <div className="input-group p-has-icon">
                    <TinyMCE
                        className="form-control"
                        height="130"
                        theme_advanced_resizing="false"
                        type="textarea"
                        id="description"
                        name="description"
                        content={content}
                        config={{
                            plugins: 'link image code',
                            toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
                        }}
                        onChange={this.handleChange}
                    />
                </div>
            </div>
        )
    }

If I set a string directly in the content property like content="<p>This is initial text.</p>" then it works correctly. But its not working in the dynamic way like above.

Can anyone help please?

[omarchehab98]

content is a default value of the content. That means, if the TinyMCE component renders content's value does not change the content. I can think of two ways to solve your issue:

One way is to not render TinyMCE component until content from the server is ready:

render() {
        let content = this.props.overview;
        if (content === undefined) { return null }

Another approach would be to call editor.setContent when the content is ready.

[sholua]

@omarchehab98 thank you. The first way works for me. I've spent a lot of time to get it working.

[rvmahesancanvendor]

Not working

[rvmahesancanvendor]

AM using in bootstrap model , with the tiny mce editor, while closing the model the whole page rendered in white space, can nnot set dynamically