markdown在线编辑器 editor.md 二次开发详细教程

markdown在线编辑器 editor.md 二次开发

需求

经常需要在网络论坛发布文章进行宣传，但每个论坛的编写格式存在差异，给发布带来了很大的障碍。

最近markdown格式的兴起，给广大发布者带来了福音，一种文档格式大部分网站都支持，一次编写即可在多个论坛上发布。

如何在线编写markdown就成为一种需求。

markdown编辑器调研

经过查找和对比，发现editor.md是一款开源的markdown编辑器，非常的不错，实例丰富，使用比较简单。

editor.md 经过实际测试，发现几个小需求:

• 自定义工具栏
  添加自己需要的内容非常有帮助
• 无法快速移动光标到文档尾
  如果文档比较大，想要移动到文档尾部，比较麻烦
• 无法上传图片
  需要配置服务端php才能支持
• 无法复制粘贴图片进行上传
  这个功能非常的有用
• 定期保存内容到浏览器
  一旦电脑崩溃了,编写的内容就全没了

打造在线markdown编辑器

自定义工具栏

index.html文件 增加如下三个配置，即可在工具栏增加html代码

toolbarIcons : function() {
      var toolBarIconArray=editormd.toolbarModes["full"];
	toolBarIconArray.push("aboutus");
    return toolBarIconArray;
        },

自定义html代码

toolbarCustomIcons : {
            aboutus   :"<a href=\"http://u.720life.cn/s/75244496\" target=\"_blank\"  onclick=\"window.location.href='http://u.720life.cn/s/75244496'\">交流Q群:1142802013 </a>" 
        },

editor.md 快速移动光标

在研究editor.md功能后，发现有移动光标功能，可以指定移动光标到多少行，使用起来稍微复杂一些，需要用户自己输入

1.editormd.js 中增加gfirst,glast

  full: [
          "undo",
          "redo",
    	  "|",
    	  "gfirst", //新添加
    	  "glast",  //新添加
          "|",

2.添加描述信息，鼠标放上去时的说明

     toolbar: {
            undo: "撤销（Ctrl+Z）",
            redo: "重做（Ctrl+Y）",
    		gfirst: "回到顶端",
    		glast: "到底端",
            bold: "粗体",

3.图标的定义

    toolbarIconsClass: {
          undo: "fa-undo",
          redo: "fa-repeat",
    	  gfirst: "fa-arrow-up",
    	  glast: "fa-arrow-down",
          bold: "fa-bold",

4.具体实现功能代码

     editormd.toolbarHandlers = {
        undo: function() {
          this.cm.undo()
        },
        redo: function() {
          this.cm.redo()
        },
    	gfirst: function() {
    		  this.gotoLine("first")
    	},
    	glast: function() {
    		  this.gotoLine("last")
    	},

注意: 最开始以为 gotoLine是 this.cm.gotoLine的函数，但这样总报错，最终发现cm下的函数应该是 \lib\codemirror\lib\codemirror.js 下面的，因此直接写this.gotoLine即可

文件上传功能修改

• 支持绝对路径返回
  php/upload.php

	$path     = getcwd() . DIRECTORY_SEPARATOR;
	//$url      = dirname($_SERVER['PHP_SELF']) . '/';
	$url = $_SERVER["REQUEST_SCHEME"] .'://'.$_SERVER['HTTP_HOST'] . '/';</