简易Markdownd编辑器

wb26 9年前

 

使用

预览MDEditor | MDEditor for Github

  • 添加MDEditor.min.css样式

  • 添加MDEditor.min.js并不是 ~~lib/MDEditor.js~~ 哦

  • 添加编辑器初始节点

  • 如果预加载长篇markdown文本必须嵌套<textarea>标签

<link rel="stylesheet" type="text/css" href="../themes/default/css/MDEditor.min.css">  <script type="text/javascript" src="../build/MDEditor.min.js"></script>  <div id="mdeditor">  <textarea># 这里放markdown初始值  - id: 节点id  - minheight: 初始化编辑器高度  - maxheight: 编辑器随着输入内容增多而变高,这个值是它的最大值  - value: 默认编辑器中显示markdown内容  </textarea>  </div>  <script type="text/javascript">  var mde = new MDEditor({    id:"#mdeditor",    minheight:300,    maxheight:600,    value:"#多多少少的"  }).load().input(function(evn,opts){    console.log("evn:",evn)    console.log("opts:",opts)  })  </script>

MDEditor初始化

  • id: 节点id

  • minheight: 初始化编辑器高度

  • maxheight: 编辑器随着输入内容增多而变高,这个值是它的最大值

  • value: 默认编辑器中显示markdown内容

load

加载编辑器

mde.load() 

preview

默认展示预览界面

mde.preview()

input

输入事件,在编辑器里面输入内容就会执行input方法

mde.input(function(evn,opts){      console.log("evn:",evn)      console.log("opts:",opts)  })

getMD

获取markdown的字符串

mde.getMD() //=>返回markdown字符串

setMD

设置markdown的字符串

mde.setMD(val)

getHTML

获取生成的HTML

mde.getMD() //=>返回HTML字符串

setHTML

设置预览的HTML

mde.setHTML(val)