How do you implement a code button to format text in a textarea?
So, I am using StackOverflow's own MarkdownSharp on my blog and I love it. I now want to implement a code button exactly like the one here on SO. I can't seem to find the javascript that fires when that button is clicked as it's all minified and not intrusive script. Anyone know the piece of code that it runs when it's clicked or ctrl+k is pressed?
Here is a screen shot just in case you don't know which button I'm referring to: http://www.codetunnel.com/codebutton.jpg
Thanks in advance!
UPDATE
I copied the source of SO's wmd.js file and unminified it. I then did some searching in notepad for certain key text. The variables in this file are impossible to understand, let alone read, but I did find this:
c.doCode = function (v, u) {
var w = /\S[ ]*$/.test(v.before);
var s = /^[ ]*\S/.test(v.after);开发者_JAVA百科
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 clicking the button without text highlighted inserted the text "enter code here" into the editor. I then searched for that text and found that snippet. Anyone able to make heads or tails?
I don't even want the full editor so much as I just want the code button. I could care less about the rest.
So after much searching I FINALLY found the editor in its entirety, commented and all. It was difficult detective work but I got it working and now my site has a complete working WMD Editor. I chronicled 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 to my own repository and modify it to play nicely with forms loaded via AJAX.
All I wanted was the code button, but it turns out this editor is pretty simple and I liked most of its features so I just implemented the whole thing with some minor tweaks that I describe in the linked blog post.
To answer my specific question, here is the snippet for the code button:
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 how much of this function depends on other code in the file as I haven't taken the time to inspect it, but it is definitely the chunk that does the code button action.
The Finished Control
http://www.CodeTunnel.com/WMDEditor.jpg http://www.CodeTunnel.com/WMDEditor.jpg
精彩评论