Markdown Editor built on Vue

安装方式

# Vue 2 use npm
npm i @kangc/v-md-editor -S
# Vue 2 use yarn
yarn add @kangc/v-md-editor

# Vue 3 use npm
npm i @kangc/v-md-editor@next -S
# Vue 3 use yarn
yarn add @kangc/v-md-editor@next

vue2 使用方法

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';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

// Prism
import Prism from 'prismjs';
// highlight code
import 'prismjs/components/prism-json';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});

Vue.use(VueMarkdownEditor);

vue3 使用方法

import { createApp } from 'vue';
import VMdEditor 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';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

// Prism
import Prism from 'prismjs';
// highlight code
import 'prismjs/components/prism-json';

VMdEditor.use(vuepressTheme, {
  Prism,
});

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

app.use(VMdEditor);

页面端使用方法

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

<script>
  export default {
    data() {
      return {
        text: '',
      };
    },
  };
</script>

其他插件用法详见 插件官网

https://github.com/code-farmer-i/vue-markdown-editor/blob/dev/README.md