npm 包 ncdai-draft-js-toolbar 使用教程

阅读时长 11 分钟读完

前言

在前端的开发中,常常需要使用到富文本编辑器,draft-js 是 Facebook 开源的一个富文本编辑器库,其对于富文本编辑器的封装程度非常高,可以方便地进行自定义操作。而 ncdai-draft-js-toolbar 是针对 draft-js 的一个扩展插件库,为使用 draft-js 的开发者提供了一个方便、易用的工具栏。

本篇文章将介绍如何使用 ncdai-draft-js-toolbar,包括安装、使用、以及一些常见的定制操作和注意事项。

安装

可以通过 npm 进行安装 ncdai-draft-js-toolbar,命令如下:

使用

使用 ncdai-draft-js-toolbar 主要分为以下几个步骤:

1. 安装依赖

使用 ncdai-draft-js-toolbar 前,需要先安装 react、react-dom、draft-js、draft-js-plugins-editor 等相关依赖。

2. 引入相关组件

使用 ncdai-draft-js-toolbar 需要引入一些相关组件,包括 EditorState、Editor、Toolbar、getDefaultKeyBinding、KeyBindingUtil 等。

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

3. 创建工具栏

使用 ncdai-draft-js-toolbar 需要先创建一个工具栏,具体代码如下:

4. 创建编辑器

使用 ncdai-draft-js-toolbar 创建编辑器的具体代码如下:

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

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

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

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

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

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

5. 升级工具栏

ncdai-draft-js-toolbar 的工具栏信任 draft-js 的上下文使用。

默认的情况下,toolbarPlugin 中只有一些非常基础的按钮样式,要使用默认工具条,请在文本编辑器外部渲染。

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

6. 定制工具栏

ncdai-draft-js-toolbar 的工具栏可以通过扩展的方式进行定制。提供附加组件和附加按钮两个扩展点。

附加按钮

想添加一些新的按钮,可以通过 additionalButtons 来扩展

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

在 toolbar 组件中,可以通过 suffixButtons 来使用新的按钮,按钮的 name 是新增加的按钮的 name 属性。

附加组件

ncdai-draft-js-toolbar 还可以通过 additionalComponents 来添加一些新的组件。

在 toolbar 组件中,通过 additionalComponents 属性来显示新组件,与按钮一样,新组件的 name 属性对应附加组件中新增加组件的 name 属性。

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

注意事项

  • 使用 ncdai-draft-js-toolbar 前,需要安装相关依赖,并引入相关组件。
  • ncdai-draft-js-toolbar 提供了许多默认按钮,也可以通过添加新的组件或按钮来自定义工具栏。
  • 要得到当前编辑器的状态,需要设置一个状态值 state,并在改变时重新设置该状态值。
  • 在渲染时,可以将其当作一个 react 组件对待,和其它组件一样使用就可以了。

示例代码

完整示例代码如下:

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

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

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

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

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

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

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

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

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

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

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

总结

本篇文章介绍了如何使用 ncdai-draft-js-toolbar,包括安装、使用和定制。同时也提到了一些注意事项和示例代码,希望对大家有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055af481e8991b448d89e9

纠错
反馈