需求分析
經常需要在網路論壇發布文章進行宣傳良心作業室最新免費服務，但每個論壇的撰寫格式存在差異，給發布帶來了很大的障礙，
最近markdown格式的興起，給廣大發布者帶來了福音，一種檔案格式大部分網站都支持，一次撰寫即可在多個論壇上發布，
如何在線撰寫markdown就成為一種需求，
markdown編輯器調研
經過查找和對比，發現editor.md是一款開源的markdown編輯器，非常的不錯，實體豐富，使用比較簡單，
editor.md 經過實際測驗，發現幾個小問題:
- 自定義工具列
添加自己需要的內容非常有幫助 - 無法快速移動游標到檔案尾
如果檔案比較大，想要移動到檔案尾部，比較麻煩 - 無法上傳圖片
需要配置服務端php才能支持 - 無法復制粘貼圖片進行上傳
這個功能非常的有用
在線markdown檔案編輯器
在線markdown檔案編輯器
打造在線markdown編輯器
自定義工具列
增加如下三個配置，即可在工具列增加html代碼
toolbarIcons : function() {
var toolBarIconArray=editormd.toolbarModes["full"];
toolBarIconArray.push("aboutus");
return toolBarIconArray;
},
自定義html代碼
toolbarCustomIcons : {
aboutus :"<a href=https://www.cnblogs.com/maoguan/p/"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 = https://www.cnblogs.com/maoguan/p/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 自帶截圖 進行截圖復制，在頁面上直接粘貼
最終打造的markdown在線檔案編輯器
在線markdown檔案編輯器
官方QQ交流
如大家有問題，歡迎加入官方交流Q群討論
官方交流Q群:1142802013
文章轉自 http://bbs.720life.cn/thread-87.htm
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/3022.html
標籤：Python