Markdown Editor
The Markdown editor allows for easy formatting of Markdown text whether the user is familiar with Markdown or not. It includes standard shortcuts such as CTRL+B
for bold, CTRL+I
for italic, and more.
Full editor
This editor supports Markdown formatting.
Max length: Unlimited
vue
<script setup>
import { ref } from "vue";
const description = ref(null)
</script>
<MarkdownEditor v-model="description" />
With options
This editor supports Markdown formatting.
Max length: 0/800
vue
<script setup>
import { ref } from "vue";
const description = ref(null)
</script>
<MarkdownEditor v-model="description" placeholder="Enter a description" max-length="800" max-height="400" />
With image upload
This editor supports Markdown formatting.
Max length: Unlimited
vue
<script setup lang="ts">
import { ref } from "vue";
const description = ref(null)
// Return a URL to the image for the editor to consume
const onImageUpload = (file: File): string => {
// Upload the file to your server and return a URL
// This example url will not work bc of proxy
// If the upload fails, throw an error and it will show as
// a Validation Error to the user
return URL.createObjectURL(file).replace("blob:", "");
};
</script>
<MarkdownEditor v-model="description" :on-image-upload="onImageUpload" />
Without heading buttons
This editor supports Markdown formatting.
Max length: Unlimited
vue
<script setup>
import { ref } from "vue";
const description = ref(null)
</script>
<MarkdownEditor v-model="description" :heading-buttons="false" />
With default value
This editor supports Markdown formatting.
Max length: Unlimited
vue
<script setup>
import { ref } from "vue";
const description = ref("Hello, world! This is a **bold** statement.");
</script>
<MardownEditor v-model="description" />
Disabled
This editor supports Markdown formatting.
Max length: Unlimited
vue
<script setup>
import { ref } from "vue";
const description = ref(null);
</script>
<MardownEditor v-model="description" disabled />