How to use the markdown editor component in Vue3

Install
Importing components
Basic usage
How to render the saved markdown or html text on the page?

Install

# Using npm
npm i @kangc/v-md-editor@next -S

# Using yarn
yarn add @kangc/v-md-editor@next

Importing components

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

VMdEditor.use(githubTheme);

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

app.use(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 the saved markdown or html text on the page?

1. Render the saved markdown text

Method 1: If you have introduced an editor into your project. 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 functionality and only needs to render markdown text, you can only introduce the preview component for rendering. For example

// main.js
import { creatApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
// Import the theme you are using. Here we take the github theme as an example. import githubTheme from '@kangc/v-md-editor/lib/theme/github';
import '@kangc/v-md-editor/lib/theme/style/github.css';

VMdPreview.use(githubTheme);

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

app.use(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 the saved HTML text

If your project does not require editing functionality and only needs to render HTML, you can just import the preview-html component for rendering. For example:

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

// Import the style of the theme import '@kangc/v-md-editor/lib/theme/style/vuepress';

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

app.use(VMdPreviewHtml);

<template>
  <!-- preview-class is the style class name of the theme, for example, vuepress is vuepress-markdown-body -->
  <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
</template>

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

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

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

The above is the details of how to use the markdown editor component in Vue3. For more information about using the markdown editor component in Vue3, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

How to use Electron to simply create a Markdown editor
Using Vue to implement a markdown editor example code
Using simplemde to implement markdown editor in vue (adding image upload function)
Share a Markdown editor based on Ace

<<: MySQL constraint types and examples

>>: How to connect to MySQL visualization tool Navicat