cool-md-editor
v1.3.0
Published
a markedown editor width webpack & codemirror & marked & highlight
Downloads
19
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 build
Use 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 --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 // 是否为 `编辑图标` 组.
}
编辑器实例对象方法
|方法名|说明|参数|返回值| |--|--|--|:--:| |getMDValue|获取当前Markdown的内容|-|当前Markdown的内容|