需求分析

經常需要在網絡論壇發布文章進行宣傳良心工作室最新免費服務，但每個論壇的編寫格式存在差異，給發布帶來了很大的障礙。

最近markdown格式的興起，給廣大發布者帶來了福音，一種文檔格式大部分網站都支持，一次編寫即可在多個論壇上發布。

如何在線編寫markdown就成為一種需求。

markdown編輯器調研

經過查找和對比，發現editor.md是一款開源的markdown編輯器，非常的不錯，實例豐富，使用比較簡單。

editor.md 經過實際測試，發現幾個小問題:

自定義工具欄
添加自己需要的內容非常有幫助
無法快速移動光標到文檔尾
如果文檔比較大，想要移動到文檔尾部，比較麻煩
無法上傳圖片
需要配置服務端php才能支持
無法復制粘貼圖片進行上傳
這個功能非常的有用

在線markdown文檔編輯器

打造在線markdown編輯器

自定義工具欄

增加如下三個配置，即可在工具欄增加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 "
},

editor.md 快速移動光標

在研究editor.md功能后，發現有移動光標功能，可以指定移動光標到多少行，使用起來稍微復雜一些，需要用戶自己輸入

editormd.js 中增加gfirst,glast
full: [ "undo", "redo", "|", "gfirst", //新添加 "glast", //新添加 "|",
添加描述信息，鼠標放上去時的說明

toolbar: {
undo: "撤銷（Ctrl+Z）",
redo: "重做（Ctrl+Y）",
gfirst: "回到頂端",
glast: "到底端",
bold: "粗體",
圖標的定義

toolbarIconsClass: {
undo: "fa-undo",
redo: "fa-repeat",
gfirst: "fa-arrow-up",
glast: "fa-arrow-down",
bold: "fa-bold",
具體實現功能代碼

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'] . '/';
	//按照月份進行記錄
	$_time = date('Ym');
	//用戶是否是免費用戶 免費用戶free 付費用戶pay_token
    $savePath = $path . '../../uploads/free/';
    // 創建images 目錄
    if (!file_exists($savePath)) mkdir($savePath);
    $savePath = $savePath . $_time.DIRECTORY_SEPARATOR;

    // 創建月份 目錄
    if (!file_exists($savePath)) mkdir($savePath);

    $saveURL  = $url . 'uploads/free/'.$_time.DIRECTORY_SEPARATOR;

保存文件路徑失敗的修改
php/upload.php
$imageUploader = new EditorMdUploader($savePath, $saveURL, $formats['image'], 1, 'H_i_s');

瀏覽器js讀取剪切板圖片上傳到服務器

document.addEventListener("paste", function (e) {
    var cbd = e.clipboardData;
    var ua = window.navigator.userAgent;

    // 如果是 Safari 直接 return
    if ( !(e.clipboardData && e.clipboardData.items) ) {
        return;
    }
    
    // Mac平台下Chrome49版本以下 復制Finder中的文件的Bug Hack掉
    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
        return;
    }

    for(var i = 0; i < cbd.items.length; i++) {
        var item = cbd.items[i];
        if(item.kind == "file"){
            var blob = item.getAsFile();
            if (blob.size === 0) {
                return;
            }
			
            // blob 就是從剪切板獲得的文件 可以進行上傳或其他操作
			
			var data = new FormData();
	        data.append("blob", blob);
	        $.ajax({
				url : "php/blob_upload.php",
				type : 'POST',
				cache : false,
				data : data,
				processData : false,
				contentType : false,
				success : function(result){
				
				var   json = (typeof JSON.parse !== "undefined") ? JSON.parse(result) : eval("(" + result + ")");
					if(json.success == 1){
					   //上傳成功
					
					   testEditor.cm.replaceSelection("![](" + json.url + ")");
						
					}
				}
	        });

			
        }
    }
}, false);

將代碼放入到html頁面即可實現功能，目前確認chrome和火狐是可以支持的，可以使用微信、QQ、win7 自帶截圖進行截圖復制，在頁面上直接粘貼