npm 包 @wonism/react-milkdown 使用教程

阅读时长 5 分钟读完

@wonism/react-milkdown 是一款基于 React 和 Markdown 的富文本编辑器。它提供了简单易用的 API,同时也支持自定义渲染器和样式。

在本文中,我们将会介绍如何使用这款 npm 包来实现富文本编辑器,以及如何使用它的自定义渲染器和样式功能。我们将从以下几个方面展开:

  1. 安装和基本使用
  2. 自定义渲染器
  3. 样式

1. 安装和基本使用

首先,我们需要在项目中安装 @wonism/react-milkdown

安装完成后,我们需要在项目中引入 milkdownreact-dom

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

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

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

-------------------- --- ---------------------------------
展开代码

通过以上代码,我们已经可以在页面展示一个使用 @wonism/react-milkdown 实现的富文本编辑器,并且实时获取编辑器中的内容,方便后续处理。

2. 自定义渲染器

@wonism/react-milkdown 提供了自定义渲染器的功能,可以让我们自由地定义需渲染的 Markdown 语法所对应的 HTML 元素、属性和样式,以及自定义渲染器的处理逻辑。

我们可以通过 View 对象创建自定义渲染器:

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

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

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

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

-------------------- --- ---------------------------------
展开代码

在以上代码中,我们定义了一个名为 customView 的视图对象,并且添加了对标题 heading 的自定义渲染逻辑:将标题通过 span 标签渲染,并添加了 heading 类名。

最后,我们将 customView 对象传递到 Editor 组件的 view prop 中,即可生效。

3. 样式

自定义渲染器可以让我们自由地定义元素和样式,但是这样也会导致一些样式重复或覆盖问题。为了更好地控制样式,@wonism/react-milkdown 通过提供一个默认样式表来增加控制样式的灵活性。

我们可以通过 milkdown/style 引入默认的样式:

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

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

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

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

-------------------- --- ---------------------------------
展开代码

在以上代码中,我们通过引入 @wonism/react-milkdown/dist/style.css 来应用默认的样式表。

如果需要自定义样式,我们可以通过 CSS Modules 等方式来覆盖默认样式。

到此时,我们已经学会了 npm 包 @wonism/react-milkdown 的使用方法,希望能够对你学习和使用富文本编辑器有所帮助。若有任何问题或建议,欢迎与我交流!

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

纠错
反馈

纠错反馈