介绍
Vue-mde 是一款基于 Vue.js 和 CodeMirror 的 Markdown 编辑器，易于集成和使用。本文将介绍如何使用 vue-mde 包创建 Markdown 编辑器，以及如何进行一些常见操作。
安装
使用 npm 安装 vue-mde：
npm install vue-mde --save
使用
在 Vue 组件中引入 vue-mde：
import VueMde from 'vue-mde';
export default {
components: {
VueMde,
},
};使用 VueMde 组件：
-- -------------------- ---- -------
----------
-----
-------- --------------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
--
--
--
---------通过 v-model 可以将编辑器中的内容绑定到 Vue 中的数据。
配置
vue-mde 提供了一些可配置的选项，下面是一些常用的选项：
| 选项 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| value | 绑定的值 | String | '' |
| mode | 编辑器模式 | 'gfm' | 'markdown' | ... | 'gfm' |
| toolbar | 工具栏按钮 | Array | 见示例 |
| tabSize | 缩进大小 | Number | 2 |
| lineNumbers | 是否启用行号 | Boolean | false |
| autofocus | 是否自动聚焦 | Boolean | false |
| readOnly | 是否只读 | Boolean | false |
| placeholder | 输入框占位符 | String | '' |
| minHeight | 输入框的最小高度 | String | 'auto' |
| maxHeight | 输入框的最大高度 | String | 'auto' |
示例配置：
-- -------------------- ---- -------
----------
-----
-------- --------------- ------------------ -----------------------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
-------- -
-
----- -------
----- --- ---------
------ -----
--
-
----- ---------
----- --- -----------
------ -----
--
-
----- ----------
----- --- -----------
------ -----
--
-
----- --------
----- --- ---------------
------ -----
--
-
----- -------
----- --- ---------
------ -----
--
-
----- -------
----- --- ---------
------ ------
--
-
----- --------
----- --- ----------
------ -----
--
-
----- -----------------
----- --- ------------
------ -------
--
-
----- ---------------
----- --- ------------
------ -------
--
-
----- ------------------
----- --- ----------
------ ------
--
--
--
--
--
---------以上是一个包含默认工具栏按钮和缩进大小为 2 的示例配置。
事件
vue-mde 提供了一些常见的事件，可以通过 @ 或 v-on: 的方式绑定事件：
| 事件名称 | 描述 | 参数 |
|---|---|---|
| input | 输入时触发 | 当前输入的字符串 |
| blur | 失去焦点时触发 | 无 |
| focus | 获得焦点时触发 | 无 |
| change | 内容改变时触发 | 当前输入的字符串 |
| preview | 预览时触发 | 编辑器中的 Markdown |
| fullscreen | 进入或离开全屏模式时触发 | 是否全屏 |
| insert-image | 插入图片时触发 | 图片的 base64 |
| insert-link | 插入链接时触发 | 插入链接的地址 |
| insert-code | 插入代码时触发 | 插入代码的语言 |
| insert-table | 插入表格时触发 | 无 |
| bold | 粗体按钮点击时触发 | 无 |
| italic | 斜体按钮点击时触发 | 无 |
| heading | 标题按钮点击时触发 | 标题级别 1-6 |
| quote | 引用按钮点击时触发 | 无 |
| code | 代码按钮点击时触发 | 无 |
| link | 超链接按钮点击时触发 | 无 |
| image | 图片按钮点击时触发 | 无 |
| unordered-list | 无序列表按钮点击时触发 | 无 |
| ordered-list | 有序列表按钮点击时触发 | 无 |
| horizontal-rule | 分割线按钮点击时触发 | 无 |
| fullscreen-exit | 离开全屏按钮点击时触发 | 无 |
| fullscree-enter | 进入全屏按钮点击时触发 | 无 |
| insert-link | 插入链接按钮点击时触发 | 链接地址 |
| insert-image | 插入图片按钮点击时触发 | 图片的 base64 |
| insert-code | 插入代码按钮点击时触发 | 插入代码的语言 |
| insert-table | 插入表格按钮点击时触发 | 无 |
| insert-horizontal-rule | 插入分割线按钮点击时触发 | 无 |
示例：
-- -------------------- ---- -------
----------
-----
--------
---------------
-------------------------------
---------------------------------
-----------
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
--
--
-------- -
---------------------- -
------------------
--
------------------------ -
-------------------
--
--
--
---------以上演示了如何捕获插入链接和插入图片事件，并在控制台中打印插入的链接和图片 base64。
结语
vue-mde 是一个易于使用和集成的 Markdown 编辑器，可以快速创建一个自定义的编辑器应用。本教程介绍了使用 vue-mde 的基本用法、配置选项和一些常用事件。如果您想了解更多关于 vue-mde 的信息，请查看 官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5581e8991b448e5d69