How to implement a code button to format text in a text field?

Question

So, I use StackOverflow's own MarkdownSharp on my blog, and I like it. Now I want to implement the code button just like here on SO. It seems I can not find javascript that fires when this button is clicked, since all this is minimized, not an intrusive script. Does anyone know a piece of code that it runs when it is pressed, or is the Ctrl + K key pressed?

Here's a screenshot just in case you don’t know which button I am accessing: http://www.codetunnel.com/codebutton.jpg

Thanks in advance!

UPDATE

I copied the source of the wmd.js SO file and unminified it. Then I did a few notepad searches for a specific key text. The variables in this file cannot be understood, not to mention reading, but I found this:

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 = "" } } } }; 

I found it when I realized that pressing a button without selected text adds the text "enter code here" to the editor. Then I searched this text and found this snippet. Anyone who can do heads or tails?

I don’t even want the full editor as much as I just want the code button. I would not worry about the rest.

Answer 1

Therefore, after a long search, I finally found the editor completely, commented on everything. It was a difficult detective work, but I got her work, and now my site has a full working WMD editor. I wrote my experience on my blog:

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

I have plans to upload the source code to my own repository and modify it to play well with forms loaded via AJAX.

All I wanted was a button with a code, but it turns out that this editor is quite simple, and I liked most of its functions, so I just implemented all this with some minor tricks that I describe in a related blog post.

To answer my specific question, here is a code snippet for the code:

 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 = ""; } } }; 

I'm not sure which part of this function depends on other code in the file, since I did not find the time to check it, but it is definitely a block that performs the action of a code button.

Complete management

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