npm 包 kaneoh-draft-js-mention-plugin 使用教程

1. 简介

kaneoh-draft-js-mention-plugin 是一款基于 Draft.js 编辑器的 Mention 插件，能够帮助用户在输入过程中快速添加 @ 提及功能，并支持自定义数据源和渲染方式。

本文将详细介绍如何在前端项目中使用该插件，并提供示例代码。

2. 安装

使用 npm 安装：

--- ------- ------------------------------

3. 使用

初始化

在创建 Draft.js 编辑器实例时，需将 kaneoh-draft-js-mention-plugin 插件实例化，并传入相应的参数：

------ ------------- ---- ---------------------------------
------ - ----------- - ---- -----------

----- ------------- - --- ---------------
  -- ---
  ------------ --
    ----- ---------
    ------- ---------------------------------
    --- ---
  -- -
    ----- ------
    ------- ---------------------------------
    --- ---
  ---
  -- -------
  ----------------- -- ------- -- -- -
    ------ -
      ---- --------------------
        ---- -------------------- --------------------- ----- --
        ----- ----------------------------------------------
      ------
    --
  -
---

----- ----------- - --------------------------
----- ------- - ----------------

说明：

  • mentionData：Mention 的数据源，数组中每个元素需要包含 name、avatar 和 id 三个字段，分别表示名称、头像地址和唯一标识；
  • mentionComponent：自定义渲染方式，需传入一个 callback 方法，返回一个 React 组件。

渲染 Mention

在渲染 Draft.js 编辑器时，需将插件包裹在 MentionSuggestions 组件中，该组件将处理输入框中 @ 符号的展示和数据源的查询：

------ - ------ - ---- ----------------------
------ - ------------------ - ---- ---------------------------------
------ ---------------------------------------------------

----- -------- - -- -- -
  ----- ------------- --------------- - ------------------------------------

  ------ -
    -----
      -------
        -------------------------
        ------------------------------------
        -----------------
      --

      -------------------
        ------------------ -- ---
        -----------------------------------------
        ---------------- -- ---
      --
    ------
  --
--

说明：

  • onSearchChange：查询 Mention 数据源的回调方法；
  • suggestions：Mention 数据源；
  • onAddMention：选中 Mention 项的回调方法，需在其中更新编辑器的状态。

获取 Mention 文本

在保存编辑器内容时，需将 @ 提及展开成原始文本并进行保存。可以通过插件提供的 getPlainText 和 getMentions 方法实现：

----- ------------- --------------- - ------------------------------------
----- ------------- - --------------------------------
----- --------- - ------------------------------------------
----- -------- - -----------------------------------------

其中，getPlainText 方法返回展开后的纯文本，getMentions 方法返回包含 start, end 和 mention 字段的对象数组，分别表示当前 Mention 的起始和结束位置以及对应的数据源。

4. 示例代码

完整示例代码如下：

------ ------ - -------- - ---- --------
------ ------------- ---- ---------------------------------
------ - ----------- - ---- -----------
------ - ------ - ---- ----------------------
------ - ------------------ - ---- ---------------------------------
------ ---------------------------------------------------

----- ------------- - --- ---------------
  ------------ --
    ----- ---------
    ------- ---------------------------------
    --- ---
  -- -
    ----- ------
    ------- ---------------------------------
    --- ---
  ---
  ----------------- -- ------- -- -- -
    ------ -
      ---- --------------------
        ---- -------------------- --------------------- ----- --
        ----- ----------------------------------------------
      ------
    --
  -
---

----- -------- - -- -- -
  ----- ------------- --------------- - ------------------------------------
  ----- ------------- - --------------------------------
  ----- --------- - ------------------------------------------
  ----- -------- - -----------------------------------------

  ----- ------------ - --------- -- -
    ----- ------------------ - --------------------------------------- ---------
    -----------------------------------
  --

  ----- -------------- - -- ----- -- -- -
    ------------------------------------
  --

  ------ -
    -----
      -------
        -------------------------
        ------------------------------------
        -------------------------
      --

      -------------------
        -------------------------------
        --------------------------------------------
        ---------------------------
      --
    ------
  --
--

5. 总结

kaneoh-draft-js-mention-plugin 是一款功能强大的 Mention 插件，适用于多种场景。本文介绍了该插件的安装、初始化、渲染 Mention 和获取 Mention 文本的方法，并提供了示例代码。希望本文能够帮助读者更好地了解和使用该插件。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005602181e8991b448de4dc

阅读全文

