npm 包 react-mark-editor 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 Markdown 是一种快速创建文档的方式，而通过 react-mark-editor 包，我们可以让用户在页面上进行 Markdown 文本编辑，使得整个过程更加便捷和高效。下面，我们将介绍如何安装和使用 react-mark-editor 包。

安装

在 React 项目中使用 npm 安装 react-mark-editor 只需在项目根目录下运行以下命令：

npm install react-mark-editor --save

使用教程

安装完成后，通过以下步骤将 react-mark-editor 集成到您的项目中：

导入要使用的库
```
import ReactMarkEditor from 'react-mark-editor';
import 'react-mark-editor/dist/index.css';
```
ReactMarkEditor 是一个 React 组件，用于显示 Markdown 编辑器，而'react-mark-editor/dist/index.css';是默认的样式文件，用于设置样式。
添加代码到你的 JSX 渲染中
```
function App() {
  return (
    <div className="App">
      <ReactMarkEditor onChange={this.handleChange} />
    </div>
  );
}
```
在 JSX 渲染中，将 ReactMarkEditor 作为一个 JSX 元素嵌入到渲染视图中，并将 onChange 事件处理程序传递给 ReactMarkEditor 组件，以监听编写的 Markdown 文本的更改。
处理 Markdown 文本更改的事件处理程序
```
handleChange = (markdown) => {
  console.log(markdown);
};
```
在事件处理程序中，对 Markdown 的更改进行处理，例如更新相应的状态或将其发送到后端。

至此，您已成功将 react-mark-editor 集成到 React 项目中。

示例代码

下面，我们以一个简单的 React-Mark-Editor 示例为例，来展示如何使用 react-mark-editor 包。

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

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

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

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

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

我们使用 ReactMarkEditor 组件创建 Markdown 编辑器，通过接收 onChange 事件与 handleChange 事件处理程序一起使用，以获取编写的 Markdown 文本并更新状态。要查看编写的 Markdown 文本的渲染效果，我们使用了marked 库中的dangerouslySetInnerHTML 属性来在 JSX 元素中呈现 HTML。

总的来说，React-Mark-Editor 是在 React 项目中使用 Markdown 编辑器的便捷解决方案，可以帮助我们更快速、更有效地创建文档。

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