Question

我是draftjs的新手，我想知道是否有办法在编辑器中内嵌自定义组件。

我有一个带有twitter句柄的字符串。我使用装饰器来检测正则表达式@ [{handle}]，它取代了句柄并将组件内联呈现。但是我的句柄组件需要诸如回调函数和URL之类的属性。

我不太确定如何将我传递给我的ContentEditable组件的URL和回调函数传递给我的组件。

我确定我只是遗漏了一些东西。我检查了contentState.getEntity(entityKey).getType()，但它只看到我传递给复合装饰器的内容没有样式，而不是装饰部分作为单独的块。

我已经看到你可以修改实体地图，但我不确定这是正确的方法还是如何在实体地图中定义我自己的实体

有人知道我缺少什么来为我的组件提供属性吗？

const decorator = new CompositeDecorator([
  {
    strategy: handleStrategy,
    component: Handle,
  },
]);


export default class ContentEditable extends component {
    const content = 'some messages and my handle @[handle]';
    if (this.props.content.trim() !== '') {
      const processedHTML = DraftPasteProcessor.processHTML(content);
      const entityMap = processedHTML.entityMap;
      const contentState = ContentState.createFromBlockArray(processedHTML.contentBlocks, entityMap);
      // Create with content with decorator
      editorState = EditorState.createWithContent(contentState, decorator);
    } else {
      // Create empty content with decorator
      editorState = EditorState.createEmpty(decorator);
    }
    this.state = {
      editorState,
    }
}

render() {
    return (
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          ref="editor"
        />
    );
  }

Answer 1

对不起，文件遗失了。您可以在props CompositeDecorator中提供CompositeDecorator({strategy:xxx,component:xxx,props:{...}}) 检查source

带有道具的Draftjs组件

1 个答案: