2.4

<template>

  <Editor

    :value="value"

    :mode="mode"

    :plugins="plugins"

    @change="handleChange"

  />

</template>

<script setup lang="ts">

import gfm from "@bytemd/plugin-gfm";

import hightlight from "@bytemd/plugin-highlight";

import { Editor, Viewer } from "@bytemd/vue-next";

import { ref } from "vue";

import { defineProps, withDefaults } from "vue";

// 暴露给父组件的接口,提高复用性

interface Props {

  value: string;

  mode?: string;

  handleChange: (v: string) => void;

}

const plugins = [

  gfm(),

  // Add more plugins here

  hightlight(),

];

const props = withDefaults(defineProps<Props>(), {

  value: "",

  mode: () => "split",

  handleChange: (v: string) => {

    console.log(v);

  },

});

</script>

<style>

.bytemd-toolbar-icon.bytemd-tippy.bytemd-tippy-right:last-child {

  display: none;

}

</style>