介绍
@mavon-editor 是一个开源 Markdown 编辑器，支持快捷键、主题编辑、实时预览等功能，同时支持 Vue3。该库的作者为 TaiFe。
安装
@mavon-editor 可通过 npm 安装：
npm install @tai-fe/mavon-editor --save
快速入门
在 Vue3 项目的入口文件中引入 mavon-editor， 并在 data 中创建 markdown 字段：
-- -------------------- ---- -------
----------
-----
------------- ------------------ ------------------------------- -------------------------
----
---- -------------- --------------------
------
-----------
--------
------ ----------- ---- ----------------------
------ ------- -
---- -- -
------ -
--------- --
-
--
----------- -
-----------
--
-
---------
------ -------
------- -
------- --- ----- -----
-------- -----
-
--------配置
@mavon-editor 支持多项配置，以下为主要配置项：
markdown
markdown 的内容。
<mavon-editor v-model="markdown"></mavon-editor>
toolbars
控制工具栏是否显示。 为 false 则不显示。
<mavon-editor v-model="markdown" :toolbars="false"></mavon-editor>
subfield
是否分割预览和 markdown 编辑区域。 为 false 则不分割。
<mavon-editor v-model="markdown" :subfield="false"></mavon-editor>
defaultOpen
在编辑区域输入时触发预览窗口显示效果。
<mavon-editor v-model="markdown" :defaultOpen="true"></mavon-editor>
主题
@mavon-editor 支持设置多种主题。例如：
-- -------------------- ---- -------
------ ----------- ---- ----------------------
----------------------------
--------- ----- ----- -
-- ----- -- ----------------------- -
--- -
------ ----- ----------- ---------------------------------------------- ---- --------------------------
- ----- ---- --
-
------ ----- --------------------------------------------------------------------------------
-
--指南
@mavon-editor 的使用较为简单，可以快速引入和配置，提供了多种主题和配置，同时还支持多项插件。
示例代码
-- -------------------- ---- -------
----------
-----
------------- ------------------ ------------------------------- -------------------------
----
---- -------------- --------------------
------
-----------
--------
------ ----------- ---- ----------------------
------ ------- -
---- -- -
------ -
--------- --- ------ -------
-
--
----------- -
-----------
--
--------- -
---- -- -
------ --------------------------------------------
-
-
-
---------
------ -------
------- -
------- --- ----- -----
-------- -----
-
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5651ab1864dac66bae