React TinyMCE - установить начальное значение
Я использую компонент react-tinymce для реализации TinyMCE в моем приложении React.
Я реализую этот компонент следующим образом:
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?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Вы уверены, что хотите поместить textarea в TinyMCE? В результате редактор текстовых полей TinyMCE обернет ваш собственный необработанный текстовый редактор.
Если это то, чего вы пытаетесь достичь, обратите внимание, что TinyMCE принимает HTML, а не JSX. Также обратите внимание, что textarea отображает свои дочерние элементы как значение по умолчанию, а не атрибут 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'
}}
/>
)
}обратите внимание, что компонент Textarea, обертывающий компонент TinyMCE, назван именно так. На самом деле у него есть опора (не показана), в которой я могу выбрать обычное текстовое поле или TinyMCE, но никогда оба сразу
О, понятно, извините, я прочитал это слишком буквально. В этом случае я не вижу проблем с вашим кодом. Правильно ли вы устанавливаете data.body как строку HTML?
да, data.body является строкой HMTL и инициализирует стандартный textarea, если я установил его как значение
Не могли бы вы включить в свой вопрос больше кода? У меня все работает как положено: codepen.io/tadasant/pen/djvpWP
Я не так хорошо знаком с этой оболочкой TinyMCE React, однако из документации, похоже, ожидаются теги, содержащие контент в виде строки. Заключены ли передаваемые вами реквизиты в теги? Если нет, то пробовали ли вы использовать литерал шаблона для получения желаемого результата?
`<p>{this.props.value}</p>`
Вместо использования content = {this.props.value} замените его на value = {this.props.value}
(это работает с TinyMCE версии 5.2.2)
Если вы используете компонент TinyMCE React (как описано в https://www.tiny.cloud/blog/how-to-add-tinymce-5-to-a-simple-react-project/), вы можете установить начальное значение с помощью свойства Начальное значение.
Удалось ли вам решить эту проблему? Я столкнулся с той же проблемой!