经常需要在网络论坛发布文章进行宣传,但每个论坛的编写格式存在差异,给发布带来了很大的障碍。
最近markdown格式的兴起,给广大发布者带来了福音,一种文档格式大部分网站都支持,一次编写即可在多个论坛上发布。
如何在线编写markdown就成为一种需求。
经过查找和对比,发现editor.md是一款开源的markdown编辑器,非常的不错,实例丰富,使用比较简单。
editor.md 经过实际测试,发现几个小需求:
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功能后,发现有移动光标功能,可以指定移动光标到多少行,使用起来稍微复杂一些,需要用户自己输入
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即可
$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;
$imageUploader = new EditorMdUploader($savePath, $saveURL, $formats['image'], 1, 'H_i_s');
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 自带截图 进行截图复制,在页面上直接粘贴
index.html设置一个30秒的定时器,将当前内容保存到本地localstorge,代码如下:
function save_content(){
if (localStorage) {
localStorage["content"] =$(".editormd-markdown-textarea").val();
}
}
setInterval("save_content()",30000); // 30s执行一次
打开网页时,首先判断是否有localStorage,代码如下:
$(document).ready(function(){
var isHave = false;
if (localStorage) {
if(localStorage.content && localStorage.content.length > 0) {
md = localStorage.content;
isHave = true;
}
}
if(!isHave){
$.ajax({
url : 'test.md',
cache : false,
async : false,
type : "GET",
dataType : 'html',
success : function (result){
md = result;
}
});
} // endif isHave
由于本项目大部分都是静态资源,只有3个API接口,因此建议将3个API接口独立出来,静态文档托管到云上
可以放到七牛云或gitee等托管仓库
目前使用该工具的几个场景:
如大家有问题,欢迎加入官方交流Q群讨论
感谢editor.md 项目,非常的优秀