如何在草稿编辑器实例上呈现html？-Java 学习之路

我有一个用例，我必须在编辑器上呈现HTML模板 . 我正在探索相同的draftjs . 我完成了基本设置，并为简单文本设置了draftjs编辑器 .

但是，如果我将HTML字符串传递给相同的编辑器组件，我会得到以下异常 .

DraftEditorContents-core.react.js:80 Uncaught TypeError: nextEditorState.getDirectionMap is not a function
    at DraftEditorContents.shouldComponentUpdate (DraftEditorContents-core.react.js:80)
    at checkShouldComponentUpdate (react-dom.development.js:11345)
    at updateClassInstance (react-dom.development.js:11754)
    at updateClassComponent (react-dom.development.js:13153)
    at beginWork (react-dom.development.js:13824)
    at performUnitOfWork (react-dom.development.js:15863)
    at workLoop (react-dom.development.js:15902)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)

知道我需要做些什么才能让这个草案工作？如果draftjs不适合这个，所以你建议任何其他图书馆作为替代？

1 回答

要将HTML字符串传递给编辑器，您可以使用Draftjs编辑器提供的convertFromHTML函数：

componentWillMount() {
    const compositeDecorator = new CompositeDecorator([
      {
        strategy: this.handleStrategy,
        component: HandleSpan,
        readOnly: true,
      },
    ]);
    const { value } = this.props;
    if (value) {
      const blocksFromHTML = convertFromHTML(value.replace(/(?:\r\n|\r|\n)/g, '

'));
      const state = ContentState.createFromBlockArray(
        blocksFromHTML.contentBlocks,
        blocksFromHTML.entityMap,
      );
      this.state = {
        editorState: EditorState.createWithContent(
          state,
          compositeDecorator,
        ),
      };
    } else {
      this.state = {
        editorState: EditorState.createEmpty(),
      };
    }
  }

然后你可以使用this.state.editorState作为渲染函数中的道具：

<Editor
    editorState={this.state.editorState}
/>

回复于 2024-05-06T01:06:29+08:00

如何在草稿编辑器实例上呈现html？

1 回答

相关问题