猜你喜欢

  • npm 包 with-mutations 使用教程

    前言 在前端开发中，我们通常需要管理各种数据状态，并在数据状态发生变化时进行相应的更新操作。而 with-mutations 这个 npm 包就是为了解决这个问题而生的。

    3 年前
  • npm 包 @immowelt/docker-publish 使用教程

    在前端开发中，我们常常需要将自己开发的应用打包成 Docker 镜像发布到 Docker Hub 或者私有仓库中。然而，手动进行 Docker 镜像构建和发布太过繁琐。

    3 年前
  • npm 包 object-fit-picture-tag-polyfill 使用教程

    前言 在编写网页时，我们经常需要使用图片来装饰和美化页面。但是，图片在不同的浏览器中有时会出现一些不同的表现。比如，在 Safari 浏览器中，图片的默认填充方式为 cover，而在 IE11 中则没...

    3 年前
  • npm 包 barcode-binary-is-valid 使用教程

    在前端开发中，处理二维码和条形码是很常见的需求。npm 上有很多相关的包，而其中的 barcode-binary-is-valid 就是一个非常实用的 npm 包。

    3 年前
  • npm 包 barcode-convert-number 使用教程

    在前端开发中，为了更好地实现商品管理和物流追踪等功能，我们经常需要使用条形码。barcode-convert-number 是一个方便快捷的 npm 包，可以将条形码转换为数字，并将数字转换为条形码。

    3 年前
  • npm 包 barcode-get-binary-sections 使用教程

    简介 barcode-get-binary-sections 是一款能够将条形码图像转化为二进制码段的 npm 包，可用于前端的图像识别和条形码处理。 本文将为读者介绍如何使用 barcode-get...

    3 年前
  • npm 包 repeatrepeat 使用教程

    前言 在前端开发中，我们经常会用到重复的字符串。为了减少代码的重复和提高效率，我们可以利用 Node.js 中的 npm 包来解决这个问题。其中，repeatrepeat 是一个很好用的 npm 包。

    3 年前
  • npm 包 thoughts-cli 使用教程

    在前端工程化开发中，npm 是必不可少的工具之一。而 npm 包里的 thoughts-cli 是一款非常实用的命令行工具，可以帮助开发者快速创建团队规范的项目目录结构、快速生成组件代码，提高开发效率...

    3 年前
  • npm 包 anyofficetools 使用教程

    简介 npm 是 Node.js 的包管理器，用于安装和共享开源模块。AnyOfficetools 是一个 npm 包，可以让前端开发者轻松地将任何办公文件转换为 PDF、图片或 HTML 文件格式。

    3 年前
  • npm 包 cloudgenix-api-client 使用教程

    简介 cloudgenix-api-client 是一个供前端开发者使用的 npm 包，封装了 CloudGenix SD-WAN 平台的 REST API，以简化与 CloudGenix 平台的交互...

    3 年前
  • 使用 npm 包 rudy-match-path 进行路径匹配

    在前端开发中，常常需要对 URL 进行路由匹配，以决定页面该如何渲染。npm 包 rudy-match-path 提供了一个方便、有效的工具来进行路由匹配。在本文中，我们将介绍如何使用 rudy-ma...

    3 年前
  • npm 包 g-contacts 使用教程

    如果你在开发前端应用的时候需要使用到 Google 联系人 API，那么 g-contacts 这个 npm 包很可能会是你所需要的工具。g-contacts 可以帮助我们更方便地使用 Google ...

    3 年前
  • npm 包 gulp-vue-parser 使用教程

    在前端开发过程中，我们通常需要使用一些工具来辅助我们的开发工作，比如自动化构建工具 Gulp。而在 Gulp 中，gulp-vue-parser 是一个非常实用的 npm 包，它可以非常方便地将 Vu...

    3 年前
  • npm 包 passport-alipay-oauth2 使用教程

    Alipay 是国内著名的第三方支付平台，为了适应移动互联网时代，提供了便捷且安全的支付方式。passport-alipay-oauth2 是基于 Node.js 的 Alipay OAuth2 认证...

    3 年前
  • npm包greg-react-webpack使用教程

    Greg-React-Webpack是一个针对React应用程序的Webpack配置集合，以便于快速创建一个“入门”级别的React应用程序。 安装 要使用此包，请确保您已经安装了Node.js和np...

    3 年前
  • npm 包 ntp-time-sync 使用教程

    简介 在前端开发中，我们经常需要获取当前的时间。但是由于网络延迟等原因，获取到的时间可能不准确。这时候，我们就可以使用 NTP 协议来同步时间。NTP 是 Network Time Protocol ...

    3 年前
  • npm 包 verdaccio-ldap-fork 使用教程

    介绍 verdaccio-ldap-fork 是一款可以帮助前端开发人员管理私有 npm 包的工具。 随着前端技术的不断发展，我们的项目依赖的 npm 包数量也大幅度增加。

    3 年前
  • npm 包 bumble-bee 使用教程

    前言 前端开发的重要性正日益凸显，如何有效提高前端开发效率和代码质量成为许多前端工程师探索的方向。在这一过程中，使用各种工具和框架已经成为了前端开发不可或缺的一部分。

    3 年前
  • npm 包 custom-range-input 使用教程

    Custom-range-input 是一个帮助前端开发人员实现自定义的原生 range 输入框样式的 npm 包，它可以让用户根据自己的需求来定制输入框的样式和功能，提高了用户体验。

    3 年前
  • npm 包 ng2-breadcrumb-fixed 使用教程

    1. 简介 ng2-breadcrumb-fixed 是一个 Angular2+ 的面包屑导航组件库，可以方便地为每个页面增加面包屑导航。在多层级嵌套路由的情况下，它还能自动识别当前页面所处的路由，并...

    3 年前

相关推荐

    暂无文章