Vue3 使用bytemd掘金同款markdown

• 官方介绍
• 官网

安装依赖

yarn add bytemd
复制代码

安装插件

yarn add @bytemd/plugin-breaks
yarn add @bytemd/plugin-footnotes
yarn add @bytemd/plugin-frontmatter
yarn add @bytemd/plugin-gemoji
yarn add @bytemd/plugin-gfm
yarn add @bytemd/plugin-highlight
yarn add @bytemd/plugin-medium-zoom
复制代码

bytemd组件

bytemd-vue 只支持vue2 需要自己写组件

<script setup lang="ts">
import {
  ref, onMounted, getCurrentInstance, watch,
} from 'vue';
import * as bytemd from 'bytemd';
import 'bytemd/dist/index.min.css';
import zhHans from 'bytemd/lib/locales/zh_Hans.json';
import breaks from '@bytemd/plugin-breaks';
import highlight from '@bytemd/plugin-highlight';
import footnotes from '@bytemd/plugin-footnotes';
import frontmatter from '@bytemd/plugin-frontmatter';
import gfm from '@bytemd/plugin-gfm';
import mediumZoom from '@bytemd/plugin-medium-zoom';
import gemoji from '@bytemd/plugin-gemoji';

interface ImageAttr { title: string, url: string, alt: string }

interface Props {
  value?: string,
  placeholder?: string,
  plugins?: any,
  previewDebounce?: number,
  locale?: any,
  uploadImages?: (files: [File]) => [ImageAttr],
  maxLength?: number
}

const props = withDefaults(defineProps<Props>(), {
  maxLength: undefined,
  placeholder: '',
  previewDebounce: 200,
  uploadImages: undefined,
  value: '',
  locale: zhHans,
  plugins: [
    breaks(),
    highlight(),
    footnotes(),
    frontmatter(),
    gfm(),
    mediumZoom(),
    gemoji(),
  ],
});

const emit = defineEmits<{(e: 'change', id: string): void, (e: 'update:value', id: string): void }>();
const editor = ref<bytemd.Editor>(null);
const instance = getCurrentInstance();

onMounted(() => {
  editor.value = new bytemd.Editor({
    target: instance?.subTree.el,
    props,
  });
  editor.value.$on('change', (e: { detail: { value: string; }; }) => {
    emit('change', e.detail.value);
    emit('update:value', e.detail.value);
  });
});

watch(props, (newValue) => {
  editor.value.$set(Object.fromEntries(Object.entries(newValue).filter((v) => v)));
});
</script>

<template>
  <div />
</template>
复制代码

使用组件

<script setup lang="ts">
import { ref } from 'vue';
import Editor from '@/components/editor/index.vue';

const value = ref('');
</script>

<template>
  <div>
    <Editor
      v-model:value="value"
      :max-length="maxLength"
    />
  </div>
</template>
复制代码