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

通过将变量设置为内容参数来应对小问题

tinymce reactjs

Messiah · 技术社区 · 9 年前

npm react tinymce 3.10.10 . content

<TinyMCE
  content = {this.state.text}
            onChange={this.handleEditorChange}
/>

在这种情况下,它显示空白编辑器。下面是它如何正确工作的示例:

<TinyMCE
 content = 'Any string will display the text correctly'
            onChange={this.handleEditorChange}
/>

1 回复 | 直到 9 年前

Alejandro B. 8 年前

我也遇到了同样的问题,最终找到了答案。传递给组件的值是原始值。一旦收到,组件将接管并处理内容状态,而不管是否向其传递了新值。因此,如果您要传递一个字符串,那么它是一个常数,并且它存在于组件的初始渲染中。但是,如果要传递变量,则变量的初始值可能与要显示的值不同(例如,在组件接收到要显示的值之前,它可能为null或未定义)。在我的例子中,我收到一个包含页面内容的对象,其中一个是要显示为初始内容的html。但是,渲染方法首先使用空对象激发,然后使用包含数据的实际对象激发。我解决这个问题的方法是为我的微型mce包装器设置一个键,带有我的对象id的值。

<TinyMCE
    key={customPageData.id} // this line made the trick
    content={customPageData.body}
    config={{
        plugins: "link image lists print preview",
        toolbar:
            "undo redo | bold italic | alignleft aligncenter alignright | bullist numlist",
    }}
    onChange={handleEditorChange}
/>

推荐文章