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

【问题标题】：Draft-JS Mention Plugin - Change Mentions Object K/VDraft-JS 提及插件 - 更改提及对象 K/V
【发布时间】：2020-03-08 18:46:34
【问题描述】：

将富文本编辑器切换到 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”会插入到文本字段中。有谁知道解决此问题的方法或解决方案？

【问题讨论】：

标签： javascript reactjs rich-text-editor draftjs draft-js-plugins

【解决方案1】：

您可以通过使用createMentionPlugin 的mentionComponent 属性来实现此目的。示例代码如下：

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

干杯

【讨论】：