Skip to content

ACV Markdown Editor

Markdown editor component allows you to edit and preview markdown content. We use v-model binding variable to bind the markdown content.

Under the hood, it uses md-editor-v3 component.

Basic usage

  • Lv1 Heading
  • Lv2 Heading
  • Lv3 Heading
  • Lv4 Heading
  • Lv5 Heading
  • Lv6 Heading
  • Add Img Link
  • Upload Img
  • Clip Upload
Source code
vue
<script setup>
  import { ref } from 'vue';
  import AcvMarkdownEditor from '@/components/markdown-editor/markdownEditor.vue';

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

<template>
  <AcvMarkdownEditor v-model="value" />
</template>

Props

Prop nameDescriptionTypeValuesDefault
modelValuestring-
heightHeight of the MarkdownEditornumber | string-

Events

Event namePropertiesDescription
closeeventName string - The name of the event
visible string - The visibility state of the component
Triggered when the component is closed

Slots

NameDescriptionBindings
defaultThe default slot content
descriptionThe description slot content

MIT Licensed