mdpress-editor

A simple markdown editor base monaco-editor and markdown-it

Features

• Code highlighting. by highlight.js or shiki
• Code Group support
• Custom Container support
• KateX support
• Mermaid support
• plantuml support
• flowchart support
• Swiper support
• Qrcode support
• github emoji support
• toc support
• include a remote markdown file
• Multi theme support, theme from juejin-markdown-themes
• export md, html, png files
• export Markmap support
• XLSX File view by x-spreadsheet and sheetjs
• support custom toolbar
• Prettier format support
• dark model support

Install

NPM

npm i mdpress-editor
#or
yarn add mdpress-editor

CDN

<link rel="stylesheet" href="https://unpkg.com/mdpress-editor/index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/mdpress-editor/dist/mdpress-editor.min.js"></script>

Notes

• highlight.js is external you need:

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>

• It contains a large number of plugins

Considering the size of the packaging, so some plugin packages require you to dynamically register them

• monaco-editor
• Prettier
• shiki
• Swiper
• Mermaid
• Qrcode
• ....

When using these plugins, you need to inject the necessary plugin packages

require(['vs/editor/editor.main'], function() {
    registerMonaco(monaco);
});

prettier.prettierPlugins = prettierPlugins;
registerPrettier(prettier);
...

• The icons from iconfont

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4227162_sk4bdegrdn.css" crossorigin="anonymous">

Code highlighting

Built in highlight.js as a Code highlighting tool. If you like shiki, you can register shiki as a Code highlighting tool

Themes

It is a standalone folder that requires you to manually copy when used in the project

you can:

• copy from node-moudules/mdress-editor/theme
• set theme url from cdn url when create MDEditor

Code format by Prettier

<script src="./lib/prettier/standalone.js"></script>
<script src="./lib/prettier/plugins/acorn.js"></script>
<!-- <script src="./lib/prettier/plugins/angular.js"></script> -->
<script src="./lib/prettier/plugins/babel.js"></script>
<script src="./lib/prettier/plugins/estree.js"></script>
<!-- <script src="./lib/prettier/plugins/flow.js"></script> -->
<!-- <script src="./lib/prettier/plugins/glimmer.js"></script> -->
<!-- <script src="./lib/prettier/plugins/graphql.js"></script> -->
<script src="./lib/prettier/plugins/html.js"></script>
<script src="./lib/prettier/plugins/markdown.js"></script>
<!-- <script src="./lib/prettier/plugins/meriyah.js"></script> -->
<script src="./lib/prettier/plugins/postcss.js"></script>
<script src="./lib/prettier/plugins/typescript.js"></script>
<!-- <script src="./lib/prettier/plugins/yaml.js"></script> -->

more info for prettier in browser

Use

import 'mdpress-editor/index.css';
import {
    showLoading,
    hideLoading
} from 'mdpress-editor';

or

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/mdpress-editor/dist/mdpress-editor.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/mdpress-editor/index.css">

<script>
    mdpress.registerMonaco(window.monaco);
    mdpress.showLoading();
    mdpress.hideLoading();
    ...
</script>

API

getMarkdownIt

get markdown-it instance

import {
    getMarkdownIt
} from 'mdpress-editor';
const md = getMarkdownIt();
md.use( /**you plugin**/ );

themes

all theme list

import 'mdpress-editor/index.css';
import {
    themes
} from 'mdpress-editor';
console.log(themes);

showLoading

hideLoading

import {
    showLoading,
    hideLoading
} from 'mdpress-editor';

registerMonaco

monaco-editor

     require(['vs/editor/editor.main'], function() {
         registerMonaco(window.monaco);
     });

registerShikiHighlighter

shiki

 shiki
     .getHighlighter({
         theme: 'material-theme-palenight',
         langs: languages
     })
     .then(highlighter => {
         registerShikiHighlighter(highlighter);
     });

registerPrettier

Prettier

 prettier.prettierPlugins = prettierPlugins;
 registerPrettier(prettier);

registerSwiper

Swiper

   registerSwiper(Swiper);

registerQRCode

Qrcode

registerQRCode(QRCode);

registerMermaid

Mermaid

registerMermaid(mermaid);

registerXLSX

sheetjs

registerXLSX(XLSX);

registerX_spreadsheet

x-spreadsheet

registerX_spreadsheet(x_spreadsheet);

registerFlowChart

• flowchart

registerFlowChart(flowchart);

MDEditor

Editor Core Object

constructor

import {
    showLoading,
    hideLoading,
    MDEditor
} from 'mdpress-editor';

const mdEditor = new MDEditor(dom, {
    preview: true, //open preview model
    theme: 'vitepress',
    dark: false,
    themeURL: './../theme/', //theme files path
    themeCache: true, //open theme cache
    tocOpen: false, //open toc
    emojiURL: 'https://cdn.jsdelivr.net/npm/@emoji-mart/data',
    //monaco config
    monacoOptions: {
        language: 'markdown',
        value: '',
        automaticLayout: true
    },
    prettierOptions: {
        tabWidth: 4
    }
})

methods

• setValue(value)

   mdEditor.setValue('# hello \n ');

• getValue()
• getSelectText()

   const [range, text] = mdEditor.getSelectText();

• getSelectRange()

   const [starRange, endRange] = mdEditor.getSelectRange();

• getCurrentRange()

   const [range] = mdEditor.getCurrentRange();

• getIcons()

  const icons = mdEditor.getIcons();

• isPreview()
• isFullScreen()
• isToc()
• isDark()
• getContainer() get eidtor container
• getEditor() get monaco editor

   const monacoEditor = mdEditor.getEditor();
   monacoEditor.executeEdits('', [{
       range,
       text
   }]);

• setTheme()

  mdEditor.setTheme('vitepress');

• getTheme()
• openPreview()
• closePreview()
• openFullScreen()
• closeFullScreen()
• openToc()
• closeToc()
• openDark()
• closeDark()

events

• openfullscreen
• closefullscreen
• openpreview
• closepreview
• themechange
• opentoc
• closetoc
• opendark
• closedark
• paste

mdEditor.on('paste', e => {
    console.log(e);
    let files = e.clipboardData.files || [];
})

you can listen paste for get files for upload images or other files

ToolIcon

the icon for toolbar

constructor

const icon = new ToolIcon({
    icon: 'icon-zitijiacu', //iconfont icon name
    title: '加粗',
    className: '', //custom className
    position: 'left' //the postion,left or right
});
icon.on('click', e => {
    console.log(e);
    const mdEditor = e.target.getEditor();
});
icon.addTo(mdEditor);

methods

• getDom()
• on(event, handler)

icon.on('click', e => {
    console.log(e);
})

• getEditor()
• addTo(mdEditor)
• remove()
• show()
• hide()
• isVisible()

example

custom a toolicon for upload markdown file

  function customIcons() {
      const data = {
          icon: 'icon-file-markdown1',
          title: '我是自定义按钮-导入markdown',
          className: 'red'
      }
      const icon = new ToolIcon(data);
      icon.addTo(mEditor);
      icon.on('click', () => {
          const parseMd = (file) => {
              const fileRender = new FileReader();
              fileRender.onload = () => {
                  if (mEditor && fileRender.result) {
                      mEditor.setValue(fileRender.result);
                  }
              };
              fileRender.readAsText(file);
          };
          const inputFile = document.createElement('input');
          inputFile.type = 'file';
          inputFile.accept = '.md';
          inputFile.addEventListener('change', () => {
              if (inputFile.files.length) {
                  parseMd(inputFile.files[0]);
              } else {
                  alert('没有发现上传文件');
              }
          });
          inputFile.click();
      })

  }