javascript - React TinyMCE - 设置初始值

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

你确定要放一个textarea吗？在 TinyMCE 里面？结果将是 TinyMCE 的文本区域编辑器包装您自己的原始文本编辑器。

如果这是您要实现的目标，请注意 TinyMCE采用 HTML，而不是 JSX。另请注意 textarea将其子元素显示为默认值，而不是 value属性。由于这两个原因，您希望 prop 的格式类似于 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'
        }}
      />
    )
  }