How to use markdown editor component in Vue3

Install

# Use npmnpm i @kangc/v-md-editor@next -S

# Use yarnyarn add @kangc/v-md-editor@next

Introducing components

import { creatApp } from 'vue';
import VMdEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/';
import githubTheme from '@kangc/v-md-editor/lib/theme/';
import '@kangc/v-md-editor/lib/theme/style/';

(githubTheme);

const app = creatApp(/*...*/);

(VMdEditor);

Basic usage

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
import { ref } from 'vue';

export default {
  setup () {
    const text = ref('');
    
    return {
      text
    }
  }
}
</script>

How to render saved markdown or html text on the page?

1. Render the saved markdown text

Method 1: If your project has an editor introduced. You can render directly using the editor's preview mode. For example

<template>
  <v-md-editor :value="markdown" mode="preview"></v-md-editor>
</template>

<script>
import { ref } from 'vue';

export default {
  setup () {
    const markdown = ref('');
    
    return {
      markdown
    }
  }
}
</script>

Method 2: If your project does not require editing functions, you only need to render markdown text. You can only introduce the preview component to render. For example

// 
import { creatApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/';
// Introduce the topic you are using Here we take the github topic as an exampleimport githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/';

(githubTheme);

const app = creatApp(/*...*/);

(VMdPreview);

<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

<script>
import { ref } from 'vue';

export default {
  setup () {
    const markdown = ref('');
    
    return {
      markdown
    }
  }
}
</script>

2. Render saved html text

If your project does not require editing, you only need to render html You can just introduce the preview-html component to render. For example:

// 
import { creatApp } from 'vue';
import VMdPreviewHtml from '@kangc/v-md-editor/lib/preview-html';
import '@kangc/v-md-editor/lib/style/';

// Introduce styles to use themesimport '@kangc/v-md-editor/lib/theme/style/vuepress';

const app = creatApp(/*...*/);

(VMdPreviewHtml);

&lt;template&gt;
  &lt;!-- preview-class Style class name for theme，For examplevuepressthat isvuepress-markdown-body --&gt;
  &lt;v-md-preview-html :html="html" preview-class="vuepress-markdown-body"&gt;&lt;/v-md-preview-html&gt;
&lt;/template&gt;

&lt;script&gt;
import { ref } from 'vue';

export default {
  setup () {
    const html = ref('&lt;div data-v-md-line="1"&gt;&lt;h1 align="center"&gt;Markdown Editor built on Vue&lt;/h1&gt;');
    
    return {
      html
    }
  },
};
&lt;/script&gt;

For more advanced usage, refer to the official documentation:v-md-editor

The above is the detailed content of how to use the markdown editor component in Vue3. For more information about using the markdown editor component in Vue3, please follow my other related articles!