Markdown Editor built on Vue

This is a fork of the original project

What this fork adds

This fork adds the possibility to use any custom component as a toolbar button. For example, we can obtain a customized toolbar like the one below:

by using a toolbar config like this:

const customToolbar = {
  myButton: {
    title: 'Options',
    slot: true, // this tells the editor to render the button using our custom template
    preventNativeClick: false, // this allows elements like a select to work correctly
  },
  my2ndButton: {
    title: 'Settings',
    slot: true,
    action() {
      // you can still define the onClick action via the usual function
      console.log('opening the settings..');
    },
  },
};

Then we can provide custom templates for myButton and my2ndButton, like this:

<v-md-editor
  v-model="text"
  height="500px"
  :toolbar="customToolbar"
  left-toolbar="undo redo | myButton my2ndButton"
>
  <template #myButton>
    <select name="opts">
      <option value="opt1">
        option 1
      </option>
      <option value="opt2">
        option 2
      </option>
    </select>
  </template>
  <template #my2ndButton>
    <img
      src="https://www.svgrepo.com/show/131974/settings.svg"
      intrinsicsize="512 x 512"
      width="16"
      height="16"
      srcset="https://www.svgrepo.com/show/131974/settings.svg 4x"
      alt="Settings SVG Vector"
    >
  </template>
</v-md-editor>

Links

• Demo
• Documentation
• 中文文档
• Changelog

Communication

qq group: 798884474

Install

# 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

Quick Start

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

Quick Start In 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);

Usage

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

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

Usage Composition Api

<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>

Sponsor

Paypal

PayPal.Me

Alipay 支付宝

WeChat Pay 微信

Reference

• ElementUi Utils clickoutside
• ElementUi Utils resize-event
• ElementUi Utils scrollbar-width
• ElementUi Scrollbar Component
• vuepress-plugin-container
• vuepress markdown preWrapper
• vuepress markdown link
• markdown-it-katex
• markdown-it-table-of-contents
• markdown-it-task-lists

License

MIT