preface

Vue3 has not been fully developed since its official release. At present, there are few open source Markdown editor components supporting VUE3. I recommend a very useful V-MD-Editor component with powerful functions and detailed documentation. This article only describes the common functions of components. You can refer to the official documentation for more advanced functions.

The installation

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

# to use yarn
yarn add @kangc/v-md-editor@next
Copy the code

The introduction of the component

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);
Copy the code

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>
Copy the code

How will saved Markdown or HTML text be rendered on the page?

  1. Renders the saved Markdown text

Method 1: If you have an editor in 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>
Copy the code

Method 2: If your project doesn’t need editing and just needs to render markdown text, you can just introduce the Preview component to render. 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';
The github theme is used 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);
Copy the code
<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

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

export default {
  setup () {
    const markdown = ref(' ');
    
    return {
      markdown
    }
  }
}
</script>
Copy the code
  1. Renders the saved HTML text

If your project doesn’t need editing and just needs to render HTML, you can just introduce the Preview-HTML component to render. Such as:

// 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';

// Introduce styles that use themes
import '@kangc/v-md-editor/lib/theme/style/vuepress';

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

app.use(VMdPreviewHtml);
Copy the code
<template>
  <! -- preview-class -- vuepress -- 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>
Copy the code

For more advanced uses, see the official documentation: V-MD-Editor