npm 包 draft-js-image2-plugin 使用教程

前言

在前端开发中，编辑器是不可或缺的工具之一。而使用 React 进行富文本编辑时，Draft.js 可谓首选。然而，Draft.js 的默认编辑器并不支持插入图片的功能，这就需要借助第三方的 npm 包来完成这一功能。draft-js-image2-plugin 就是其中之一。它可以让我们在 Draft.js 编辑器中插入图片，并且支持图片上传和拖拽，十分方便实用。本文就是对该插件进行详细的使用教程。

安装

我们需要先安装该插件，通过 npm 安装即可。在命令行中输入以下指令：

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

安装完成后，在你的项目中通过以下名字引入该插件：

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

使用

在安装好插件后，我们可以开始在 Draft.js 编辑器中添加图片功能了。首先，依然需要先创建一个 Draft.js 编辑器的实例。

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

这时候我们的编辑器就已经加入了该插件。

接着我们需要在编辑器中添加添加图片的按钮、图片选择框等ui组件。可以自己编写样式，也可以使用npm包如antd来减少样式编写的关注度。

我们在这里写一个简单的 ui 组件代码：

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

这个 ui 组件主要是用于显示图片上传的ui，当然在点击上传按钮后，你需要做后端接收图片的处理，这里不再赘述。你也可以自己编写 ui 组件。

OK，我们已经为 Draft.js 编辑器添加了上传图片的ui，但它还处于不可用的状态。接下来，我们需要考虑如何让插件能够和它进行交互，才能完成嵌入图像的功能。

有几个步骤我们需要完成：

  1. 为 Draft.js 编辑器增加一个 ToolbarButton，用于打开上传图片的 ui。
  2. 捕获 ui 组件返回的 图片url 数组。
  3. 将图片 urls 传给 Draft.js 编辑器。

让我们分步骤来完成。

1. 为 Draft.js 编辑器增加一个 ToolbarButton

为了方便用户添加图片，我们需要一个 ToolbarButton 来触发 ui 组件的显示。ToolbarButton 可以用来触发各种这样或者那样的操作。我们可以根据自己的需要来自定义它，或者使用已经存在的。

下面是一个叫做 insertImageButton 的 ToolbarButton 组件:

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

上面这个插入图片的 ToolbarButton 组件，我们需要通过参数 onInsertImage 获取。它是一个函数，在 ToolbarButton 被点击的时候，将被调用，然后我们可以在函数中打开图片上传的 ui 组件。最终获取的结果就是一组图片 urls。我们在上面代码中使用了 Promise 对象和 async、await 来进行异步处理。

2. 捕获 UI 组件返回的图片 url 数组

在 ToolbarButton 中调用工具栏按钮时，我们需要捕获 ui 组件返回的图片 urls 数组。我们需要编写一个 onInsertImage 回调函数，这个函数将被 ToolbarButton 的 insertImageButton 参数所调用。

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

如上，我们将 onInsertImage 换成了 handleInsertImage ，它被加入了 Draft.js 编辑器中的 addImage 事件中。

handleInsertImage 函数返回一个 Promise，用于表示异步操作。在函数内部，我们创建了一个 Modal ui 组件，它会在我们点击插入图片按钮时显示一个包含上传图片和预览图片的图片浏览器。

当 Modal ui 组件返回 urls 数组时，我们就将这个数组通过 promise 返回给 insertImageButton 回调函数。

3. 将图片 urls 传给 Draft.js 编辑器

最后，我们需要将图片 urls 传递给 Draft.js 编辑器。为了做到这一点，我们需要修改 addImage 函数。该函数的主要作用是设置 editorState 中的 selection 和 content，让我们可以进行编辑操作。

经过以上修改，我们将参数改为 editorState 和 callback，因为我们需要从 editorState 中获取当前的 selection，然后更新 contentState。最终，我们要将 contentState 通过 callback 函数，设置回到 editorState。

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

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

通过上述代码，我们已经实现了在 Draft.js 编辑器中添加图片的功能。关于 draft-js-image2-plugin 具体参数及细节，请大家参阅官方文档。

总结

通过本文的介绍，我们了解了如何使用第三方 npm 包 draft-js-image2-plugin 在 Draft.js 编辑器中添加图像功能。这个插件是非常优秀的一个 npm 包，使用它的过程非常简单，只需要按照上述步骤进行操作即可。

当然，实际应用中，很多时候我们可能需要根据自己的需求对该插件进行适当的调整和修改，来满足更多的业务场景，这也需要一些 React 和 Draft.js 技术的基础和实践经验。在日常的工作中，我们应该多积累这方面的经验，以提高我们的技术水平和工作能力。

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

阅读全文

