vue markdown编辑器v-md-editor基本用法。vue实现markdown预览

vue markdown编辑器v-md-editor基本用法

安装依赖

使用npm安装：

npm i @kangc/v-md-editor -S

使用yarp安装：

yarn add @kangc/v-md-editor

添加依赖

一般都是在main.js中写

import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
VueMarkdownEditor.use(vuepressTheme);
Vue.use(VueMarkdownEditor);

使用

<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>
<script>
  export default {
    data() {
      return {
        text: '',
      };
    },
  };
</script>

vue实现markdown预览

安装依赖

使用npm安装：

npm i @kangc/v-md-editor -S

使用yarp安装：

yarn add @kangc/v-md-editor

引入

一般都是在main.js中写

import Vue from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// highlightjs
import hljs from 'highlight.js';
VMdPreview.use(githubTheme, {
  Hljs: hljs,
});
Vue.use(VMdPreview);

vue3中引入

import { createApp } from 'vue';
import VMdPreview from '@kangc/v-md-editor/lib/preview';
import '@kangc/v-md-editor/lib/style/preview.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// highlightjs
import hljs from 'highlight.js';
VMdPreview.use(githubTheme, {
  Hljs: hljs,
});
const app = createApp(/*...*/);
app.use(VMdPreview);

使用

<template>
  <v-md-preview :text="text"></v-md-preview>
</template>
<script>
export default {
  data() {
    return {
      text: '',
    };
  },
};
</script>

官方网址：http://ckang1229.gitee.io/vue-markdown-editor/zh/examples/preview-demo.html#%E9%A2%84%E8%A7%88%E7%BB%84%E4%BB%B6