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
<script>
Element
Method 1: CDN:
- CSS: https://unpkg.com/cool-md-editor@version/dist/coolMdEditor.css
- JS: https://unpkg.com/cool-md-editor@version/dist/coolMdEditor.js
example
...
Method 2: npm
npm i cool-md-editor --save
const MdEditor = ;; el: document defaultCon: '# default content (selectable)';
Notice
init config
Tips: className .cool-md-editor-wrap
required, Theme: .editor-theme-light
& .editor-theme-dark
.
const 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的内容 |