Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

md-editor-v3

Package Overview
Dependencies
Maintainers
1
Versions
282
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

md-editor-v3

Markdown editor for vue3, developed by jsx and typescript, dark theme、beautify content by prettier、render articles directly、paste or clip the picture and upload it...

  • 1.7.3
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.2K
decreased by-3.65%
Maintainers
1
Weekly downloads
 
Created
Source

md-editor-v3

English | 中文

Markdown editor for vue3, developed by jsx and typescript.

  • Documentation and demo: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 defalutvuepressgithub styles(not identical).

More features are developing, if you have some ideas or find issues, please tell it to me~

Preview

Default themeDark themePreview only

Apis

Props

nametypedefaultdescription
modelValueString''Markdown content,use v-model in vue template
theme'light' | 'dark''light'Change editor theme
editorClassString''
hljsObjectnullHighlight instance, editor will not insert script of it, but you need to import highlight code style by yourself
highlightJsStringhighlight.js@11.2.0HighlightJs url
highlightCssStringatom-one-dark@11.2.0Highlight code style
historyLengthNumber10The max length of history(if it is too big, editor will use more RAM)
pageFullScreenBooleanfalseScreenfull in web page
previewBooleantruePreview content in editor
htmlPreviewBooleanfalsePreview html in editor
previewOnlyv1.3.0BooleanfalseOnly render article content, no toolbar, no edit area
languageString'zh-CN'Build-in language('zh-CN','en-US')
languageUserDefinedv1.5.0 changedObject{key: StaticTextDefaultValue}Expand language,update language api to your key
toolbarsArray[toolbars]Show some item of toolbars,all keyssee toolbars below
toolbarsExcludev1.1.4Array[]Don't show some item of toolbars,all keystoolbars
prettierBooleantrueUse prettier to beautify content or not
prettierCDNStringstandalone@2.4.0
prettierMDCDNStringparser-markdown@2.4.0
cropperCssv1.2.0Stringcropper.min.css@1.5.12Cropper css url
cropperJsv1.2.0Stringcropper.min.js@1.5.12Cropper js url
iconfontJsv1.3.2StringiconfontIcon url
editorIdv1.6.4 updatedStringmd-editor-v3Editor id, also the html id, it is used when there are more than two editors
tabWidthv1.4.0Number2One tab eq some space
showCodeRowNumberv1.4.3BooleanfalseShow row number for code block or not
screenfullv1.4.3ObjectnullScreenfull instance, editor will not insert script of it
screenfullJs<v1.4.3Stringscreenfull@5.1.0Screenfull js url
previewThemev1.4.3'default' | 'github' | 'vuepress''default'Preview themes
stylev1.7.0CSSProperties{}Editor's inline style

[toolbars]

[
  'bold',
  'underline',
  'italic',
  '-',
  'strikeThrough',
  'title',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  '-',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  '-',
  '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 '='

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

[StaticTextDefaultValue]

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

Event

nameparamsdescription
onChangev:StringContent changed event(bind to oninput of textarea)
onSavev:StringSave Content event,ctrl+sand click button will trigger
onUploadImgfiles:FileList, callback:FunctionUpload picture event,when picture is uploading the modal will not close,please provide right urls to the callback function
onHtmlChangedh:StringCompile markdown successful event,you can use it to get the html code
onGetCatalogv1.4.0list: HeadList[]Get catalogue of article
markedHeadingv1.6.0text: string,level: 1-6,raw: string, slugger: Sluggermarked head renderer methods
markedHeadingIdv1.7.0(text: string, level: number) => stringtitle ID generator

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

Shortcut key

keyfunctiondescriptionsupport
TABinsert spaceInsert space, the length eq tabWidth, default: 2, support multilinev1.4.0
SHIFT + TABdelete space, setting is the same as Tabv1.4.0
CTRL + CcopyWhen selected, copy the selected content. When not selected, copy the content of the current linev1.4.0
CTRL + XshearWhen selected, cut the selected content. When not selected, cut the current linev1.4.0
CTRL + DdeleteWhen selected, delete the selected content. When not selected, delete the current linev1.4.0
CTRL + SsaveTrigger onSave eventv1.0.0
CTRL + Bbold text**bold**v1.0.0
CTRL + Uunderline<u>underline</u>v1.0.0
CTRL + Iitalic*italic*v1.0.0
CTRL + 1-6h1-h6# titlev1.0.0
CTRL + ↑superscript<sup>superscript</sup>v1.0.0
CTRL + ↓subscript<sub>subscript</sub>v1.0.0
CTRL + Qquote> quotev1.0.0
CTRL + Oordered list1. ordered listv1.0.0
CTRL + Llink[link](https://github.com/imzbf/md-editor-v3)v1.0.0
CTRL + ZwithdrawWithdraw history in editor, not the function of systemv1.0.0
CTRL + SHIFT + Sline-through~line-through~v1.0.0
CTRL + SHIFT + Uunordered list- unordered listv1.0.0
CTRL + SHIFT + Ccode blockv1.0.0
CTRL + SHIFT + Ipicture![picture](https://imbf.cc)v1.0.0
CTRL + SHIFT + ZforwardForward history in editor, not the function of systemv1.0.0
CTRL + SHIFT + FBeautifyv1.0.0
CTRL + ALT + Ccode rowv1.0.0
CTRL + SHIFT + ALT + Ttable|table|v1.4.0

Simple demo

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

Keywords

FAQs

Package last updated on 03 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc