https://github.com/bh-lay/mditor
一款轻量级的markdown编辑器 ediotor for markdown
https://github.com/bh-lay/mditor
editor markdown mditor
Last synced: about 1 year ago
JSON representation
一款轻量级的markdown编辑器 ediotor for markdown
- Host: GitHub
- URL: https://github.com/bh-lay/mditor
- Owner: bh-lay
- License: mit
- Created: 2014-07-25T16:09:47.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2017-06-19T08:51:59.000Z (almost 9 years ago)
- Last Synced: 2025-02-18T19:21:29.764Z (over 1 year ago)
- Topics: editor, markdown, mditor
- Language: JavaScript
- Homepage: http://bh-lay.github.io/mditor/
- Size: 471 KB
- Stars: 88
- Watchers: 4
- Forks: 27
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
欢迎使用Mditor
======
Mditor是一款轻量级的markdown编辑器。取名自markdown + editor，用于实现页面markdown输入框的便利操作。
## 查看演示
[http://bh-lay.github.io/mditor/](http://bh-lay.github.io/mditor/)
## 常用格式及快捷键
- **加粗文字** `Ctrl + B`
- *斜体文字* `Ctrl + I`
- [链接文字](http://bh-lay.com/) `Ctrl + L`
- 图片 `Ctrl + G`
- `code` `Ctrl + Shift + K`
- 代码块 `Ctrl + K`：
``` javascript
/**
* 检测是否为数字
* 兼容字符类数字 '23'
*/
function isNum(ipt){
return (ipt !== '') && (ipt == +ipt) ? true : false;
}
```
---------
## 如何使用
### 第一步、页面内放置待使用的文本域textarea
```html
……
```
### 第二步、引入jQuery和Mditor，并初始化，
注：因为后续Mditor会逐渐脱离对jQuery的依赖，参数请使用原生dom对象，而非jQuery对象。
```html
//获取textarea dom对象
var ele_textarea = document.getElementById('md_editor');
//实例化Mditor
var editor = new mditor(ele_textarea);
```
## 高级操作
为了保证编辑、发布的显示效果一致，需要按照对应站点文章样式的css来展示编辑时的效果，默认显示效果class为`article`，可参照下面定义方式更改类名。
### 一、实例化Mditor时，可以传入自定义参数
```javascript
var editor = new mditor(document.getElementById('md_editor'),{
//自定义显示效果class
previewClass : 'article'
});
```
### 二、可以通过javascript对实例化后的Mditor进行操作，如：
```javascript
//获取转换后的html
editor.getHtml();
//获取markdown格式内容
editor.getContent();
//插入内容
editor.insert('**挤啊挤**')
//进入预览界面
editor.preview();
//返回编辑界面
editor.edit();
```