md-editor-v3

English | 中文

Markdown editor for vue3, developed in jsx and typescript.

• Documentation and example：Go

• Use it online：Go

• The same series editor for react：md-editor-rt

Features

• Toolbar, screenfull or screenfull in web pages and so on.
• Themes, Built-in default and dark themes.
• Shortcut key for editor.
• Beautify your content by prettier(only for markdown content, not the code and other text).
• Multi-language, build-in Chinese and English(default: Chinese).
• Upload picture, paste or clip the picture and upload it.
• Render article directly(no editor, no event listener, only preview content).
• Preview themes, support defalut、vuepress、github styles(not identical).
• mermaid(>=1.8.0).
• katex mathematical formula（>=1.9.0）.

Preview

Default theme	Dark theme	Preview only

Apis

Props

mark and emoji extensions

[toolbars]

[
  'bold',
  'underline',
  'italic',
  '-',
  'strikeThrough',
  'title',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'mermaid',
  'katex',
  '-',
  'revoke',
  'next',
  'save',
  '=',
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
  'catalog',
  'github'
];

After v1.6.0, You can sort the toolbar as you like, split tools by '-', the left and right toolbars are divided by '='！

After v1.10.0, you can customize the toolbar. To display them, put index of defToolbars into toolbars(this is not standard), for more usage, please refer todocs.

Expand language, you need to replace all the content here：

[StaticTextDefaultValue]

export interface ToolbarTips {
  bold?: string;
  underline?: string;
  italic?: string;
  strikeThrough?: string;
  title?: string;
  sub?: string;
  sup?: string;
  quote?: string;
  unorderedList?: string;
  orderedList?: string;
  codeRow?: string;
  code?: string;
  link?: string;
  image?: string;
  table?: string;
  mermaid?: string;
  katex?: string;
  revoke?: string;
  next?: string;
  save?: string;
  prettier?: string;
  pageFullscreen?: string;
  fullscreen?: string;
  catalog?: string;
  preview?: string;
  htmlPreview?: string;
  github?: string;
  '-'?: string;
  '='?: string;
}

export interface StaticTextDefaultValue {
  // Toolbar hover tips(html title)
  toolbarTips?: ToolbarTips;
  // h1-h6 dropdown menu item
  titleItem?: {
    h1?: string;
    h2?: string;
    h3?: string;
    h4?: string;
    h5?: string;
    h6?: string;
  };
  // v1.6.0
  imgTitleItem?: {
    link: string;
    upload: string;
    clip2upload: string;
  };
  // The modal tips of add link or upload picture
  linkModalTips?: {
    title?: string;
    descLable?: string;
    descLablePlaceHolder?: string;
    urlLable?: string;
    UrlLablePlaceHolder?: string;
    buttonOK?: string;
  };
  // The modal tips of clip the picture, v1.2.0
  clipModalTips?: {
    title?: string;
    buttonUpload?: string;
  };
  // Copy code tips, v1.1.4
  copyCode?: {
    text?: string;
    tips?: string;
  };
  // 1.8.0
  mermaid?: {
    flow?: string;
    sequence?: string;
    gantt?: string;
    class?: string;
    state?: string;
    pie?: string;
    relationship?: string;
    journey?: string;
  };
  // 1.9.0
  katex?: {
    // formula inline
    inline: string;
    // formula block
    block: string;
  };
}

Event

If markedHeading is overridden, be sure to tell the editor the algorithm for generating the title ID by marketheadingid.

Shortcut key

Internal components

Before 1.x, they are used as attributes of the editor component, eg: Editor.DropdownToolbar. For more examples, refer to document.

NormalToolbar

Editor.NormalToolbar

• title: string, not necessary, the tips when hover toolbar;
• trigger: string | JSX.Element, necessary, it is usually an icon, which is displayed on the toolbar;
• onClick: (e: MouseEvent) => void, necessary.

DropdownToolbar

Editor.DropdownToolbar

• title: string, not necessary, the tips when hover toolbar;
• visible: boolean, necessary;
• trigger: string | JSX.Element, necessary, it is usually an icon, which is displayed on the toolbar;
• onChange: (visible: boolean) => void, necessary;
• overlay: string | JSX.Element, necessary, contents in the drop-down box.

Catalogue

Editor.Catalog

• editorId: string, necessary, editor's editorId, used to register listening events;
• class: string, not necessary;
• markedHeadingId: MarkedHeadingId, not necessary, same as editor;
• scrollElement: string | HTMLElement, not necessary, it is an element selector when its type is string. When previewOnly eq true, it is usually set to document.documentElement.

Some examples

Jsx module

import { defineComponent, reactive } from 'vue';
import Editor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

export default defineComponent({
  setup() {
    const md = reactive({
      text: 'default markdown content'
    });
    return () => (
      <Editor hljs={hljs} modelValue={md.text} onChange={(value) => (md.text = value)} />
    );
  }
});

Vue template

<template>
  <editor v-model="text" pageFullScreen></editor>
</template>

<script>
import { defineComponent } from 'vue';
import Editor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

export default defineComponent({
  name: 'VueTemplateDemo',
  components: { Editor },
  data() {
    return {
      text: '# md-editor-v3'
    };
  }
});
</script>

Upload picture

Tips：When you paste and upload GIF, it will upload a static picture. So you should upload it by file system!

async onUploadImg(files: FileList, callback: (urls: string[]) => void) {
  const res = await Promise.all(
    Array.from(files).map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);

        axios
          .post('/api/img/upload', form, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then((res) => rev(res))
          .catch((error) => rej(error));
      });
    })
  );

  callback(res.map((item: any) => item.data.url));
}