# install dependency
npm install
# development: open devServer with HMR
npm run dev
# product: build project
npm run buildTips: the code ouput type is umd. so you can use some way. in the below
CDN:
- CSS: https://unpkg.com/cool-md-editor@version/dist/cMdEditor.css
- JS: https://unpkg.com/cool-md-editor@version/dist/cMdEditor.js
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>npm i cool-md-editor --saveconst MdEditor = require('cool-md-editor');
require('cool-md-editor/dist/cMdEditor.css');
new MdEditor({
el: document.getElementById('editor-wrap'),
defaultCon: '# default content (selectable)'
});<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 | - | - |
| 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 | - | - |
| prop | type | desc | default | select |
|---|---|---|---|---|
$editor |
Object | CoolMDEditor instance | - | - |
| otherProperty | any | same with new CodeMirror，codemirror |
- | - |
| prop | type | desc | default | select |
|---|---|---|---|---|
| all prop | any | same with new marked ，marked |
- | - |
| 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 | - |
| 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的内容 |