cool-md-editor
v1.3.0
Published
a markedown editor width webpack & codemirror & marked & highlight
Downloads
48
Readme
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 buildUse Method
Tips: the code ouput type is umd. so you can use some way. in the below
Method 1: <script> Element
CDN:
- CSS: https://unpkg.com/cool-md-editor@version/dist/coolMdEditor.css
- JS: https://unpkg.com/cool-md-editor@version/dist/coolMdEditor.js
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 --saveconst 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的内容|