【问题标题】: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】:

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

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

    干杯

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-09-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-17
      • 2019-02-24
      • 2020-04-07
      • 2015-02-04
      相关资源
      最近更新 更多