cool-md-editor

a markedown editor width webpack & codemirror & marked & highlight

Usage no npm install needed!

<script type="module">
  import coolMdEditor from 'https://cdn.skypack.dev/cool-md-editor';
</script>

README

A Markdown Editor build with codemirror & marked & hightlight.js & webpack

live-demo 中文文档

command

# install dependency
npm install

# development: open devServer with HMR
npm run devServer

# product: build project
npm run build

Use Method

Tips: the code ouput type is umd. so you can use some way. in the below

Method 1: <script> Element

CDN:

example

<head>
  ...
  <link href="coolMdEditor.css" rel="stylesheet">
</head>
<body>
  <div class="cool-md-editor-wrap editor-theme-light" id="editor-wrap1"></div>
  <div class="cool-md-editor-wrap editor-theme-dark" id="editor-wrap2"></div>

  <script src="coolMdEditor.js"></script>
  <script>
    const mdEditor1 = new CoolMDEditor.default({
      el: document.getElementById('editor-wrap1'),
      defaultCon: '# default content (selectable)'
    });

    const mdEditor2 = new CoolMDEditor.default({
      el: document.getElementById('editor-wrap2'),
      defaultCon: '# default content (selectable)'
    });
  </script>
</body>

Method 2: npm

npm i cool-md-editor --save

const MdEditor = require('cool-md-editor');
require('cool-md-editor/dist/coolMdEditor.css');

new MdEditor({
  el: document.getElementById('editor-wrap'),
  defaultCon: '# default content (selectable)'
});

Notice

init config

<div class="cool-md-editor-wrap editor-theme-light" id="editor-wrap"></div>

Tips: className .cool-md-editor-wrap required, Theme: .editor-theme-light & .editor-theme-dark .

const coolMDEditor = new CoolMDEditor({
  el: editor Element,
  defaultCon: '# default content (selectable)'
});

|prop|type|desc|default|select| |--|--|--|:--:|:--:| |el| htmlElement | required, Editor Element| - | - | |defaultCon|String|selectable, default content. markdown string| - | - |

CoolMDEditor instance property

|prop|type|desc|default|select| |--|--|--|:--:|:--:| |$codemirror| CodeMirror instance | CodeMirror instance | - | - | | $marked| marked instance | marked instance | - | - | | $status | Object | editor status | - | - | | _options | Object | Cool-MD-Editor config | - | - |

$codemirror property

|prop|type|desc|default|select| |--|--|--|:--:|:--:| | $editor | Object | CoolMDEditor instance | - | - | | otherProperty | any | same with new CodeMirror，codemirror | - | - |

$marked property

|prop|type|desc|default|select| |--|--|--|:--:|:--:| | all prop | any | same with new marked ，marked | - | - |

$status property

|prop|type|desc|default|select| |--|--|--|:--:|:--:| | isFullscreen | Boolean | is fullScreen, fullScreen: true | false| - | | isThemeLight | Boolean | Theme light, only support light and dark theme ，base base16 | true| - |

_options property

|prop|type|desc|default|select| |--|--|--|:--:|:--:| | el | HTMLElement | editor dom element| - | - | | $tools | Object | 工具条类名(图标)、title、和绑定的事件等| - | - | | lang | Object | 编辑器的语言内容 | 中文语言(zh) | - | | editor | Object | 编辑器实例对象 | - | - |

TIPS: $tools 结构像下面这样

{
  name: 'heading',             // 名称
  action: toggleHeading,       // 绑定的回调函数
  className: 'icon-heading',   // 类名
  title: 'Heading',            // 标题(会翻译为当前使用的语言) 
  default: true,               // 是否是默认显示的
  index: 2,                    // 所在组的索引。目前有两大组: `编辑图标` `浏览器设置`。两组使用不同的索引
  isEditTools: true            // 是否为 `编辑图标` 组.
}

编辑器实例对象方法

|方法名|说明|参数|返回值| |--|--|--|:--:| |getMDValue|获取当前Markdown的内容|-|当前Markdown的内容|

参考资料