前言
在博客系统中,一般都需要提供一个支持 Markdown 格式的文本编辑器。但是,选择什么样的编辑器成为了我们需要考虑的一个问题。
在这里,我们推荐使用 simplemde-customize-for-blog
,这是一个基于 SimpleMDE-codemirror 所作出的一些优化,更适用于博客系统的 Markdown 文本编辑器。下面,我们就来一步步教你如何使用这款 npm 包。
安装
首先需要安装 simplemde-customize-for-blog
,可以在终端中使用以下指令完成安装:
--- ------- ----------------------------
安装完成之后,就可以愉快的使用这个编辑器了。
引入
在使用的时候,需要引入 js 和 css 文件。
------ ------------------------------------------------------ ------ -------------------------------
使用方法
使用方法跟 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