vue3项目中使用markdown编辑器(v-md-editor)

前言

记录一下项目中使用markdown编辑器的流程
本项目使用的是v-md-editor，它是基于 Vue 开发的 markdown 编辑器组件

基本使用

1.安装

# 使用 npm
npm i @kangc/v-md-editor@next -S

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

2. 使用

不太推荐直接在main.ts中引入，会显得整个文件特别臃肿

1. 新建plugins文件夹，里面可以放各种需要引入的第三方插件
   /plugins/mdEditor/index.ts

import VueMarkdownEditor from '@kangc/v-md-editor'
import '@kangc/v-md-editor/lib/style/base-editor.css'
//使用的是vuepress主题
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
import '@kangc/v-md-editor/lib/theme/style/vuepress.css'

import Prism from 'prismjs'

VueMarkdownEditor.use(vuepressTheme, {
    Prism,
})

export default VueMarkdownEditor

2. /plugins/index.ts

import { App } from 'vue'

import VueMarkdownEditor from './mdEditor'

const pluginList = [
    VueMarkdownEditor
    ...  // 如果有使用到别的插件，引入放在这个位置就好
]
const plugins = {
    install (app: App<Element>) {
        // 批量注册插件  改用自动引入
        Object.entries(pluginList).forEach(([, v]) => {
            app.use(v)
        })
    }
}

export default plugins

3. /main.ts

import { createApp } from 'vue'
import plugins from '@/plugins'
const app = createApp(App)
app.use(router)
    .use(plugins) // 这里使用之前引入的插件
    .use(piniaStore)
    .use(i18n)
    .use(directives)
    .mount('#app')

在ts中引入可能会遇到报错的问题
例如： Could not find a declaration file for module ‘@kangc/v-md-editor/lib/theme/vuepress.js’.

解决方法

// src/typing/shims.d.ts 
declare module '@kangc/v-md-editor/lib/theme/vuepress.js';

一定要保证此文件在tsconfig.json中有引入

4. 创建MdEditor组件
/components/MdEdtior/index.vue

<template>
    <v-md-editor
        :placeholder="placeholder"
        :disabled-menus="[]"
        v-model="newValue"
        :height="height"
        @change="handleChange">v-md-editor>
template>
<script lang="ts" setup>
import { getLang } from '@/utils/auth'
import enUS from '@kangc/v-md-editor/lib/lang/en-US'
import zhEn from '@kangc/v-md-editor/lib/lang/zh-CN'
import VueMarkdownEditor from '@kangc/v-md-editor'
const lang = getLang() === 'zh-cn' ? 'zh-CN' : 'en-US'
const langObj = getLang() === 'zh-cn' ? zhEn : enUS
VueMarkdownEditor.lang.use(lang, langObj)
// ......上面这些是多语言配置，如果用不到切换语言请忽略 ......
interface Props {
    modelValue: string
    height?: string // 编辑器的高度
    placeholder?: string
}
interface EmitEvent {
    (e: 'update:modelValue', params: string): void
}
const props = withDefaults(defineProps<Props>(), {
    height: '500px',
    placeholder: '请输入内容'
})
const emit = defineEmits<EmitEvent>()
const newValue = computed({
    get() {
        return props.modelValue
    },
    set(value: string) {
        emit('update:modelValue', value)
    }
})
// 内容变化时触发的事件。text 为输入的内容，html 为解析之后的 html 字符串。
const handleChange = (text: string, html: string) => {
    // console.log(JSON.stringify(text))
    console.log(html)
    // 如果有需要这些值，可以传回给父组件
}
script>
<style lang="scss" scoped>style>

5. 父组件使用

<template>
    <div class="p10">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>v-md-editor编辑器span>
                div>
            template>
            <md-editor v-model="text" />
        el-card>
    div>
template>
<script lang="ts" setup>
const text = ref('')
script>

6. markdown内容预览

<template>
    <v-md-editor :model-value="previewData" mode="preview">v-md-editor>
template>
<script lang="ts" setup>
const previewData = 这里是要预览的markdown数据
script>

7. 解析后的html文本预览

<template>
    <v-md-editor :model-value="previewData" mode="html">v-md-editor>
template>
<script lang="ts" setup>
const previewData = 这里是要预览的解析后的html文本
script>

页面效果

其他

更多配置，请移步v-md-editor官网