Krafters UI 1.4.7

Markdown components

Rich Text Editor and markdown parser component.

Markdown Preview

The <MarkdownPreview> component is powered by markdown-it and highlight.js.

The <MarkdownEditor> component is a wrapper for md-editor-v3.

<script setup lang="ts">
import { ref } from 'vue';
const isOpen = ref(false);
</script>

<template>
  <MarkdownEditor v-model="content" label="Markdown Editor" />
</template>

<style>
.class {
  width: 100%;
}
</style>

<template>
  <MarkdownEditor v-model="content" label="Markdown Editor" />
</template>

<div class="test">
  <span data="id" id="abc">Test</span>
</div>

.my-class {
  width: 100%;

  .nested {
    height: auto;
  }
}

Markdown Editor