Skip to content

Latest commit

 

History

History
165 lines (122 loc) · 5.04 KB

README.md

File metadata and controls

165 lines (122 loc) · 5.04 KB

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

live-demo 中文文档

command

# install dependency
npm install

# development: open devServer with HMR
npm run dev

# 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="https://unpkg.com/cool-md-editor@<版本号>/dist/cMdEditor.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="https://unpkg.com/cool-md-editor@<版本号>/dist/cMdEditor.js"></script>
  <script>
    const mdEditor1 = new CMdEditor.default({
      el: document.getElementById('editor-wrap1'),
      defaultCon: '# default content (selectable)'
    });

    const mdEditor2 = new CMdEditor.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/cMdEditor.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 CMdEditor({
  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的内容

参考资料