pandao editor.md 学习笔记

• 底层使用了marked和CodeMirror，marked是一个比较底层的markdown编辑器和解析器，CodeMirror提供代码高亮。

• 使用时需引入editormd的css、js，引入editormd的js代码依赖jquery，因此也要提前引入jquery。

• 简单使用：

      //第一个参数为挂载点的ID，第二个为配置选项对象
  	var editor = editormd("editor", {
          	//默认挂载点占满容器
              // width: "100%",
              // height: "100%",
              // markdown: "xxxx",     //动态设置markdonw
              path : "editor.md/lib/"  //editormd依赖库的位置
          });
  

  editormd会在挂载点内生成一个隐藏的textarea，用于存储markdown。如果挂载时已提供，则用于初始化，会被markdown选项覆盖。

  如果挂载点含有textarea，editormd会获取该元素值，来初始化。请保证textarea不可见。就算textarea不存在，editormd也会自动生成，并保存

• 与vue整合

• 有用的选项：

  • width、height：默认100%
  • path：editor.md依赖库所在目录，在它的lib目录下。需要配置好。

• editormd实例的一些方法：

  • .gotoLine(Number)跳转某一个行
  • .show() 和 .hide()：显示或隐藏
  • .getMarkdown()：得到markdown
  • .getHTML()：得到html
  • .watch() 和 .unwatch()：双栏或单栏书写
  • .previewing()：预览
  • .fullsreen()：全屏
  • .showToolbar()和.hideToolbar()：显示或隐藏工具栏
  • TOC：？？

• 表单取值：可在editormd包裹一层form，将内置的textarea中的markdown发送给服务器。甚至开启一个保存html的textarea。但是，我觉得用处不大。

• 仅显示HTML：传入markdown，但仅显示HTML，不编辑。

  editormd.markdownToHTML("editorID",options);
  

  需要存在markdown选项。可用的方法有：.getMarkdown()。。。其他的不知道了

• 其他：还有其他强大的功能，如自定义键盘快捷键、自定义样式等等，以后再来。

• 文件上传：配置与返回结果要求如图片上传示例所示。但要注意的是，后端接收的参数名固定死了，为editormd-image-file。

参考

• pandao/editor.md

• 例子