npm 包 Draft-js-plugin-editor-toolbar-picker 使用教程

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

前言

Draft.js 是一款由 Facebook 开发并且用于其社交平台上的富文本编辑器。随着社交网络的日益增长，人们对于简洁、高效地在 Web 端上面写作的需求日益增长，并且需要在文本编辑器上有更多的工具来辅助写作。Draft-js-plugin-editor-toolbar-picker 在这个背景下应运而生，通过 CKEditor 和 TinyMCE 这类编辑器的参考，提供了一套工具条样式选择器。

这个 package 可以独立使用，也可以和其它插件结合使用，与其它插件比较有关联性的是 Draft-js-plugin-image，你可以通过这两个插件联合使用，提供一个拥有图片上传和样式选择功能的编辑器。

在本篇文章中，我们会介绍如何使用这个 npm 包，以及如何和富文本编辑器 Draft.js 结合使用，最后我们会展现一个实际的代码案例，旨在能够帮助读者更好地理解这个插件的使用方法。

安装

你可以使用 npm 命令来安装 draft-js-plugin-editor-toolbar-picker

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

基本使用

在你的应用中引入 Draft.js 插件后，使用 EditorToolbarPicker 来创建一个选择工具条：

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

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

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

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

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

EditorToolbarPicker 接受一个名为 component 的 prop 用于决定在选择器中应该显示的组件。一般来说，需要把可用的样式对象传递给这个组件，以便选择器使用，如下：

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

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

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

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

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

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

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

高级使用

当它单独使用时，许多内置的组件（如 BoldButton、ItalicButton、UnderlineButton 等）都可以作为可用的样式传递到 EditorToolbarPicker 组件。你也可以传递自定义的组件或者 HTML 元素或 react 组件作为样式，来获得更多的灵活性。

还有一点需要注意：当使用自定义样式时，你需要为这些样式定义一个唯一的样式名，否则选择器可能无法正常工作。

例如，在下面的例子中，我们提供了一个自定义样式，它是一段嵌入式链接。你可以点击链接按钮将它添加到当前选择器中。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

结语

通过本文，我们学习了如何使用 Draft.js Plugin Editor Toolbar Picker 这个 npm 包来实现一个带有选择器样式的富文本编辑器。我们也学习了如何和 Draft.js 插件结合使用，和使用自定义的样式组件达到更高的灵活性。

现在，您是否对于富文本编辑器有了更深的了解呢？

参考资料

  1. Draft.js - https://draftjs.org/
  2. Draft-js-plugin-editor-toolbar-picker - https://github.com/nikgraf/draft-js-plugins/tree/master/packages/draft-js-plugin-editor-toolbar-picker
  3. React Draft Wysiwyg - https://github.com/jpuri/react-draft-wysiwyg

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

阅读全文

