在 React 中获取富文本字段的问题 - 使用 react-rte 但对建议持开放态度

编程问答 2022-05-27

问题描述

我正在尝试做一些简单的事情（无论如何，一切都是这样开始的......）

表单中的富文本字段，用于验证和错误，它的 Formik/React。很直接。

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

TinyMCE - 需要 API 密钥。我不想担心 API 问题和密钥，这是一个 RTF，loets 并没有那么复杂。我也不喜欢他们在我的领域的品牌。

CKEditor - 构建后 1MB，到目前为止我的项目最大的包，我有很多东西在运行。这似乎是很棒的文档。一些较小的文件没有得到很好的记录。

draftJS - FB 制作，所以应该能很好地反应正确... 500K 包，看起来与 RTF 一样小。不是超级直观。

react-rte，draftJS 的 mod，超级简单的安装和用户界面，但连接起来是一个黑盒子，没有文档......

这是我的 react-rte 代码 记住组件是 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

需要让这个字段以某种方式吐出一个值，有人有建议吗？

我已查看文档：{​​{3}} 没有太多

任何其他简单的 rtf 实现到表单中？

解决方法

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

formikformikformsformsformsreactjsreactjsreactjsreactjsrich-text-editorrtf