在React中使用富文本字段的问题-使用React -rte，但开放建议

Question

我想做一些简单的事情(一切都是这样开始的…)

表单中的富文本字段，它与验证和错误一起工作，它的Formik/React。非常直接。

我对RT编辑器做了一些研究。

TinyMCE -需要API密钥。我不想担心API问题和密钥，这是一个RTF，我们不要把它弄得那么复杂。我也不喜欢他们的品牌出现在我的领域。

CKEditor - 1MB构建后，到目前为止我的项目最大的包，我有很多东西运行。这看起来像很棒的医生。一些较小的没有很好的记录。

draftJS - FB制作，所以应该工作很好，反应正确…500K的包，看起来和RTF一样小。不是很直观。

react-rte, mod of draftJS，超级容易安装和UI，但连接它是一个黑盒，没有文档…

这是我的反应代码记住，组件是RichTextEdit，依赖项是RichTextEditor

import React, { Component } from "react";
import RichTextEditor from "react-rte";

class RichTextEdit extends Component {

state = {
value: RichTextEditor.createEmptyValue(),
}

onChange = (value) => {
this.setState({value});
if (this.props.onChange) {
this.props.onChange(
value.toString("html"),
);
}
};

render () {
const toolbarConfig = {
display: ["INLINE_STYLE_BUTTONS", "BLOCK_TYPE_BUTTONS", "BLOCK_TYPE_DROPDOWN", "HISTORY_BUTTONS"],
INLINE_STYLE_BUTTONS: [
{label: "Bold", style: "BOLD"},
{label: "Italic", style: "ITALIC"},
{label: "Underline", style: "UNDERLINE"},
],
BLOCK_TYPE_DROPDOWN: [
{label: "Normal", style: "unstyled"},
{label: "Heading Large", style: "header-one"},
{label: "Heading Medium", style: "header-two"},
{label: "Heading Small", style: "header-three"},
],
BLOCK_TYPE_BUTTONS: [
{label: "UL", style: "unordered-list-item"},
{label: "OL", style: "ordered-list-item"},
],
};
return (
<Box width={2/3}>
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
</Box>
);
}
}
export default RichTextEdit;

这里是我的错误

onloadwff.js:71 Assertion failed: Input argument is not an HTMLInputElement

需要得到这个字段吐出一个值，有人有建议吗?

我已经检查了文档:https://www.npmjs.com/package/react-rte这里没什么

任何其他简单的实现一个RTF到一个表单?

Answer 1

这个错误来自lastpass插件，我们可以忽略