如何实现代码按钮来格式化textarea中的文本？

Question

所以，我在我的博客上使用StackOverflow自己的MarkdownSharp ，我喜欢它。 我现在想要实现一个完全类似于SO的代码按钮。 我似乎无法找到单击该按钮时触发的javascript，因为它全部缩小而不是侵入式脚本。 任何人都知道它被点击或按下ctrl + k时运行的代码片段？

这是一个屏幕截图，以防您不知道我指的是哪个按钮： http ： //www.codetunnel.com/codebutton.jpg

提前致谢！

UPDATE

我复制了SO的wmd.js文件的源代码并将其取消了。 然后我在记事本中搜索某些关键文本。 这个文件中的变量是不可能理解的，更不用说读了，但我确实发现了这个：

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