0.32.0 • Published 4 months ago

mdpress-editor v0.32.0

Weekly downloads
-
License
ISC
Repository
github
Last release
4 months ago

mdpress-editor

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

Features

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

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

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

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',
    //if you need offline,you can config your iconfont url
    iconfontURL: '//at.alicdn.com/t/c/font_4227162_4oipkq7kqoo.css',
    //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);
})
  • getMDEditor()
  • 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();
      })

  }
0.32.0

4 months ago

0.30.2

5 months ago

0.30.1

5 months ago

0.30.0

5 months ago

0.29.0

7 months ago

0.31.2

4 months ago

0.31.1

4 months ago

0.31.0

5 months ago

0.28.1

8 months ago

0.28.0

8 months ago

0.20.1

1 year ago

0.20.0

1 year ago

0.19.0

1 year ago

0.19.1

1 year ago

0.13.1

1 year ago

0.15.0

1 year ago

0.15.1

1 year ago

0.17.0

1 year ago

0.15.2

1 year ago

0.27.2

1 year ago

0.27.1

1 year ago

0.27.0

1 year ago

0.25.0

1 year ago

0.23.0

1 year ago

0.21.2

1 year ago

0.21.1

1 year ago

0.27.5

1 year ago

0.27.4

1 year ago

0.27.3

1 year ago

0.21.0

1 year ago

0.18.1

1 year ago

0.18.2

1 year ago

0.18.3

1 year ago

0.14.0

1 year ago

0.14.1

1 year ago

0.16.0

1 year ago

0.14.2

1 year ago

0.16.1

1 year ago

0.14.3

1 year ago

0.18.0

1 year ago

0.26.3

1 year ago

0.26.2

1 year ago

0.26.1

1 year ago

0.26.0

1 year ago

0.24.2

1 year ago

0.24.1

1 year ago

0.24.0

1 year ago

0.22.2

1 year ago

0.22.1

1 year ago

0.20.3

1 year ago

0.22.0

1 year ago

0.20.2

1 year ago

0.26.6

1 year ago

0.26.5

1 year ago

0.26.4

1 year ago

0.13.0

1 year ago

0.12.5

1 year ago

0.12.4

1 year ago

0.12.3

1 year ago

0.12.2

1 year ago

0.12.1

1 year ago

0.12.0

1 year ago

0.11.0

1 year ago

0.10.2

1 year ago

0.10.1

1 year ago

0.10.0

1 year ago

0.9.1

1 year ago

0.9.0

1 year ago

0.8.0

1 year ago

0.7.0

1 year ago

0.6.3

1 year ago

0.6.2

1 year ago

0.6.1

1 year ago

0.6.0

1 year ago

0.4.0

1 year ago

0.3.0

1 year ago

0.2.1

1 year ago

0.2.0

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago