Cool-md-editor NPM

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

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            // 是否为 `编辑图标` 组.
}