自己开发的MarkDown在线编辑器越来越完善了，心里感到高兴。-白红宇

自己开发的MarkDown在线编辑器越来越完善了，心里感到高兴。

阅读量：6568 次

发布时间：2019-06-24

本文共 12443 字，大约阅读时间需要 41 分钟。

先晒一下它的样子。当然，我一开始就企图做到这四点：随时随地可以自动保存草稿内容到服务器；键盘快捷键进行Markdown格式编辑；可以分段编辑（万一文章比较长呢）；还有就是手机上也能用大部分功能。现在这四个目标基本现在实现了。

先让人看看它的样子。

Markdown在线编辑器

第一个按钮是新建文件。第二个按钮是设置文件日期。第三个按钮是插入图片。第四个按钮是查找替换文本。第五个按钮是用来预览内容。第六个按钮是保存内容。第七个按钮是发布内容。第八个按钮是返回到文档列表。

我还给努力做到让它插入图片特别方便，可以直接从本地硬盘中把图片文件拖放到淡黄色区域中，也可以复制图片之后直接粘贴，就会用html5上传功能自动上传到服务器上了。

另外我还利用百度翻译API和百度词典做了键盘快捷键翻译文档功能（Ctrl+小键盘上的小数点），在淡黄色区域中双击一个单词，立即显示这个单词的翻译。

小晒部分代码。

