整合MarkDown编辑器

约 450 字大约 2 分钟

2025-03-12

为了方便进行文本编辑，计划封装整合一个 MarkDown 编辑器方便调用。选用ByteMD框架。

安装

npm install @bytemd/vue-next

引入

// main.ts
import 'bytemd/dist/index.css'

// @/components/MdEditor.vue
<script lang="ts" setup>
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import math from '@bytemd/plugin-math'

const plugins = [
  gfm(),
  highlight(),
  math(),
  // Add more plugins here
]

function handleChange(v: string) {
  value.value = v
}
</script>

<template>
  <Editor :value="value" :plugins="plugins" @change="handleChange" />
</template>

组件间传参

遇到了问题：父组件无法拿到子组件中的值。

解决方法：通过在父组件中定义取值方法，将更新值的方法传入子组件，并在子组件中绑定事件以达成实时更新当前的值。

父组件

<script lang="ts" setup>
function onContentChange(v: string) {
  question.value.content = v
}
</script>

<template>
  <MdEditor :handle-change="onContentChange" :value="question.content" />
</template>

子组件

<script lang="ts" setup>
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import math from '@bytemd/plugin-math'
import { defineProps, withDefaults } from 'vue'

/**
   定义组件属性类型
 */
interface Props {
  value: string
  mode?: string
  handleChange: (v: string) => void
}

/**
   给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => '',
  mode: () => 'split',
  handleChange: (v: string) => {
    console.log(v)
  },
})

const plugins = [
  gfm(),
  highlight(),
  math(),
  // Add more plugins here
]
</script>

<template>
  <Editor
    :mode="mode"
    :plugins="plugins"
    :value="value"
    @change="handleChange"
  />
</template>

还有一种组件间传参的方法：v-model：

父组件

<template>
  <MdEditor v-model:value="question.content" />
</template>

子组件

<script lang="ts" setup>
import gfm from '@bytemd/plugin-gfm'
import highlight from '@bytemd/plugin-highlight'
import math from '@bytemd/plugin-math'
import { defineEmits, defineProps, withDefaults } from 'vue'

/**
   定义组件属性类型
 */
interface Props {
  value: string
  mode?: string
  handleChange: (v: string) => void
}

/**
   给组件指定初始值
 */
const props = withDefaults(defineProps<Props>(), {
  value: () => '',
  mode: () => 'split',
})

const emit = defineEmits(['update:value'])

const plugins = [gfm(), highlight(), math()]

function handleChange(v: string) {
  emit('update:value', v)
}
</script>

<template>
  <Editor
    :mode="mode"
    :plugins="plugins"
    :value="value"
    @change="handleChange"
  />
</template>

贡献者

Cuber-Wei