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

React TinyMCE-设置初始值

tinymce reactjs javascript

yevg · 技术社区 · 8 年前

我正在使用 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 回复 | 直到 8 年前

Tadas Antanavicius 8 年前

您确定要将 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'
        }}
      />
    )
  }

TheRobQ 8 年前

我对这个TinyMCE React包装器不太熟悉,但是,从文档来看,它似乎希望标记将内容作为字符串括起来。你要传递的道具是否作为标签附上?如果没有,您是否尝试过使用模板文本来获得所需的结果?

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

Brent Washburne Jaz13 6 年前

而不是使用 content={this.props.value} value={this.props.value}

(这适用于TinyMCE 5.2.2版)

Ben Long 6 年前

如果使用的是TinyMCE React组件(如中所述 https://www.tiny.cloud/blog/how-to-add-tinymce-5-to-a-simple-react-project/ ),可以使用 initialValue 财产。

推荐文章

Jagdish Sharma · 如何使用tinymce编辑器上载图像

8 年前

Rosamunda · Tinymce可以工作,但*某些*样式不会保存到数据库(?!)

8 年前

Matteo Pietro Peru · 从tinymce表中删除填充

8 年前

Antonio Baena Guerrero · 向symfony控制器添加TinyMCE插件

8 年前

Paul · 在页面加载时替换默认WYSIWYG引擎

8 年前

wut · 在EPiServer TinyMCE 2中更改StyleSelect菜单的内容(4.7.9)

8 年前

Tassisto Nidheesh · 如何允许文本框中的图像| ASP。净核心

8 年前

Adam · TinyMCE:自动保存插件和Ajax

8 年前

dewd · 是否可以在WORDPRESS插件管理页面中从tinymce编辑器中删除或配置菜单栏?

8 年前

stackjlei · 通过包导入删除TinyMCE注册消息

8 年前