代码之家 › 专栏 › 技术社区 › yevg

React TinyMCE-设置初始值

tinymce reactjs javascript

yevg · 技术社区 · 6 年前

我正在使用 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编辑器呈现,但编辑器中没有初始化的内容。

如何在使用中设置初始值 反作用力 ?

2 回复 | 直到 6 年前

Tadas Antanavicius 6 年前

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

如果这就是你想要达到的目标,请注意 TinyMCE 文本区域 value 属性。出于这两个原因,您希望道具的格式如下所示 content={`<textarea>${data.body}</textarea>`} . 为了说明您的案例(您可能需要操纵父组件中的道具):

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