Skip to content

SuperLiuYinXin/mditor

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

欢迎使用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();

About

一款轻量级的markdown编辑器 ediotor for markdown

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 83.3%
  • CSS 14.7%
  • HTML 2.0%