@kangc/v-md-editor Documentation

The v-md-editor package provides two different ways to handle the editing area. Choose based on your project's resource constraints and user experience requirements:

1. Base Editor: Uses a standard HTML textarea. It is lightweight but offers a basic editing experience.
2. CodeMirror: Uses the CodeMirror library for the editing area. It provides a superior, feature-rich editing experience but increases the bundle size and resource usage.

To enable the ability to quickly copy code blocks using buttons, you must import and register the createCopyCodePlugin with the VueMarkdownEditor instance using the .use() method.

import VueMarkdownEditor from '@kangc/v-md-editor';
import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';

VueMarkdownEditor.use(createCopyCodePlugin());

To use the Tip plugin in your Vue project, you must register it with the VueMarkdownEditor instance using createTipPlugin(). This plugin adds support for tip-style components within the editor.

import VueMarkdownEditor from '@kangc/v-md-editor';
import createTipPlugin from '@kangc/v-md-editor/lib/plugins/tip/index';

VueMarkdownEditor.use(createTipPlugin());

To add emoji support to the editor, you must register the emoji plugin using VueMarkdownEditor.use(). You need to import the main editor package and the specific emoji plugin factory function from @kangc/v-md-editor/lib/plugins/emoji/index.

import VueMarkdownEditor from '@kangc/v-md-editor';
import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';

VueMarkdownEditor.use(createEmojiPlugin());

After adding the CDN resources, import the createKatexPlugin from the @kangc/v-md-editor/lib/plugins/katex/cdn path and register it with your VueMarkdownEditor instance using .use().

import VueMarkdownEditor from '@kangc/v-md-editor';
import createKatexPlugin from '@kangc/v-md-editor/lib/plugins/katex/cdn';

VueMarkdownEditor.use(createKatexPlugin());

If your project only needs to display markdown without editing capabilities, you can import only the preview component and its associated styles to reduce bundle size. You must also provide a theme (e.g., github).

// 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. Take the github theme as an example here
import githubTheme from '@kangc/v-md-editor/lib/theme/github';

VMdPreview.use(githubTheme);
Vue.use(VMdPreview);

<template>
  <v-md-preview :text="markdown"></v-md-preview>
</template>

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

By default, the theme package only supports a limited set of languages (markup, html, xml, svg, mathml, css, clike, javascript) to keep the package size small. To support additional languages, you must import the corresponding PrismJS language packs after calling VueMarkdownEditor.use(vuepressTheme). If you import them before, the highlighting will not take effect.

import VueMarkdownEditor from '@kangc/v-md-editor';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
// Introduce prism language packs as needed, here is json as an example
import 'prismjs/components/prism-json';

VueMarkdownEditor.use(vuepressTheme);

To use the CodeMirror-based editor instead of the default editor, you must import the specific codemirror-editor module, its corresponding CSS, and a theme. You then need to register the theme with VMdEditor.use() and register the editor plugin with Vue using Vue.use().

import Vue from 'vue';
import VMdEditor from '@kangc/v-md-editor/lib/codemirror-editor';
import '@kangc/v-md-editor/lib/style/codemirror-editor.css';
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';

VMdEditor.use(githubTheme);

Vue.use(VMdEditor);

You can customize the XSS (Cross-Site Scripting) protection by extending the default whitelist using VMdEditor.xss.extend. This allows you to permit specific HTML tags or attributes that are otherwise stripped by the default security filter. The configuration object follows the schema used by the xss library.

import VMdEditor from '@kangc/v-md-editor';

VMdEditor.xss.extend({
  // extend white list
  whiteList: {
    source: [],
  },
});