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

Question

[我们的Rich Text Editor切换到了Draft-JS，但是mentions plugin出现了问题。

提到插件需要一个如下所示的对象数组。

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并搜索“自定义提及组件示例”

欢呼声