javascript - Draft-JS 提及插件 - 更改提及对象 K/V

Question

将我们的富文本编辑器切换到 Draft-JS，但在提及插件时遇到问题。

提及插件需要一组对象，如下所示。

const mentions = [
  {
    name: 'Matthew Russell',
    link: 'https://twitter.com/mrussell247',
    avatar: 'https://pbs.twimg.com/profile_images/517863945/mattsailing_400x400.jpg',
  }
]

我的问题是我想搜索名称，但在选择时插入值

const mentions = [
  {
    name: 'Matthew Russell',
    link: 'https://twitter.com/mrussell247',
    avatar: 'https://pbs.twimg.com/profile_images/517863945/mattsailing_400x400.jpg',
    value: "mr5058"
  }
]

例如，当用户搜索并选择“Matthew Russel”时，“mr5058”被插入到文本字段中。有谁知道解决此问题的方法或解决方案？

Answer 1

您可以通过使用mentionComponent. createMentionPlugin下面的示例代码：

 const mentionPlugin = createMentionPlugin({
  mentionTrigger: "@",
  mentionComponent: FileMentionComponent
});

我在哪里FileMentionComponent：

export default function FileMentionComponent
({  mention: { name,link,value},
  children
}) {
  return (
    <>
       <span>{value}</span> 
       <span style={{ display: "none" }}>{children}</span>
    </>

  );
}

参见这个插件的官方文档：https ://www.draft-js-plugins.com/plugin/mention 并搜索“自定义提及组件示例”

干杯