reactjs - 如何使用draft-js-mention-plugin以编程方式添加提及？

Question

问题 :

我正在尝试为使用 draft-js 创建的内容创建一个编辑界面+ draft-js-mention-plugin .然而，editorState没有坚持，只有纯文本。提及被保存为对象数组。现在我需要用这些数据重新创建 editorState。

示例:

我有一个像这样的纯文本:

const content = '@marcello we need to add spell check'

还有一个 mentions具有如下对象的数组:

const mentions = [{
  length: 8,
  offset: 0,
  user: 'user:59441f5c37b1e209c300547d',
}]

要使用纯文本创建 editorState 我正在使用这些行:

const contentState = ContentState.createFromText(content)
EditorState.createWithContent(contentState)

这很好用。纯文本设置为初始状态，但没有提及。

现在我需要一种基于 mentions 添加提及的方法对象。

我正在尝试阅读库代码来弄清楚，但到目前为止还没有成功。

Answer 1

与 "draft-js": "^0.11.6"和 "draft-js-mention-plugin": "^3.1.5"你可以做

const stateWithEntity = editorState.getCurrentContent().createEntity(
  'mention',
  'IMMUTABLE',
  {
    mention: {id: 'foobar', name: 'foobar', link: 'https://www.facebook.com/foobar'},
  },
)
const entityKey = stateWithEntity.getLastCreatedEntityKey()
const stateWithText = Modifier.insertText(stateWithEntity, editorState.getSelection(), 'foobar', null, entityKey)
EditorState.push(editorState, stateWithText)

你可能会发现这个 https://github.com/draft-js-plugins/draft-js-plugins/issues/915#issuecomment-386579249和 https://github.com/draft-js-plugins/draft-js-plugins/issues/983#issuecomment-382150332有帮助的