vue3 markdown编辑器推荐（maven-editor & vditor & tiptap ）

最近项目需要用到markdown编辑器，使用了三种

1. maven-editor (http://www.mavoneditor.com/?spm=a2c6h.12873639.article-detail.9.aaad62affAKmTV)
2. vditor (https://b3log.org/vditor/demo/index.html?utm_source=ld246.com)
3. tiptap (https://github.com/ueberdosis/tiptap/blob/main/docs/api/commands.md#content)

经过多次的踩坑之后

优缺点分析

• 最推荐使用的是 maven-editor
• 如果想要所见即所得的效果的话 只有vditor支持，但是vditor是不支持 ==标记== x^2^
H~2~0这种的markdown语言的，有需要的可以斟酌一下
• 如果需要html内容的话 maven-editor和vditor都是可以支持的

简单用法

maven-editor

下载

npm install mavon-editor --save

引入 main.js

import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

页面中使用

基础使用

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

自定义操作框 其中@save是点击保存按钮的时候调取的函数

<mavon-editor
	ref="mavonEditorContinue"
    :toolbars="toolBar"
    v-model="continueValue"
    :ishljs="true"
     @save="saveContinue"
 />

const toolBar = ref({
  bold: true, // 粗体
  italic: true, // 斜体
  header: true, // 标题
  underline: true, // 下划线
  strikethrough: false, // 中划线
  mark: false, // 标记
  superscript: false, // 上角标
  subscript: false, // 下角标
  quote: false, // 引用
  ol: true, // 有序列表
  ul: true, // 无序列表
  link: false, // 链接
  imagelink: false, // 图片链接
  code: true, // code
  table: true, // 表格
  fullscreen: false, // 全屏编辑
  readmodel: false, // 沉浸式阅读
  htmlcode: false, // 展示html源码
  help: false, // 帮助
  /* 1.3.5 */
  undo: true, // 上一步
  redo: true, // 下一步
  trash: false, // 清空
  save: true, // 保存（触发events中的save事件）
  /* 1.4.2 */
  navigation: false, // 导航目录
  /* 2.1.8 */
  alignleft: false, // 左对齐
  aligncenter: false, // 居中
  alignright: false, // 右对齐
  /* 2.2.1 */
  subfield: false, // 单双栏模式
  preview: false // 预览
})

如果想获得html的内容怎么办

<mavon-editor
   ref="mavonEditorRef"
   v-model="testContent" 
/>

const mavonEditorRef = ref()
mavonEditorRef.value.d_render

vditor

下载

npm i vditor --save

引入

import Vditor from 'vditor'
import 'vditor/dist/index.css'

使用

<div id="vditor"></div>

这里cdn注意一下 他的不是很稳定 建议将他的包下载到本地 否则很容易出现白屏

vditor.value = new Vditor('vditor', {
    cdn: window.location.origin + '/cdn',
    mode: 'sv',
    minHeight: 200,
    // 工具栏
    toolbar: [
      'headings',
      'table',
      'bold',
      'code',
      '|',
      'ordered-list',
      'list',
      '|',
      'insert-before',
      'insert-after',
      '|',
      'undo',
      'redo',
      '|',
      {
        name: '保存',
        tip: '保存',
        icon: '',
        click() {
          markedResStr.value[ele] = vditor.value.getValue()

          vditorShow.value = false
          vditor.value?.destroy()
          //   document.getElementById('vditor').innerHTML = ''
        }
      }
    ],
    // 计数
    counter: { enable: true, type: 'text' },
    after: () => {
      if (content) {
        vditor.value.setValue(content)
      } else {
        vditor.value.setValue('')
      }
    }
  })