编辑排版 | 宋大狮
平台运营 | 小唐狮
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 [email protected]
2、yarn命令
yarn add [email protected]
二、配置
编写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 -