你如何實現一個代碼按鈕來格式化textarea中的文本？

Question

所以，我在我的博客上使用了StackOverflow自己的MarkdownSharp，我喜歡它。我現在想要實現一個代碼按鈕，就像SO上的代碼按鈕一樣。我似乎無法找到單擊該按鈕時觸發的JavaScript，因爲它全部縮小而不是侵入腳本。任何人都知道當它被點擊或ctrl + k被按下時它運行的那段代碼？

這裏是一個截屏，以防萬一你不知道我指的是哪個按鈕： http://www.codetunnel.com/codebutton.jpg

提前感謝！

UPDATE

我複製SO的wmd.js文件和unminified它的來源。然後，我在記事本中搜索了一些關鍵文本。該文件中的變量是無法理解，更不用說讀，但我沒有找到這樣的：

c.doCode = function (v, u) { 
    var w = /\S[ ]*$/.test(v.before); 
    var s = /^[ ]*\S/.test(v.after); 
    if ((!s && !w) || /\n/.test(v.selection)) { 
     v.before = v.before.replace(/[ ]{4}$/, function (x) { 
      v.selection = x + v.selection; 
      return "" 
     }); 
     var t = 1; 
     var r = 1; 
     if (/\n(\t|[ ]{4,}).*\n$/.test(v.before)) { 
      t = 0 
     } 
     if (/^\n(\t|[ ]{4,})/.test(v.after)) { 
      r = 0 
     } 
     v.skipLines(t, r); 
     if (!v.selection) { 
      v.startTag = " "; 
      v.selection = "enter code here" 
     } else { 
      if (/^[ ]{0,3}\S/m.test(v.selection)) { 
       v.selection = v.selection.replace(/^/gm, " ") 
      } else { 
       v.selection = v.selection.replace(/^[ ]{4}/gm, "") 
      } 
     } 
    } else { 
     v.trimWhitespace(); 
     v.findTags(/`/, /`/); 
     if (!v.startTag && !v.endTag) { 
      v.startTag = v.endTag = "`"; 
      if (!v.selection) { 
       v.selection = "enter code here" 
      } 
     } else { 
      if (v.endTag && !v.startTag) { 
       v.before += v.endTag; 
       v.endTag = "" 
      } else { 
       v.startTag = v.endTag = "" 
      } 
     } 
    } 
}; 

我發現它時，我意識到，點擊沒有文字按鈕高亮插入的文本「在此處輸入代碼」到編輯。然後，我搜索了該文本並找到了該片段。任何人都能夠做出正面或反面？

我甚至不需要完整的編輯器，因爲我只是想要代碼按鈕。其餘的我可以不在乎。

Answer 1

因此，經過多次搜索，我最終找到了編輯器的全部內容，評論和所有。這是很困難的偵探工作，但我得到它的工作，現在我的網站有一個完整的WMD編輯器。我記載我的博客我的經驗：

http://www.CodeTunnel.com/blog/post/30/finding-and-implementing-the-wmd-editor

我有計劃源上傳到我自己的存儲庫，並修改它通過AJAX加載的形式發揮很好。

我想要的只是代碼按鈕，但事實證明這個編輯器非常簡單，我喜歡它的大部分功能，所以我只是通過在鏈接的博客文章中描述的一些小調整來實現整個事情。

回答我的具體問題，這裏是按鈕的代碼片斷：

command.doCode = function (chunk, postProcessing, useDefaultText) { 

    var hasTextBefore = /\S[ ]*$/.test(chunk.before); 
    var hasTextAfter = /^[ ]*\S/.test(chunk.after); 

    // Use 'four space' markdown if the selection is on its own 
    // line or is multiline. 
    if ((!hasTextAfter && !hasTextBefore) || /\n/.test(chunk.selection)) { 

     chunk.before = chunk.before.replace(/[ ]{4}$/, 
      function (totalMatch) { 
       chunk.selection = totalMatch + chunk.selection; 
       return ""; 
      }); 

     var nLinesBefore = 1; 
     var nLinesAfter = 1; 


     if (/\n(\t|[ ]{4,}).*\n$/.test(chunk.before) || chunk.after === "") { 
      nLinesBefore = 0; 
     } 
     if (/^\n(\t|[ ]{4,})/.test(chunk.after)) { 
      nLinesAfter = 0; // This needs to happen on line 1 
     } 

     chunk.addBlankLines(nLinesBefore, nLinesAfter); 

     if (!chunk.selection) { 
      chunk.startTag = " "; 
      chunk.selection = useDefaultText ? "enter code here" : ""; 
     } 
     else { 
      if (/^[ ]{0,3}\S/m.test(chunk.selection)) { 
       chunk.selection = chunk.selection.replace(/^/gm, " "); 
      } 
      else { 
       chunk.selection = chunk.selection.replace(/^[ ]{4}/gm, ""); 
      } 
     } 
    } 
    else { 
     // Use backticks (`) to delimit the code block. 

     chunk.trimWhitespace(); 
     chunk.findTags(/`/, /`/); 

     if (!chunk.startTag && !chunk.endTag) { 
      chunk.startTag = chunk.endTag = "`"; 
      if (!chunk.selection) { 
       chunk.selection = useDefaultText ? "enter code here" : ""; 
      } 
     } 
     else if (chunk.endTag && !chunk.startTag) { 
      chunk.before += chunk.endTag; 
      chunk.endTag = ""; 
     } 
     else { 
      chunk.startTag = chunk.endTag = ""; 
     } 
    } 
}; 

我不知道如何該函數的許多文件依賴於其他代碼，因爲我還沒有花有時間檢查它，但它確實是執行代碼按鈕操作的塊。

成品控制

http://www.CodeTunnel.com/WMDEditor.jpg http://www.CodeTunnel.com/WMDEditor.jpg