猜你喜欢

  • npm 包 @frielforreal/react-hot-loader 使用教程

    在前端开发中，热加载（Hot Reload）已成为一个重要的工具，它可以帮助开发者快速预览并验证修改后的代码效果，提高开发效率。而 @frielforreal/react-hot-loader 这个 ...

    3 年前
  • npm 包 think-view-opx 使用教程

    前言 think-view-opx 是一个基于 ThinkJS 框架的 npm 包，它提供了一种轻量级的视图渲染方案，支持更加灵活的模版布局和可扩展的视图渲染功能。

    3 年前
  • npm 包 relu-core 使用教程

    简介 relu-core 是一个 JavaScript 库，它提供了一系列基于ReLU激活函数的数学运算方法。它可以用于神经网络的训练和预测，也可以用于其他需要进行数值计算的场景。

    3 年前
  • npm 包 fondant 使用教程

    什么是 fondant fondant 是一个可以快速生成可定制化的 CSS 样式表的库，其灵感来源于 Sass 和 Less。我们可以通过一定的约定来定义自己的样式，然后借助 fondant 来编译...

    3 年前
  • npm 包 test-modulerahul 使用教程

    简介 npm 是 Node.js 的包管理器，也是全球最大的代码仓库之一。借助 npm，开发者可以轻松地查找、安装、发布和管理代码包。test-modulerahul 是一个基于 npm 的前端测试工...

    3 年前
  • npm 包 asthma-forecast 使用教程

    在前端开发中，我们经常需要使用各种各样的库来帮助我们实现功能，提高工作效率。其中，npm 是广泛使用的包管理工具之一。本文将详细介绍一个名为 asthma-forecast 的 npm 包的使用教程，...

    3 年前
  • npm 包 notary-hive 使用教程

    在前端开发过程中，我们常常需要使用各种第三方库和工具来提高我们的开发效率和代码质量。其中，npm 是前端最常用的包管理工具之一。本文将介绍一个名为 Notary Hive 的 npm 包，并提供使用教...

    3 年前
  • npm 包 rollup-plugin-webassembly 使用教程

    在前端开发中，我们经常需要使用 WebAssembly 技术来加速 JavaScript 的执行速度。而 rollup-plugin-webassembly 就是一个适用于 Rollup 的 WebA...

    3 年前
  • npm 包 nu-svn 使用教程

    在前端开发中，我们通常需要进行版本管理，而 SVN 是广泛使用的版本控制系统之一。在使用 SVN 进行版本管理时，我们可以通过 npm 包 nu-svn 来进行操作。

    3 年前
  • npm 包 inlineapp-tools 使用教程

    在前端开发过程中，我们经常需要将不同的 JavaScript 文件合并到一个单独的文件中，以减少浏览器请求的数量，提高页面加载速度。而 npm 包 inlineapp-tools 提供了一种方便的方式...

    3 年前
  • npm 包 base-32 使用教程

    简介 base-32 是一种基于 32 个可打印字符的编码算法，常用于将二进制数据转换成 ASCII 字符串。它拥有一定的安全性，可用于加密等场景中。 npm 包 base-32 是一款基于 Java...

    3 年前
  • npm 包 Page-Snitch 使用教程

    在前端开发中，我们常常需要监测网页性能并进行优化。而 npm 包 Page-Snitch 则为开发者提供了一种简单易用的监测工具。本文将介绍如何安装使用该包，以及如何根据监测结果进行网页性能优化。

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

    介绍 droiv-vue 是一个基于 Vue 的 UI 组件库，它的目标是提供高品质的 Vue UI 组件和交互体验。它支持按需引入，同时提供了 TypeScript 描述文件。

    3 年前
  • npm 包 atm-timestamp 使用教程

    介绍 atm-timestamp 是一个用于生成时间戳的 npm 包，在前端开发中十分常用。它通过封装了原生的 JavaScript 时间戳获取函数，使得获取时间戳变得更加简单、方便。

    3 年前
  • npm 包 chrome-ddp 使用教程

    什么是 chrome-ddp？ chrome-ddp 是一个用于在 Chrome 插件中操作 Meteor 应用程序的 npm 包。它与 DDP（分布式数据协议）协议兼容，并提供了一组易于使用的 AP...

    3 年前
  • npm 包 u-label.vue 使用教程

    前言 在前端开发中，标签(label) 是非常常用的一种组件，它的作用十分广泛，如表单、列表、分类等都需要使用标签进行表示。 本篇文章将介绍一个非常实用的npm包——u-label.vue，它是一个快...

    3 年前
  • npm 包 condition-noop 使用教程

    npm 包 condition-noop 是一个非常有用的工具，它可以帮助前端开发人员在编写条件语句时更加高效地处理特殊条件。本文将介绍 npm 包 condition-noop 的使用教程，并提供深...

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

    简介 x-range是一个前端使用的npm包，为开发者提供了更加便利的数字范围选择方式，包含对范围的拖拽、点击、悬浮等操作，适用于多种前端框架，如Vue.js、React等。

    3 年前
  • npm 包 @zhuangya/trie 使用教程

    什么是 trie 树？ Trie 树（也叫“字典树”）是一种树形数据结构，用于高效地存储和检索字符串数据集。它的特点是能够最快地查找、插入和删除数据，时间复杂度为 $O(l)$，其中 $l$ 是字符串...

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

    在前端开发中，有很多需要向后端发送请求获取数据的场景，这时就需要使用到 API 客户端。在 Node.js 中有很多 API 客户端，今天我们介绍一个基于 koa 框架的 API 客户端 —— koa...

    3 年前

相关推荐

    暂无文章