Markdown编辑器

使用md-editor-v3 文档 开发

提示

仔细看了看，发现这个，目前看来不需要二次封装；原因如下：

1. 应用场景并不太多；
2. 官方md-editor-v3文档 足够仔细；简单的实现，代码量并不算大
3. 导致打包的文件体积增大，并且多了很多依赖项，都需要打包进去

我自己写了一份代码实现，仅供参考

安装

#选择一个你喜欢的包管理器

#yarn
yarn add md-editor-v3
#npm
npm install md-editor-v3
#pnpm
pnpm install md-editor-v3

toolbar.ts文件

import type { ToolbarNames } from 'md-editor-v3'

export const defaultToolbar: ToolbarNames[] = [
  'bold',
  'underline',
  'italic',
  'strikeThrough',
  '-',
  'title',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'task',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  '-',
  'revoke',
  'next',
  'prettier',
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
  'catalog'
]

*.vue文件

<template>
  <MdEditor :toolbars="toolbar" ref="MdEditorRef" v-model="value" :theme="theme" v-bind="$attrs" />
</template>
<script lang="ts">
export default {
  name: 'YsMdEditor'
}
</script>
<script lang="ts" setup>
import { ref } from 'vue'
import { useVModel } from '@vueuse/core'
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { defaultToolbar } from './toolbar'
import type { ToolbarNames } from 'md-editor-v3'

// 详细参数，readme内有详细介绍，这个里面，可能有漏调的，请谅解，
export interface MdEditorTypes {
  modelValue: string // Markdown编辑器绑定的值
  toolbar: ToolbarNames[] // 工具栏
  theme?: 'light' | 'dark' // 支持默认和暗夜模式两种
}

const emits = defineEmits(['update:modelValue'])

const props = withDefaults(defineProps<MdEditorTypes>(), {
  // 表单绑定的数据
  modelValue: 'Hello Md-Editor!',
  theme: 'dark',
  toolbar: () => {
    return defaultToolbar
  }
})
const value = useVModel(props, 'modelValue', emits)

const MdEditorRef = ref()
</script>