需求分析
经常需要在网络论坛发布文章进行宣传良心工作室最新免费服务，但每个论坛的编写格式存在差异，给发布带来了很大的障碍。
最近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="u.720life.cn/s/75244496\" target="_blank" onclick="window.location.href='u.720life.cn/s/75244496'… " },
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 自带截图 进行截图复制，在页面上直接粘贴
最终打造的markdown在线文档编辑器
官方QQ交流
如大家有问题，欢迎加入官方交流Q群讨论
