编辑排版 | 宋大狮

平台运营 | 小唐狮

ONE 问题描述

2023年2月15号记，久违了大家。

今天要和大家分享的是关于如何在项目中使用MarkDown编辑器的问题。

最近在项目中遇到一个新需求，需要编辑和展示MarkDown格式的数据。对于以往，处理多格式的数据一般都会用普通富文本编辑器，但这样并不满足客户需求，而且富文本编辑器不支持Markdown语法。

于是，我带着需求在网上找了好久，尝试多次后，才发现一款比较不错的MarkDown编辑器mavon-editor，有需要的朋友，希望看完这篇文章，对你有些许帮助。

所谓Markdown编辑器，就是像热门软件Typora那样，一种简洁、高效、易读、易写的文本编写工具。

所谓Markdown，是一种轻量级标记语言，排版语法简洁，让人们更多地关注内容本身而非排版。它使用易读易写的纯文本格式编写文档，可与HTML混编，可导出 HTML、PDF 以及本身的 .md 格式的文件。

问题：MarkDown编辑器的使用。举例用主流web端技术vue3，vue2可以此为参考。

TWO 问题解决

一、安装

1、npm命令

npm i mavon-editor@3.0.0-beta

2、yarn命令

yarn add mavon-editor@3.0.0-beta

二、配置

编写main.js文件

import mavonEditor from "mavon-editor";
import "mavon-editor/dist/css/index.css";

const app = createApp(App);
app
 .use(mavonEditor)
 .mount("#app");

三：使用

1、编辑Markdown

<!-- 模版中 -->
<mavon-editor v-model="value" />

<!-- 脚本中-->
value: "",

this.dataForm.apiDetails = this.value;

2、展示Markdown

<!-- 模版中 -->
 <mavon-editor 
 v-model="value"
 :subfield="false" 
 :defaultOpen="'preview'" 
 :toolbarsFlag="false" 
 :editable="false" 
 :scrollStyle="true" />

<!-- 脚本中-->
value: "",

this.value = this.dataForm.apiDetails;

THREE 知识盘点

一、Markdown语法大全

1、教程地址

https://markdown.com.cn/basic-syntax/headings.html

- END -