简介
@amrn/simplemde 是一个基于 Markdown 编辑器的 npm 包，它是一个简单、易于使用和灵活的编辑器，支持自定义主题和自定义渲染器。
在本教程中，我们将详细介绍如何使用 @amrn/simplemde 来创建一个完整的 MarkDown 编辑器，并包含示例代码，帮助读者更好地理解。
安装
使用 npm 安装 @amrn/simplemde ：
npm install @amrn/simplemde
使用
在项目的任何位置引入 @amrn/simplemde ：
import SimpleMDE from '@amrn/simplemde';
初始化
首先，我们需要创建一个 HTML 元素，它将用作编辑器的容器。
<div class="editor"></div>
接下来，在 JavaScript 文件中，创建 @amrn/simplemde 实例并将其应用到编辑器容器。
const simplemde = new SimpleMDE({
element: document.querySelector('.editor'),
autofocus: true
});现在我们已经成功地创建了一个 MarkDown 编辑器。
选项
@amrn/simplemde 提供了多种选项，以便根据需求进行自定义配置。以下是一些常见选项：
autofocus
这个选项设置编辑器是否应该在创建后自动聚焦。
autofocus: true
spellChecker
这个选项用于启用或禁用内置的拼写检查器。
spellChecker: true
forceSync
这个选项用于启用或禁用实时同步编辑器内容。
forceSync: true
toolbar
这个选项用于配置编辑器的工具栏。
-- -------------------- ---- -------
-------- -
-------
---------
----------
-----------------
---------------
-------
--------
--------
-------
----------
------------
-主题
@amrn/simplemde 支持多种主题，以满足不同的设计需求。要使用主题，请在 HTML 文件中引用相关的 CSS 文件。
<link rel="stylesheet" href="theme/solarized-dark.css">
然后，在创建 @amrn/simplemde 实例时添加 theme 选项以应用主题。
const simplemde = new SimpleMDE({
element: document.querySelector('.editor'),
theme: 'solarized-dark',
autofocus: true
});自定义渲染器
@amrn/simplemde 还支持自定义渲染器，以便更好地呈现特定的 Markdown 语法。
例如，以下是如何自定义渲染器以显示 YouTube 视频：
-- -------------------- ---- -------
----- --------------- - -
----- ---------
------- ------ ---------- -------- -- -
----- ------- - ----------------------------------------
-- -------- -- -------------- - -- -
----------------------- -- -
----- ------- - ---------------------------------------- ------
----- --------- - -------- ------------ ------------ ---------------------------------------------- --------------- ---------------------------
---- - ------------------- -----------
---
-
------ -----
-
--
----- --------- - --- -----------
-------- ----------------------------------
---------- -----
---------------- -
-------------- -
--------- --- ----------------------------------------------
-
-
---现在，当我们在编辑器中插入 {youtube:VIDEO_ID} 语法时，它将自动渲染 YouTube 视频。
示例代码
下面是一个完整的 HTML 文件，包含如何创建 @amrn/simplemde 编辑器，以及如何使用主题和自定义渲染器：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ----------------
----- ---------------- ----------------------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------------------------
-------
------
---- ---------------------
------- -----------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
--------
----- --------------- - -
----- ---------
------- ------ ---------- -------- -- -
----- ------- - ----------------------------------------
-- -------- -- -------------- - -- -
----------------------- -- -
----- ------- - ---------------------------------------- ------
----- --------- - -------- ------------ ------------ ---------------------------------------------- --------------- ---------------------------
---- - ------------------- -----------
---
-
------ -----
-
--
----- --------- - --- -----------
-------- ----------------------------------
------ -----------------
---------- -----
---------------- -
-------------- -
--------- --- ----------------------------------------------
-
--
-------- -
-------
---------
----------
-----------------
---------------
-------
--------
--------
-------
----------
------------
-
---
---------
-------
-------总结
@amrn/simplemde 是一个有用的 npm 包，为我们提供了一个灵活、易于使用和可自定义的 Markdown 编辑器。通过本教程，我们学习了如何使用主题和自定义渲染器，以及如何使用选项来自定义编辑器的配置。
希望本文对你有所帮助，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600570ba81e8991b448e7fdc