function onKeydown(e){  if(e.ctrlKey && e.keyCode == 80){ // Ctrl+P 保存并发布    e.preventDefault();save();    }    if(e.ctrlKey && e.keyCode == 83){ // Ctrl+S 保存草稿    e.preventDefault();save();    }  if(e.ctrlKey && e.keyCode ==110) { // translate    e.preventDefault();translate();    }    if(e.ctrlKey&&e.keyCode==73){ // Ctrl+B    e.preventDefault();toggleT('*','*',true);        }    if(e.ctrlKey&&e.keyCode==66){ // Ctrl+I        e.preventDefault();toggleT('**','**',true);        }    if(e.ctrlKey&&e.keyCode==80){        e.preventDefault();showPreview();        }    if(e.ctrlKey&&e.keyCode==89){ // Ctrl+Y        e.preventDefault();toggleT('`','`',true);        }    if(e.ctrlKey&&e.keyCode==70){ // Ctrl+F        e.preventDefault();toggleFind();        }    if(e.shiftKey&&e.keyCode==13){    insertT('\n','\n',false);    return false;    };    if(e.ctrlKey&&e.keyCode==13){    insertT('\n','\n',false);    return false;    };    if(e.keyCode==13){  // Enter        var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;        var tmpStr = Editor.value;        var str1=tmpStr.substring(0,startPos);        var ss=str1.lastIndexOf('\n')+1;        var str2=str1.substr(ss);        //if(!/^[\s]+/.test(str2))return true;        if(/^(> )?\s*?\d+\.\s\s*/.test(str2)){        var str3=str2.match(/^(> )?\s*?\d+\.\s\s*/)[0];        if(str3==str2){Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(startPos);        Editor.selectionStart=Editor.selectionEnd=startPos+1-str3.length;return false;}; // 点两次回车终止自行加前缀符        var ss2=str3.match(/\d+/),ss3=parseInt(ss2);ss3++        str3=str3.replace(/\d+/g,ss3);        Editor.value=str1+'\r\n'+str3+tmpStr.substr(startPos);        Editor.selectionStart=Editor.selectionEnd=startPos+1+str3.length;        return false;        }        if(/^(> )?[-*]\s\s*/.test(str2)){        str3=str2.match(/^(> )?[-*]\s\s*/)[0];        //console.log('[['+str2+']]');        if(str2==str3){Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(startPos);        Editor.selectionStart=Editor.selectionEnd=startPos+1-str3.length;return false;}// 点两次回车终止自行加前缀符        Editor.value=str1+'\r\n'+str3+tmpStr.substr(startPos);        Editor.selectionStart=Editor.selectionEnd=startPos+1+str3.length;           return false;        }        if(/^> /.test(str2)){        str3=str2.match(/^> /)[0];        if(str2==str3){Editor.value=tmpStr.substring(0,ss-1)+'\r\n'+tmpStr.substr(startPos);        if(/^\n\n/.test(tmpStr.substr(startPos)))Editor.selectionStart=Editor.selectionEnd=startPos-1;        else Editor.selectionStart=Editor.selectionEnd=startPos-3;        return false;}// 点两次回车终止自行加前缀符        Editor.value=str1+'\r\n'+str3+'\r\n'+str3+tmpStr.substr(startPos);        Editor.selectionStart=Editor.selectionEnd=startPos+2+str3.length*2;        return false;        }        }    if(e.shiftKey&&e.keyCode==9){  // Shift+Tab      e.preventDefault();        var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;        var tmpStr = Editor.value;        var str1=tmpStr.substring(0,startPos);        var ss=str1.lastIndexOf('\n')+1;        if(startPos==endPos){            var str2=str1.substr(ss);            str2=str2.match(/^\s*/)[0];            if(str2.length>=2){                    Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(ss+2);                    Editor.selectionStart=Editor.selectionEnd=startPos-2;                }else if(str2.length==1){                    Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(ss+1);                    Editor.selectionStart=Editor.selectionEnd=startPos-1;                }            }        else{            var str2=tmpStr.substring(ss,endPos);            //console.log(str2);            str2=str2.replace(/^\s{1,2}/,'').replace(/\n\s{1,2}/g,'\n')            Editor.value=tmpStr.substring(0,ss)+str2+tmpStr.substr(endPos);            Editor.selectionStart=ss;            Editor.selectionEnd=ss+str2.length;            }        //if(!/^[\s]+/.test(str2))return true;        }    else if(e.keyCode == 9){ // Tab    e.preventDefault();        var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;        var tmpStr = Editor.value;        var str1=tmpStr.substring(0,startPos);        var ss=str1.lastIndexOf('\n')+1;        if(startPos==endPos){            Editor.value=tmpStr.substring(0,ss)+'  '+tmpStr.substr(ss);            Editor.selectionStart=Editor.selectionEnd=startPos+2;            }        else{            var str2=tmpStr.substring(ss,endPos);            var ss2=/\n/g.test(str2)?str2.match(/\n/g).length:0;            str2=str2.replace(/\n/g,"\n  ");            Editor.value=tmpStr.substring(0,ss)+'  '+str2+tmpStr.substr(endPos);            Editor.selectionStart=startPos+2;            Editor.selectionEnd=endPos+2+ss2*2;        //cursorPos=Editor.selectionEnd;        //insertT('  ','',false);        }        }    else if(e.ctrlKey&&e.keyCode==222){ // Ctrl+'    e.preventDefault();    var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;        var tmpStr = Editor.value;        var str1=tmpStr.substring(0,startPos);        var ss=str1.lastIndexOf('\n')+1;        var ss2=tmpStr.substring(0,endPos).lastIndexOf('\n')+1        if(ss==ss2){        if(str1.substr(ss,2)=='> '){        Editor.value=tmpStr.substring(0,ss)+tmpStr.substr(ss+2);        Editor.selectionStart=startPos-2
    
      '+tmpStr.substr(ss);        Editor.selectionStart=startPos+2;        Editor.selectionEnd=endPos+2;        }        }        else{        if(str1.substr(ss,2)=='> '){        var str2=tmpStr.substring(ss,endPos);        var ss3=/\n> /g.test(str2)?str2.match(/\n> /g).length:0;        str2=str2.replace(/\n> /g,"\n");        str2=str2.substr(2);        Editor.value=tmpStr.substring(0,ss)+str2+tmpStr.substr(endPos);        Editor.selectionStart=ss?startPos-2:ss;        Editor.selectionEnd=endPos-ss3*2-2;        }        else{        var str2=tmpStr.substring(ss,endPos);        var ss3=/\n/g.test(str2)?str2.match(/\n/g).length:0;        str2=str2.replace(/\n/g,"\n> ");        Editor.value=tmpStr.substring(0,ss)+'> '+str2+tmpStr.substr(endPos);        Editor.selectionStart=startPos+2;        Editor.selectionEnd=endPos+ss3*2+2;        }                }    }    }

function imgReader(item){    if(item.kind=='file'&&item.type.indexOf('image')==0){      var file = item.getAsFile(),reader = new FileReader();         reader.onload = function(e){        //var img = new Image();img.src = e.target.result;document.body.appendChild( img );        var filename=file.name?file.name:'';        //$.post(_uploadUrl,{'upload':e.target.result},function(data){insertT('![',filename+']('+data+')\n',false);});        uploadFile(e.target.result,filename);        };        reader.readAsDataURL(file);        }  }function textReader(file){  //var sText=file.name+'Date'+file.lastModifiedDate+'content'+file.contents;  var reader=new FileReader();  reader.onload=function(e){      insertT('',e.target.result,false);      }  reader.readAsBinaryString(file)  //insertT('',sText,false);  }function onDblClick(e){  var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;        var tmpStr = Editor.value;        var word=tmpStr.substring(startPos,endPos);        if(/^[a-zA-Z]*$/.test(word))        {        word=word.toLowerCase();        var x=e.pageX,y=e.pageY;        y=Math.floor((y-6)/24)*24+20;        x=x-100;x<0?x=1:x;        $('#fanyi').css({left:x,top:y+10}).show().text(word);            $.ajax({    type : "get",    async : true,    dataType : "jsonp",    url : "http://openapi.baidu.com/public/2.0/translate/dict/simple",    data: {"client_id":"tSg0IcodQGIpm9U8neWsQ11g","from":"en","to":"zh","q":word},    success : function(data){              //$("#showcontent").text("Result:"+data.result)            if(data.data.length==0)return false;            if(data.data.symbols.length==0)return false;            var dst=data.data.symbols[0].parts;            var str=''+data.data.word_name+''            if(data.data.symbols[0].ph_am)str+='
`en-us`['+data.data.symbols[0].ph_am+']';            for(var i=0;i
    '+dst[i].part+','+dst[i].means.join(','):str=str+'
'+dst[i].means.join(',');                        }            $('#fanyi').html(str);        },      })        }        else        $('#fanyi').hide();}

function onPaste(e){   var Data=window.clipboardData||e.originalEvent.clipboardData;   if(!Data)return true;   if(Data.types.length==1&&Data.types[0]=='text/plain')return true;   else if((Data.types.length==2&&Data.types[1]=='text/html')||(Data.types.length==3&&Data.types[2]=='text/rtf')){   e.preventDefault();   var html=Data.getData('text/html');   html=html.replace(/(\r?\n)+(\r?\n)+
    (.*?)
    (\r?\n)+<\/body>(\r?\n)+<\/html>/,"$3");   //var _div=$(document.createElement('div')).appendTo(document.body);_div.text(html);   html=toMarkdown(html);   insertT(html,'',false);   }   else if((Data.types.length==2&&Data.types[1]=='text/rtf')||(Data.types.length==3&&Data.types[2]=='text/rtf')){   e.preventDefault();     html=Data.getData('text/plain');     //html=html.replace(/■+/g,'-').replace(/'/g,'\'');    insertT(html,'',false);       }   else if(Data.types=='text/html,Files'){    e.preventDefault();imgReader(Data.items[1])       }    else if(Data.types=='Files'){       e.preventDefault();imgReader(Data.items[0]);    }  }function onDrop(e){  e.stopPropagation();e.preventDefault();  if(e.type=='drop'&& e.dataTransfer.types=='Files'){        Editor.selectionStart=Editor.selectionEnd        for(var i=0;i

function find(isdesc){  var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;  var str=document.se.find.value;  if(str=='')return false;  var tmpStr=Editor.value,len=str.length;  if(tmpStr=='')return false;  //console.log(startPos+','+endPos+','+tmpStr.length);  if(!isdesc){  if(startPos==tmpStr.length)startPos=Editor.selectionStart=endPos=Editor.selectionEnd=0;  var ss=tmpStr.indexOf(str,endPos);  if(ss>-1){Editor.selectionStart=ss;Editor.selectionEnd=ss+len;}else {alert('已搜到底部');Editor.selectionStart=Editor.selectionEnd=0;}  }  else{  var ss=tmpStr.lastIndexOf(str,startPos-len);  if(ss>-1){Editor.selectionStart=ss;Editor.selectionEnd=ss+len;}else{alert('已搜到顶部');Editor.selectionStart=Editor.selectionEnd=tmpStr.length;}  }}function replace(isall){    var str=document.se.find.value,str2=document.se.for.value;    if(str=='')return false;    var tmpStr=Editor.value,len=str.length;    if(tmpStr=='')return false;    if(isall){        Editor.value=tmpStr.replace(new RegExp(str,"g"),str2);        Editor.selectionStart=Editor.selectionEnd=0;        }    else{        var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;        var ss=tmpStr.indexOf(str,startPos);          if(ss>-1){            Editor.value=tmpStr.substring(0,ss)+str2+tmpStr.substr(ss+str.length);            Editor.selectionStart=ss;Editor.selectionEnd=ss+str2.length;}else {alert('已搜到底部');Editor.selectionStart=Editor.selectionEnd=0;            }                }    }function translate(){  var startPos=Editor.selectionStart,endPos=Editor.selectionEnd;    var tmpStr = Editor.value;    var q=tmpStr.substring(startPos,endPos);    q=q.replace(/[\*_#`]/g,'').replace(/!?\[(.*?)\](.*?)/g,'$1');    //alert(q);    $.ajax({    type : "get",    async : true,    dataType : "jsonp",    url : "http://openapi.baidu.com/public/2.0/bmt/translate",    data: {"client_id":"tSg0IcodQGIpm9U8neWsQ11g","from":"en","to":"zh","q":q},    success : function(data){              //$("#showcontent").text("Result:"+data.result)              var dst=data.trans_result[0].dst;            Editor.value=tmpStr.substring(0,endPos)+dst+tmpStr.substr(endPos);            Editor.selectionStart=Editor.selectionEnd=endPos;        },      })    //alert(dest);  }

现在这个文件editor.js文件内容已经超过21K了，全都是我自己动脑筋写出来的，没有抄袭任何人。之前我看到有个MarkDown在线编辑器，觉得很喜欢。但是又觉得它不够完美。现在我自己设计出了自己想要的在线编辑器，editor.js文件的大小只有的editor.js的十分之一。但是它有的功能我基本都做了，而且还做了很多它不具备的功能，比如说Ctrl+.翻译文章，以及双击一个单词给出它的词典释义。

我打算用它好好翻译点资料，特别是跟HTML5 API和SVG、其它前端开发方面的资料，以提升自己。我觉得为了翻译资料，不得不经常地把文字拷贝到百度翻译里，再从百度翻译拷贝到自己的文本框中，挺费时费力的。

再放一张这个在线编辑器点下“Ctrl+F”或者点下那个放大镜按钮之后产生的结果：

Markdown在线编辑器搜索替换功能

可惜这个在线编辑器目前还不能用正则表达式搜索替换。

转载地址：http://ojvjo.baihongyu.com/

你可能感兴趣的文章