前言
在前端开发中，我们经常需要在项目中使用文本编辑器。而 simplemde 是一个轻量级的基于 Markdown 的文本编辑器，功能强大且使用简单。在 simplemde 的基础上，shine-ren 在其上进行了二次封装，并发布了 npm 包 simplemde-shine-ren，使得在项目中使用 simplemde 变得更加容易和方便。
本文将详细介绍如何使用 simplemde-shine-ren。
安装
使用 npm 或 yarn 安装 simplemde-shine-ren：
npm install simplemde-shine-ren
或者
yarn add simplemde-shine-ren
使用
安装完成后，在项目中引入 simplemde-shine-ren：
import SimpleMDE from "simplemde-shine-ren"; import "simplemde-shine-ren/dist/simplemde.min.css";
接下来就可以在项目中使用 SimpleMDE 了：
const simplemde = new SimpleMDE({
element: document.getElementById("my-textarea")
});通过以上代码，simplemde 就可以应用在页面的 id 为 my-textarea 的 textarea 上了。
配置
simplemde 的相关配置选项可以通过传递一个对象参数进行配置。例如：
-- -------------------- ---- -------
----- --------- - --- -----------
-------- ---------------------------------------
------------- ------
-------- -
-------
---------
----------
----
--------
-----------------
---------------
----
-------
--------
----
----------
-------------
-------
-
---以上代码禁用了拼写检查，并且对工具栏做了相应修改，只包含了常用的功能按钮。
完整的配置选项，请参考 SimpleMDE 的文档。
示例
下面是一个简单的例子，演示了 simplemde 在页面中的应用：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
-------------------------- ----------
----- ---------------- ------------------------------------------------------------------------------ --
-------
---------- -
---------- ------
------- - -----
-
--------
-------
------
---- ------------------
--------- ----------------------------
------
------- --------------------------------------------------------------------------------------
--------
----- --------- - --- -----------
-------- ---------------------------------------
------------- ------
-------- -
-------
---------
----------
----
--------
-----------------
---------------
----
-------
--------
----
----------
-------------
-------
-
---
---------
-------
-------在页面中，你将看到一个 textarea 和一个简单的工具栏。可以使用工具栏中的按钮来编辑 textarea 中的文本，同时还可以在 textarea 中按下 Ctrl+Shift+M 回车键来进行编辑器的全屏模式。
结语
simplemde-shine-ren 简化了在项目中使用 simplemde 的过程，同时也为我们提供了更加自由的配置选项。希望以上介绍和示例能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a4781e8991b448d7e79