前言
在博客系统中，一般都需要提供一个支持 Markdown 格式的文本编辑器。但是，选择什么样的编辑器成为了我们需要考虑的一个问题。
在这里，我们推荐使用 simplemde-customize-for-blog ，这是一个基于 SimpleMDE-codemirror 所作出的一些优化，更适用于博客系统的 Markdown 文本编辑器。下面，我们就来一步步教你如何使用这款 npm 包。
安装
首先需要安装 simplemde-customize-for-blog，可以在终端中使用以下指令完成安装：
npm install simplemde-customize-for-blog
安装完成之后，就可以愉快的使用这个编辑器了。
引入
在使用的时候，需要引入 js 和 css 文件。
import 'simplemde-customize-for-blog/dist/simplemde.min.css'; import 'simplemde-customize-for-blog';
使用方法
使用方法跟 SimpleMDE 不同的是，simplemde-customize-for-blog 的传入参数 options 需要在初始化时就传入。
-- -------------------- ---- ------- --- ------ - --- ----------- -------- ------------------------------------ ------------- ------ ----------- ----- --------- - -------- ----- ---------- ---------------- -- ---------------- - ----------------- ------ ----------------------- ----- -- ----------------- ----------------- -- -- ---- --- ---展开代码
优化内容
simplemde-customize-for-blog 在 SimpleMDE 的基础上进行了进一步的优化，下面简单介绍一下。
改进常用格式快捷键
Ctrl + B：加粗Ctrl + I：斜体Ctrl + Alt + U：下划线Ctrl + Alt + S：删除线Ctrl + Q：引用
优化行内代码块
默认情况下，SimpleMDE 使用键盘上方的 ` 符号作为行内代码的标记，但是在博客系统中，我们更希望使用键盘上方的单引号或双引号作为标记，这样可以方便引用其他文件名。
因此，simplemde-customize-for-blog 默认修改了行内代码的标记为单引号。
支持插入链接自动添加 'http://' 前缀
在 SimpleMDE 中，插入链接时需要全面粘贴链接，如果没有添加 'http://'，可能会导致链接失效。
而 simplemde-customize-for-blog 默认支持插入链接时自动添加 'http://' 前缀，提高了编辑效率。
支持拖拽图片
在博客编辑时我们可能需要插入图片，simplemde-customize-for-blog 默认支持拖拽图片，完成插入图片操作。
支持上传图片
除了拖拽图片，我们还需要支持通过文件夹选择文件的方法上传图片。
simplemde-customize-for-blog 优化后支持通过 choose file 上传图片，无需进入图片管理器。
示例代码
下面是一个简单的示例代码，让你了解如何使用 simplemde-customize-for-blog。
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------------------------- ----- ---------------- ------------------------------------------------------------------------ ------- ------------------------------------------------------------------------------- ------- ------ --------- ----------------------- -------- ----- --------- - --- ----------- -------- ---------------------------------- ------------- ------ ------- ------ ----------- ----- ---------------- - ----------------- ------ ----------------------- ---- -- --------- - -------- ----- ---------- ---------------- -- -------- -- -------------- - ----- ------------ - --------------- ---- ----------------- ------ --------------- ----- ----- ----- -------------- ------ ---- ------ ------ - - ------ - - ------ - ---- -------- - -------- - -------- ---- ---- - ---- - ---- ---- ---- - ---- - ---- ------ -- ----------- ---- -------- ----- ----- ----- ------ --- -- ------ --- ---- -------- --- ---- -------- -------- ---- -------- ----- ------ ------ ------- ----- ----- -------------- ------ ------ ---------- ---- ---- ------------ ---- ---- ----- ---- ---- ------------ ---- --- - --- --------- ------- -------展开代码
结语
simplemde-customize-for-blog 取代了 SimpleMDE，成为更适合博客系统的 Markdown 格式文本编辑器。在这片文章中，我们详细介绍了它的安装和使用方法，并且解释了它的一些优化特性。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b881e8991b448dff84
