Vue3-（五）Vue3实现集成MarkDown

本文最后更新于：April 5, 2022 am

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

如果是Vue3的，推荐第一种。（因为第二种用Vue3太难了，我太菜了。）第一种功能实现起来比较简单。也比较适合小白或新手。而且代码块是自带Mac效果，并且自带复制功能，功能太多了玩去了。我只能说用着太爽了。强烈推荐！！👍🏻

如果是Vue2的，则推荐第二种。

MdEditorV3

官网

安装

1
npm install md-editor-v3

使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div>
    <md-editor v-model="text" />
  </div>
</template>

<script>
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
export default {
  name: "index",
  components:{
    MdEditor
  },
  data(){
    return{
      text: ''
    }
  }
}
</script>

<style scoped>

</style>

更多功能，见官方文档

其中有一个需要注意的属性：editorId。默认值：md-editor-v3 。编辑器唯一标识，非必须项，当相同页面存在两个编辑器时，请务必区别该属性。

实现展示

在写好之后，进行展示。一般需要使用某解析器将其解析成html。而此插件就比较方便，只展示预览效果即可。只需要添加一个属性 previewOnly即可， 如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<template>
  <div>
    <md-editor v-model="text" previewOnly />-->
    <br>
  </div>
</template>

<script>
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
export default {
  name: "index",
  components:{
    MdEditor
  },
  data(){
    return{
      text: ''
    }
  }
}
</script>

<style scoped>

</style>

这属性的作用：作为展示，不会显示编辑框之类的。

mavon-editor

官网

Vue3安装

配置依赖

安装

这里安装需要注意的是：Vue3和Vue2的安装区别。配置一样。

1
2
npm i mavon-editor@3.0.0-beta # vue3
npm install mavon-editor -S # vue2

全局配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElIcons from '@element-plus/icons-vue'
import request from "./request/request.js";
import Vant from 'vant';
import 'vant/lib/index.css';

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'


const app = createApp(App)

for (const icname in ElIcons){
    app.component(icname,ElIcons[icname])
}
app.config.globalProperties.$http = request
app.use(ElementPlus)
app.use(router)
app.use(Vant)
app.use(store)
app.use(mavonEditor)
app.mount('#app')

简单实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    <mavon-editor v-model="form"></mavon-editor>
  </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return {
      form:''
    }
  }
}
</script>

<style scoped>

</style>

API文档

props

name 名称 type 类型 default 默认值 describe 描述
value String 初始值
language String zh-CN 语言选择，暂支持 zh-CN: 简体中文, zh-TW: 正体中文 ， en: 英文 ， fr: 法语， pt-BR: 葡萄牙语， ru: 俄语， de: 德语， ja: 日语
fontSize String 14px 编辑区域文字大小
scrollStyle Boolean true 开启滚动条样式(暂时仅支持chrome)
boxShadow Boolean true 开启边框阴影
boxShadowStyle String 0 2px 12px 0 rgba(0, 0, 0, 0.1) 边框阴影样式
transition Boolean true 是否开启过渡动画
toolbarsBackground String #ffffff 工具栏背景颜色
previewBackground String #fbfbfb 预览框背景颜色
subfield Boolean true true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)
defaultOpen String edit： 默认展示编辑区域 ， preview： 默认展示预览区域 , 其他 = edit
placeholder String 开始编辑… 输入框为空时默认提示文本
editable Boolean true 是否允许编辑
codeStyle String code-github markdown样式： 默认github, 可选配色方案
toolbarsFlag Boolean true 工具栏是否显示
navigation Boolean false 默认展示目录
shortCut Boolean true 是否启用快捷键
autofocus Boolean true 自动聚焦到文本框
ishljs Boolean true 代码高亮
imageFilter function null 图片过滤函数，参数为一个File Object，要求返回一个Boolean, true表示文件合法，false表示文件不合法
imageClick function null 图片点击事件，默认为预览，可覆盖
tabSize Number \t tab转化为几个空格，默认为\t
xssOptions Object null xss规则配置，参考 https://github.com/leizongmin/js-xss
toolbars Object 如下例 工具栏 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 /*
    默认工具栏按钮全部开启, 传入自定义对象
    例如: {
         bold: true, // 粗体
         italic: true,// 斜体
         header: true,// 标题
    }
    此时, 仅仅显示此三个功能键
 */
toolbars: {
      bold: true, // 粗体
      italic: true, // 斜体
      header: true, // 标题
      underline: true, // 下划线
      strikethrough: true, // 中划线
      mark: true, // 标记
      superscript: true, // 上角标
      subscript: true, // 下角标
      quote: true, // 引用
      ol: true, // 有序列表
      ul: true, // 无序列表
      link: true, // 链接
      imagelink: true, // 图片链接
      code: true, // code
      table: true, // 表格
      fullscreen: true, // 全屏编辑
      readmodel: true, // 沉浸式阅读
      htmlcode: true, // 展示html源码
      help: true, // 帮助
      /* 1.3.5 */
      undo: true, // 上一步
      redo: true, // 下一步
      trash: true, // 清空
      save: true, // 保存（触发events中的save事件）
      /* 1.4.2 */
      navigation: true, // 导航目录
      /* 2.1.8 */
      alignleft: true, // 左对齐
      aligncenter: true, // 居中
      alignright: true, // 右对齐
      /* 2.2.1 */
      subfield: true, // 单双栏模式
      preview: true, // 预览
  }