K-Pagedown 是一个适用于 React 的开源 markdown 编辑器。它核心依赖了 Pagedown 和 Showdown 两个流行的 markdown 库。通过 K-Pagedown，用户可以使用 markdown 语法快速的编辑文本，非常适合于开发者、博客作者等需要快速书写文本的场景。本文将为大家介绍 K-Pagedown 的使用方法。
安装
你可以使用 NPM 快速安装 K-Pagedown
npm install k-pagedown
或者使用 yarn 安装：
yarn add k-pagedown
导入
我们可以将 K-Pagedown 作为一个模块导入到 React 组件中。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------------- ---- -------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------- --
-
-
-------- -
------ -
---- ----------------
---------------
-------------------------
----------------- -- --------------- ------- ----- ---
--
------
--
-
-
------ ------- ----在这个例子中，我们创建了一个 App 的组件，并且导入了 MarkdownEditor。 MarkdownEditor 需要一个 value 的属性用来初始化编辑器中的值，同时还需要一个回调函数 onChange 来接受输入框的值的变化并同步到 state 中。
配置
K-Pagedown 提供了一些配置项可以让你自定义编辑器的表现形式。下面我们将会讨论一下这些配置。
options
options 用来配置编辑器的行为，它是一个对象。默认提示显示 Informatory
<MarkdownEditor
options={{
promptInfo: (info) => console.log('promptinfo', info)
}}
/>toolbar
如果你希望你的编辑器有一些工具用来帮助你更方便地编辑文本，那么你可以将 toolbar 设置为 true。它会在编辑器顶部显示一些按钮，这些按钮会让你能够更轻松地使用一些高级特性，例如插入图片，插入代码等等。
<MarkdownEditor
toolbar={true}
/>toolbarRender
当然，你可以自定义工具栏的呈现形式。如果你想要完全自定义工具栏的样式和功能，那么可以使用 toolbarRender 来实现。toolbarRender 是一个函数，它会接受一个对象参数，内含了一个 buttonGroups 属性，这个属性中包含了工具栏渲染所需要的按钮组的信息。
下面是一个自定义工具栏的例子：
-- -------------------- ---- -------
---------------
----------------- ------------ -- -- -
------ -
-----
------- ----------- -- -----------------------------------------
------------------------- -- -- -
---- --------
--------------------------- --- -- -
-------
--------
---------------------------
------------------------
-
-------------
---------
---
------
---
------
--
--
--在这个例子中，我们首先渲染了一个自定义按钮，这个按钮的 onClick 事件返回了第一个按钮组的 onClick 事件，也就是在点击这个按钮后触发了第一个按钮组中第一个按钮的点击事件。然后我们使用常规的方式渲染了其他按钮组。
结论
K-Pagedown 是一个非常适合于 React 的 Markdown 编辑器。我们可以通过更改配置或者自定义样式来实现自己所需要的编辑器样式。无论你是博客作者、开发者或者是文档编写者，K-Pagedown 都能非常好地帮助你提升工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef94c49986ca68d8722