npm 包 react-markdown-preview-editor 使用教程

阅读时长 4 分钟读完

介绍

react-markdown-preview-editor 是一个基于 React 的 Markdown 编辑器,它可以将 Markdown 转换为 HTML 并实时预览。您可以使用它来编辑和预览 Markdown 文本,以便在您的项目中引入 Markdown 格式的文本编辑功能。

安装

通过 npm 安装:

用法

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

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

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

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

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

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

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

该组件接受两个属性:

  • value:Markdown 文本,必须是字符串类型。
  • onChange:Markdown 文本发生改变时所触发的函数,可以用来更新 state 中的 Markdown 文本。

示例代码

下面是一个完整的示例代码。请注意,为了便于阅读,没有添加样式。

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

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

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

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

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

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

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

在这个示例中,我们将 react-markdown-preview-editor 和 marked 库一起使用,将 Markdown 转换为 HTML 并实时预览。这个示例展示了如何将 Markdown 输入与预览结合到一个 React 组件中。

结论

react-markdown-preview-editor 是一个非常有用的 npm 包,可以帮助您在项目中快速实现 Markdown 编辑器。希望这篇文章能够帮助您更好地使用它,以及在开发中提高您的生产力。

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

纠错
反馈

纠错反馈