Question

我正在使用react-tinymce组件在我的React应用程序中实现TinyMCE。

我正在如下实现该组件：

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'
          }}
        /> 
    )
  }    
}

我将this.props.value传递到此组件，该组件包含表示某些HTML的字符串。

<Textarea value={data.body} />

TinyMCE编辑器呈现，但是在编辑器中没有初始化的内容。

如何使用react-tinymce设置初始值？

Answer 1

您确定要在TinyMCE中放入textarea吗？结果将是TinyMCE的textarea编辑器包装您自己的原始文本编辑器。

如果这是您要实现的目标，请注意TinyMCE使用HTML，而不是JSX。另请注意，textarea将其子元素显示为默认值，而不是value属性。由于这两个原因，您希望将道具的格式设置为content={`<textarea>${data.body}</textarea>`}。为了说明您的情况（您可能需要在父组件中操作prop）：

  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'
        }}
      />
    )
  }

Answer 2

我不太熟悉这个TinyMCE React包装器，但是，从文档来看，它似乎期望标签将内容封装为字符串。您传递的道具是否包含在标签中？如果不是，您是否尝试过使用模板文字以获得期望的结果？

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

Answer 3

代替使用content={this.props.value}，将其更改为value={this.props.value}

（适用于TinyMCE 5.2.2版）

Answer 4

如果您使用的是TinyMCE React组件（如https://www.tiny.cloud/blog/how-to-add-tinymce-5-to-a-simple-react-project/中所述），则可以使用initialValue属性设置初始值。

React TinyMCE-设置初始值

4 个答案: