likes
comments
collection
share

使用mavon-editor插件构建markdown编辑器

作者站长头像
站长
· 阅读数 9

写在前面

mavon-editor 是我目前用过vue中最好用的markdown编辑器插件，页面设计好看，拓展性高，功能强大，支持所见即所得。

目前mavon-editor已经支持vue3，尽管还是beta版本，但也可以用了。

安装和使用 Vue3.0版本

vue3已经发布很久了，关于mavon-editor vue2版本的笔记网上已经有很多了，新的笔记肯定要用新的vue3来实现了

github.com/hinesboy/ma…

$ npm install mavon-editor@next --save

可以进行全局注册组件，或者局部注册：

<mavon-editor v-model="content"/>

// 全局注册
import { createApp } from 'vue'

import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css' // 样式记得导入喔

// use
createApp(App).use(mavonEditor).mount('#app')

// 注册组件，这里使用得是 script setup 语法，其他注册语法可以参考：
// https://github.com/hinesboy/mavonEditor/blob/next/doc/cn/use.md

<script lang="ts" setup>
	import { mavonEditor } from 'mavon-editor'
	import 'mavon-editor/dist/css/index.css'
</script>

组件常用属性

mavon-editor中提供了很多属性，大多数属性使用默认值即可，这里只说明一些常用或特殊一点的值：

  • value（v-model）

    编辑器的默认内容，通过v-model可以实现数据的双向绑定。

  • navigation

    编辑器的侧边导航栏，默认为false，开启后会在预览的右侧展示一个导航列表，markdown内容中的标题（#）会出现在导航区域。

    但是这个侧边栏是会遮挡到内容，所以用的时候需要注意一下，避免破坏用户体验。

    使用mavon-editor插件构建markdown编辑器

  • codeStyle

    mavon-editor的中可以配置代码高亮的主题，如果你还不喜欢默认的代码高亮，可以通过配置来修改，可选主题非常丰富：可配置主题

  • subfield

    默认开启分栏模式，也就是左侧编辑，右侧实时预览。

    当设置为false时，根据属性 defaultOpen 判定显示的编辑还是预览窗口

  • defaultOpen

    默认值为空，允许设置为 edit编辑模式和preview预览模式

  • editable

    是否可以编辑内容，默认为true

  • toolbarsFlag

    设置工具栏目是否显示，默认为true

预览模式

写完一篇markdown后可以通过组件的预览模式渲染出来给别人预览，而想要达到预览效果，需要设置几个属性搭配起来才能完成：

<mavon-editor 
    v-model="content" 
    navigation 
    defaultOpen="preview" 
    :toolbarsFlag="false" 
    :editable="false"
    :subfield="false"
/>

通过 subfield 关闭双栏，defaultOpen 单栏显示预览内容， editable 禁止输入，toolbarsFlag 隐藏工具栏 ，最后 navigation 可选配置是否展示侧边导航

工具栏配置

mavon-editor的工具栏大多数都是可以使用默认配置的，有一些特殊的可能会修改。

如何配置

给组件传入 toolbars 属性即可，但是传入的toolbars配置并不会和默认的toolbars合并，而是直接使用传进来的值。

<!-- 只显示了三个工具 -->
<mavon-editor 
    v-model="content"
    toolbars="{
         bold: true, // 粗体
         italic: true,// 斜体
         header: true,// 标题
    }"
/>

这会导致一个问题：如何我只想关闭一个工具，其他使用默认的怎么办呢？

获取默认值

虽然文档上没写，但是我还是找到了获取工具栏默认的方式：

import { mavonEditor } from 'mavon-editor'

// 获取工具栏配置的默认值
mavonEditor.props.toolbars.default()

只想关闭一个工具栏时，就可以这样做：

<mavon-editor 
    v-model="content"
    :toolbars="toolbars"
/>

import { mavonEditor } from 'mavon-editor'

// 获取工具栏配置的默认值
const toolbars = Object.assign(mavonEditor.props.toolbars.default(), {
	navigation: false // 关闭 侧边导航工具
})

可配置项

这里是复制插件文档的菜单配置项，可能会存在插件更新后的差异，建议移步官网：github.com/hinesboy/ma…

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, // 预览
 }

事件

mavon-editor提供的事件同样很多，不过常用的只有几个：

  • save 保存时触发

    触发的方式有两种，一是点击工具栏的保存按钮，二是快捷键 Ctrl + S

  • imgAdd 编辑器插入图片的时候触发。 我们知道markdown语法中显示一张图片，是通过图片的链接去展示的，并不能直接嵌入一张图片，但一般人使用markdown语法很少会用到图床之类的概念，所以mavon-editor提供两种方法插入图片：markdown图片链接、上传图片

    这里imgAdd事件是指后者上传图片的时候触发的：

    使用mavon-editor插件构建markdown编辑器

    还有一种情况会触发：直接粘贴一张图片到编辑区，这是很常用的功能。

实现图片上传

上面说到图片上传会触发imgAdd事件，通过imgAdd事件可以让我们拿到文件上传到服务器后再显示出来：

<mavon-editor 
    v-model="content"
    ref="mavonEditorRef"
    @imgAdd="imgAdd"
/>

```js
<script setup>
import {ref} from 'vue'
import m, { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

const mavonEditorRef = ref() // 获取编辑器Vue实例子

function imgAdd(name, $file) {
    // 第一步.将图片上传到服务器.
   var formdata = new FormData();
   formdata.append('image', $file);
   
   axios({
       url: 'server url',
       method: 'post',
       data: formdata,
       headers: { 'Content-Type': 'multipart/form-data' },
   }).then((url) => {
       // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
       mavonEditorRef.$img2Url(name, url);
   })
}