Mditor

一款轻量级的markdown编辑器

Github   下载

源码下载

https://github.com/bh-lay/mditor/archive/master.zip

欢迎使用Mditor

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

Markdown是什么

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— 维基百科

常用格式及快捷键

/**
 * 检测是否为数字
 * 兼容字符类数字 '23'
 */
function isNum(ipt){
    return (ipt !== '') && (ipt == +ipt) ? true : false;
}

快速使用

在编辑过程中，markdown格式的内容会自动更新到原始的textarea中。

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

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

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

注：参数请使用原生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>

高级操作

为了保证编辑、发布的显示效果一致，需要按照特定的文章样式来展示编辑时的效果，默认显示效果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();

使用资源

selection：处理textarea的选择与选择获取，插入字符等相关操作的小类库查看源码

marked：A markdown parser and compiler. Built for speed.查看源码