需求分析

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

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

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

markdown編輯器調(diào)研

經(jīng)過查找和對比，發(fā)現(xiàn)editor.md是一款開源的markdown編輯器，非常的不錯，實例豐富，使用比較簡單。

editor.md 經(jīng)過實際測試，發(fā)現(xiàn)幾個小問題:

自定義工具欄

添加自己需要的內(nèi)容非常有幫助

無法快速移動光標(biāo)到文檔尾

如果文檔比較大，想要移動到文檔尾部，比較麻煩

無法上傳圖片

需要配置服務(wù)端php才能支持

無法復(fù)制粘貼圖片進行上傳

這個功能非常的有用

在線markdown文檔編輯器

打造在線markdown編輯器

自定義工具欄

增加如下三個配置，即可在工具欄增加html代碼

toolbarIcons : function() {

var toolBarIconArray=editormd.toolbarModes["full"];

toolBarIconArray.push("aboutus");

return toolBarIconArray;

},

自定義html代碼

toolbarCustomIcons : {

aboutus :"交流Q群:1142802013 "

},

editor.md 快速移動光標(biāo)

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

editormd.js 中增加gfirst,glast

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

添加描述信息，鼠標(biāo)放上去時的說明

toolbar: {

undo: "撤銷（Ctrl+Z）",

redo: "重做（Ctrl+Y）",

gfirst: "回到頂端",

glast: "到底端",

bold: "粗體",

圖標(biāo)的定義

toolbarIconsClass: {

undo: "fa-undo",

redo: "fa-repeat",

gfirst: "fa-arrow-up",

glast: "fa-arrow-down",

bold: "fa-bold",

具體實現(xiàn)功能代碼

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的函數(shù)，但這樣總報錯，最終發(fā)現(xiàn)cm下的函數(shù)應(yīng)該是 \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/';

// 創(chuàng)建images 目錄

if (!file_exists($savePath)) mkdir($savePath);

$savePath = $savePath . $_time.DIRECTORY_SEPARATOR;

// 創(chuàng)建月份 目錄

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讀取剪切板圖片 上傳到服務(wù)器

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版本以下 復(fù)制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頁面 即可實現(xiàn)功能，目前確認(rèn)chrome和火狐是可以支持的，可以使用微信、QQ、win7 自帶截圖 進行截圖復(fù)制，在頁面上直接粘貼

最終打造的markdown在線文檔編輯器

官方QQ交流

如大家有問題，歡迎加入官方交流Q群討論

原文鏈接:https://www.cnblogs.com/maoguan/p/13643358.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的python在线编辑器最新_Editor.md 二次开发-markdown在线编辑器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。