一款轻量级的markdown编辑器 ediotor for markdown
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
demo.html

README.md

欢迎使用Mditor

Mditor是一款轻量级的markdown编辑器。取名自markdown + editor,用于实现页面markdown输入框的便利操作。

查看演示

http://bh-lay.github.io/mditor/

常用格式及快捷键

  • 加粗文字 Ctrl + B
  • 斜体文字 Ctrl + I
  • 链接文字 Ctrl + L
  • 图片暴漫 Ctrl + G
  • code Ctrl + Shift + K
  • 代码块 Ctrl + K
/**
 * 检测是否为数字
 * 兼容字符类数字 '23'
 */
function isNum(ipt){
	return (ipt !== '') && (ipt == +ipt) ? true : false;
}

如何使用

第一步、页面内放置待使用的文本域textarea

<textarea id="md_editor">……</textarea>

第二步、引入jQuery和Mditor,并初始化,

注:因为后续Mditor会逐渐脱离对jQuery的依赖,参数请使用原生dom对象,而非jQuery对象。

<script type="text/javascript" src="src/jquery.js"></script>
<script type="text/javascript" src="src/mditor.js"></script>
<script type="text/javascript">
  //获取textarea dom对象
  var ele_textarea = document.getElementById('md_editor');
  //实例化Mditor
  var editor = new mditor(ele_textarea);
</script>

高级操作

为了保证编辑、发布的显示效果一致,需要按照对应站点文章样式的css来展示编辑时的效果,默认显示效果class为article,可参照下面定义方式更改类名。

一、实例化Mditor时,可以传入自定义参数

var editor = new mditor(document.getElementById('md_editor'),{
  //自定义显示效果class
  previewClass : 'article'
});

二、可以通过javascript对实例化后的Mditor进行操作,如:

//获取转换后的html
editor.getHtml();

//获取markdown格式内容
editor.getContent();

//插入内容
editor.insert('**挤啊挤**')

//进入预览界面
editor.preview();

//返回编辑界面
editor.edit();