CODEWITHSUNDEEP
javascriptreactjstinymce
yevg
yevg

Reputation: 1966

React TinyMCE - set initial value

I am using the react-tinymce component to implement TinyMCE in my React app.

I am implementing this component as follows:

import React, { Component } from 'react';
import TinyMCE from 'react-tinymce';

class Textarea extends Component { 

  constructor(props) {
    //...
  }

  render() {

    return (

        <TinyMCE
          name={this.props.name}
          content={this.props.value}
          onChange={this.handleFieldChange}
          config={{
             plugins: 'autolink link image lists print preview code',
             toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
          }}
        /> 
    )
  }    
}

Im passing this.props.value to this component which contains a string representing some HTML. 

<Textarea value={data.body} />

The TinyMCE editor renders but there is no content initialized in the editor.

How can I set the initial value in using react-tinymce?

Upvotes: 2

Views: 6665

Answers (4)

Ben Long
Ben Long

Reputation: 383

If you're using the TinyMCE React component (as described in https://www.tiny.cloud/blog/how-to-add-tinymce-5-to-a-simple-react-project/), you can set the initial value with the initialValue property.

Upvotes: 0

Brent Washburne
Brent Washburne

Reputation: 13148

Instead of using content={this.props.value}, change it to value={this.props.value}

(this works with TinyMCE version 5.2.2)

Upvotes: 0

TheRobQ
TheRobQ

Reputation: 108

I'm not as familiar with this TinyMCE React wrapper, however, tfrom the docs it seems to expect tags enclosing content as a string. Are the props you are passing enclosed as tags? If not, have you tried using a template literal to get the desired outcome? 

`<p>{this.props.value}</p>`

Upvotes: 0

Tadas Antanavicius
Tadas Antanavicius

Reputation: 5410

Are you sure you want to put a textarea inside of TinyMCE? The result will be TinyMCE's textarea editor wrapping your own, raw text editor.

If that is what you're trying to achieve, note that TinyMCE takes HTML, not JSX. Also note that textarea displays its children elements as the default value, not a value attribute. For those two reasons, you want the prop to be formatted like content={`<textarea>${data.body}</textarea>`}. For your case to illustrate (you'll probably want to manipulate the prop in your parent component):

  render() {
    const propValuePlaceholder = `<textarea>${data.body}</textarea>`;
    return (
      <TinyMCE
        name={this.props.name}
        content={propValuePlaceholder}
        onChange={this.handleFieldChange}
        config={{
          plugins: 'autolink link image lists print preview code',
          toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
        }}
      />
    )
  }

Upvotes: 2

Related Questions