Using the markdown editor in Vue 3

Time:2021-8-7

install

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

#Use yarn
yarn add @kangc/[email protected]

Introduction 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);

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 text on the page?

If an editor is introduced into your project. You can render directly using the editor’s preview mode. For example:

  1. Render markdown text

If an editor is introduced 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>
export default {
  data() {
    return {
      Markdown: '### title',
    };
  },
};
</script>

If your project does not need editing function and only needs to render markdown, you can only introduce preview component to render. For example:

// main.js
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
//Introduce the theme you use. Here, 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);
Vue.use(VMdPreview);
<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

<script>
export default {
  data() {
    return {
      Markdown: '### title',
    };
  },
};
</script>
  1. Render HTML text

If your project does not need editing function and only needs to render HTML, you can only introduce preview HTML component to render. For example:

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

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

Vue.use(VMdPreviewHtml);
<template>
  <!--  Preview class is the name of the theme style class. For example, vuepress is vuepress markdown body -- >
  <v-md-preview-html :html="html" preview-class="vuepress-markdown-body"></v-md-preview-html>
</template>

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

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

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]