猜你喜欢

  • npm 包 revsion-manifest-webpack-plugin 使用教程

    前言 当我们进行前端开发时，经常需要解决文件版本控制的问题，以便于在更新文件时，能够得知哪些文件需要更新。解决这个问题的一个常见方式是通过生成文件映射表，即将文件名与文件的版本号进行关联，以此来控制文...

    2 年前
  • npm 包 roc-plugin-sw-precache 使用教程

    前言 现在，很多网站和应用程序都离不开 PWA（Progressive Web App）。PWA 可以在离线状态下工作并且能提高用户体验。而 Service Worker 缓存则是 PWA 的核心部分...

    2 年前
  • npm 包 wangbin 使用教程

    npm 包是前端开发中常用的工具，在前端领域中，常见的 npm 包有非常多的种类，如常用的 jQuery、React、Vue 等等。而 wangbin 是一款优秀的 npm 包，旨在提供更好用的前端开...

    2 年前
  • npm 包 cs-weather 使用教程

    作为前端开发人员，经常需要在网页上展示天气情况，但是实现这个功能并不是一件简单的事情，需要调用天气接口获取数据，然后将数据展示在页面上。为了降低开发人员的工作难度，npm 包 cs-weather 应...

    2 年前
  • npm 包 insert-resource 使用教程

    在前端开发过程中，我们经常会遇到需要添加资源文件（如CSS和JavaScript）的场景。手动添加这些资源文件既费时又麻烦，而 npm 包 insert-resource 则提供了一种自动化方式来添加...

    2 年前
  • npm包 netsuite-js 使用教程

    在前端开发中，我们经常需要通过API获取数据并展示给用户。而Netsuite是一个领先的云ERP和商务管理软件，开发人员可以使用netsuite-js npm包来简化与Netsuite API的交互。

    2 年前
  • 使用 npm 包 xenon-javascript-tools

    什么是 xenon-javascript-tools xenon-javascript-tools 是一个前端开发工具包，它提供了许多实用的工具函数，可以帮助我们更加高效地编写 JavaScript ...

    2 年前
  • npm 包 collar.js-dev-webclient 使用教程

    在前端开发中，经常需要对用户的鼠标行为进行跟踪和统计。而 npm 包 collar.js-dev-webclient 正是一个方便的鼠标跟踪工具。本文将介绍如何使用 collar.js-dev-web...

    2 年前
  • npm包re-slider-table使用教程

    介绍 re-slider-table是一个专门为前端开发者开发的表格组件，它使用React编写，可以帮助开发者快速地创建交互式表格，并且具有非常丰富的功能特性。 re-slider-table的主要功...

    2 年前
  • npm 包 bouncy-forever 使用教程

    Npm 是一种非常流行的前端包管理器，可以通过 npm 安装和管理许多前端类库和工具。其中一个非常实用的 npm 包就是 bouncy-forever。 bouncy-forever 是什么？ bou...

    2 年前
  • npm 包 library-test 使用教程

    npm 是前端开发不可或缺的工具之一，而 npm 上的包可以帮助我们提高开发效率，减少重复劳动。本文将介绍一个常用的 npm 包 library-test 的使用教程，旨在帮助前端开发者更好地掌握这个...

    2 年前
  • npm 包 express-mock-middleware 使用教程

    本文介绍 npm 包 express-mock-middleware 的使用教程，此包可以帮助前端开发人员在开发环境中快速搭建 mock server，方便、快捷地模拟后端接口数据。

    2 年前
  • npm 包 freemarker-to-json2.js 使用教程

    前言 在前端开发中，经常会使用模板引擎，例如 freemarker。但有时候我们需要根据模板文件生成对应的 JSON 文件，这个时候一个方便的工具就是 npm 包 freemarker-to-json...

    2 年前
  • npm 包 angular-align 使用教程

    前言 在前端开发过程中，我们经常需要对某些元素进行对齐操作。angular-align 是一个非常好用的 npm 包，可以帮助我们轻松地实现元素对齐。本文将详细介绍 angular-align 的使用...

    2 年前
  • npm 包 at-exit-hook 使用教程

    在前端开发中，我们经常需要在代码执行结束后执行一些操作，比如清理资源，保存数据等。在Node.js中，我们可以使用at-exit-hook这个npm包来实现这个功能。

    2 年前
  • npm 包 `collar-websocket` 使用教程

    前言 Websocket 是一种双向通信协议，可以在客户端和服务器之间建立实时通信的连接。在前端开发中，经常会用到 Websocket，如实时聊天、实时通知等。本文将介绍一款 npm 包 collar...

    2 年前
  • npm 包 leveldb-log 使用教程

    概述 leveldb-log 是一个 npm 包，用于在前端项目中储存日志数据，基于 Google LevelDB 实现。它使用简单而高效，可以避免浏览器崩溃，并提供了查询和筛选日志的能力。

    2 年前
  • npm 包 express-junction 使用教程

    简介 express-junction 是基于 Node.js 平台的 Web 服务框架 Express.js 的扩展包，它提供了一种更加简洁、灵活的方式来定义 Web 服务 API，并且支持自动生成...

    2 年前
  • 使用 nodebb-plugin-sso-weibo-new 实现微博登录

    前言 在很多网站中，都会使用到第三方账户登录，例如微博、QQ、微信等。这样可以方便用户进行登录，也可以减少用户填写个人信息的繁琐操作，提高用户体验。 在 nodebb 中，可以使用 nodebb-pl...

    2 年前
  • npm 包 html-webpack-layout-more-plugin 使用教程

    简介 html-webpack-layout-more-plugin 是一个 webpack 插件，旨在帮助开发者更加方便地管理多页面（Multi Page Application）的布局、公共部分与...

    2 年前

相关推荐

    暂无文章