Mdpress-editor NPM

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

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

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

  }