I’m glad that the markdown online editor I developed is getting better and better.

Time:2020-7-5

Let’s sun it first. Of course, from the beginning, I tried to achieve the following four points: I can automatically save the draft content to the server anytime and anywhere; I can edit in markdown format by keyboard shortcut; I can edit in sections (in case the article is long); and most functions can also be used on the mobile phone. Now these four goals have basically been achieved.

Let’s see what it looks like first.

I'm glad that the markdown online editor I developed is getting better and better.

The first button is to create a new file. The second button is to set the file date. The third button is to insert a picture. The fourth button is to find the replacement text. The fifth button is used to preview the content. The sixth button is to save the content. The seventh button is to publish content. The eighth button is to return to the list of documents.

I also try to make it very convenient to insert pictures. I can drag and drop the image files directly from the local hard disk to the light yellow area, or paste the pictures directly after copying, and then they will be automatically uploaded to the server with the HTML5 upload function.

In addition, I also use Baidu translation API and baidu dictionary to do the keyboard shortcut key translation document function (Ctrl + decimal point on the keyboard), double-click a word in the light yellow area, and immediately display the translation of this word.

Part of the code.

function onKeydown(e){
  If (e.ctrl key & e.keycode = = 80) {// Ctrl + P save and publish
    e.preventDefault();save();
    }
    If (e.ctrl key & e.keycode = = 83) {// Ctrl + s Save Draft
    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;}; // click enter twice to terminate the prefix
        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;} // click enter twice to terminate the prefix
        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;} // click enter twice to terminate the prefix
        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<ss?startPos-2:ss;
        Editor.selectionEnd=endPos-2;
        }
        else{
        Editor.value=tmpStr.substring(0,ss)+'> '+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='<span style="color:#c00;font-weight:bold;font-family:Cambria">'+data.data.word_name+'</span>'
            if(data.data.symbols[0].ph_am)str+='<br />`en-us`['+data.data.symbols[0].ph_am+']';
            for(var i=0;i<dst.length;i++){
            dst[i].part?str=str+'<br />'+dst[i].part+','+dst[i].means.join(','):str=str+'<br />'+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(/<html>(\r?\n)+<body>(\r?\n)+<!--StartFragment-->(.*?)<!--EndFragment-->(\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<e.dataTransfer.items.length;i++){
        if(e.dataTransfer.items[i].type.indexOf('image')==0)imgReader(e.dataTransfer.items[i]);
        //else if(e.dataTransfer.items[i].type.indexOf('text')==0)textReader(e.dataTransfer.items[i].getAsFile());
            }
        }
    }
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 ('bottom searched '); 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 ('top found '); 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 ('bottom found '); 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);
  }

Now this document editor.js The content of the document has exceeded 21k. I wrote it with my own mind, without plagiarizing anyone. I saw a mark down online editor before http://lab.lepture.com/editor/ I like it very much. But I don’t think it’s perfect. Now I’ve designed my own online editor, editor.js The size of the file is only http://lab.lepture.com/editor/ Of editor.js One tenth of. But I have basically done all the functions it has, and I have also done many functions it does not have, such as Ctrl +. Translating articles, and double clicking a word to give its dictionary definition.

I plan to use it to translate some materials, especially with HTML5 API, SVG and other front-end development materials, so as to improve myself. I feel that in order to translate materials, I have to copy the text into Baidu translation frequently, and then copy from Baidu translation to my own text box, which is very time-consuming and laborious.

Let’s put another image of the online editor and click “Ctrl + F” or the magnifying glass button

I'm glad that the markdown online editor I developed is getting better and better.

Unfortunately, this online editor cannot be replaced with regular expression search at this time.