时间戳

首页 > 解决方案 > 使富文本字段在 React 中工作的问题 - 使用 react-rte 但对建议持开放态度

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

问题描述

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

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

我对 RT Editors 做了一些研究。

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

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

DraftJS - FB 制作，所以应该可以很好地做出反应... 500K 包，看起来和 RTF 一样小。不是超级直观。

react-rte，draftJS 的 mod，超级容易安装和 UI，但是将它连接到一个黑匣子并且没有文档......

这是我的 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

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

我查看了文档：https ://www.npmjs.com/package/react-rte 那里没有多少

将 rtf 转换为表单的任何其他简单实现？

标签： reactjsformsrtfformikrich-text-editor

解决方案

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

推荐阅读