概述
在前端开发中，Markdown 已经成为写作文档，书写博客等的流行工具。其中，markdown 编辑器是不可缺少的一部分。
mdjs.editor 是一个基于 npm 包的 Markdown 编辑器，它提供了多种功能，使得 Markdown 文档的编写变得更加便捷。本篇文章将为你介绍如何使用 mdjs.editor。
安装
在使用前，需要先安装 mdjs.editor。你可以使用以下命令：
npm install mdjs.editor
或者使用以下命令：
yarn add mdjs.editor
在安装完成后，你可以引入 mdjs.editor：
import MdjsEditor from 'mdjs.editor';
使用
基本使用
在引入 mdjs.editor 后，你可以在你的页面或组件中使用 MdjsEditor 组件：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- --------------
-------- ----- -
----- --------- ----------- - -------------
----- ------------ - ------- -- -
------------------
--
------ -
-----
----------- --------------- ----------------------- --
------
--
-Props
MdjsEditor 组件支持以下 Props：
| 名称 | 类型 | 描述 |
|---|---|---|
| value | string | Markdown 文本 |
| onChange | (value: string) => void | Markdown 文本变更时的回调函数 |
定制化
mdjs.editor 提供了多种定制化的配置，你可以在 MdjsEditor 组件中传入 options：
<MdjsEditor value={content} onChange={handleChange} options={{ mode: 'gfm' }} />可传入的配置项如下：
| 名称 | 类型 | 描述 |
|---|---|---|
| mode | string | 编辑器模式（'gfm', 'normal' 等） |
| supportEmoji | boolean | 是否支持 emoji |
| onPaste | (text: string) => string | 粘贴内容处理函数 |
| shortcuts | object | 快捷键配置 |
示例代码
以下是一个完整的示例代码，你可以将其复制到你的项目中进行测试：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---------- ---- --------------
-------- ----- -
----- --------- ----------- - -------------
----- ------------ - ------- -- -
------------------
--
------ -
-----
----------- --------------- ----------------------- ---------- ----- ----- -- --
------
--
-
------ ------- ----
总结
本篇文章简单地介绍了 mdjs.editor 的使用教程和相关配置。在实际开发中，你可以根据自己的需求进行定制化配置，让 mdjs.editor 更好地适应你的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559de81e8991b448d7607