最近开始频繁尝试着如火如荼的Vue3，于是开始对之前随手写的Ant Design后台下手了，准备使用Vue3 + Element Plus 重构一波，但是之前用来写博客文章的MD编辑器还不适配Vue3，于是只好赶紧找了一个替代工具，用了一下感觉还不错，非常适合个人快速开发属于自己的编辑器。

快速开始

1
2
3
4
5
# 使用 npm
npm i @kangc/v-md-editor@next -S

# 使用 yarn
yarn add @kangc/v-md-editor@next

引入配置

在入口文件处配置 （如 main.ts ）

1
2
import VMdEditor from '@kangc/v-md-editor'
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js' // 主题

引入代码高亮：

1
2
3
4
5
6
7
8
// import hljs from 'highlight.js' // 引入全部
import hljs from 'highlight.js/lib/core'
import json from 'highlight.js/lib/languages/json'
import javascript from 'highlight.js/lib/languages/javascript'
import typescript from 'highlight.js/lib/languages/typescript'
hljs.registerLanguage('json', json)
hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('typescript', typescript)

highlightjs 全部代码高亮支持文档 -> Github

1
2
3
4
5
6
VMdEditor.use(githubTheme, {
  Hljs: hljs,
})
app.....
  .use(VMdEditor) // 富文本编辑器
  .mount('#app')

在需要使用插件的页面文件中引入样式文件 (如果多处使用也可以在 main.ts 直接引入)

1
2
import '@kangc/v-md-editor/lib/style/base-editor.css'
import '@kangc/v-md-editor/lib/theme/style/github.css'

图片上传

默认不带图片上传的功能，写入一个参数及回调即可开启:

1
<v-md-editor ...... :disabled-menus="[]" @upload-image="handleUploadImage" />

在回调函数中即可拿到上传图片的File文件，截图粘贴也是可以触发回调的:

1
2
3
4
5
6
7
8
const handleUploadImage = (event: any, insertImage: any, files: File) => {
      // TODO: 在这里将二进制文件上传到服务器
      Notification.success('图片上传成功')
      // 通过回调中的 insertImage 向文本输入图片地址
      insertImage({
        url: '', // 服务器上传成功后的图片url
      })
    }

自动保存

自动保存的实现是利用定时器，做一个节流调取保存方法。

image.png

有两种实现方式：

1. watch

1
2
3
4
5
6
7
8
9
10
11
12
watch: {
    content (val) {
      // 无操作10秒后自动保存
      if (this.updateTimer) {
            clearTimeout(this.updateTimer)
        }
        this.updateTimer = setTimeout(() => {
            this.save()
            this.updateTimer = null
        }, 10000)
    }
  }

2. md插件自带的回调

1
<v-md-editor ..... @change="textChange" />

image.png

1
2
3
4
5
6
7
8
9
10
11
// 自动保存
let updateTimer: any = undefined
const textChange = () => {
  if (updateTimer) {
    clearTimeout(updateTimer)
  }
  updateTimer = setTimeout(() => {
    save(true)
    updateTimer = undefined
  }, 10000)
}

效果预览

vue2 旧版 vue3 重构
image.png image.png