你如何实现一个代码按钮来格式化文本区域中的文本？

Question

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

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

提前致谢！

更新

我复制了 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 = ""
            }
        }
    }
};

当我意识到单击没有突出显示文本的按钮会将文本“在此处输入代码”插入编辑器时，我发现了它。然后我搜索了该文本并找到了 sn-p。任何人都可以做正面或反面？

我什至不想要完整的编辑器，我只想要代码按钮。其他的我可以不关心。

Answer 1

所以经过多次搜索，我终于找到了编辑器的全部内容，评论和所有内容。这是一项艰巨的侦探工作，但我得到了它的工作，现在我的网站有一个完整的工作 WMD 编辑器。我在博客上记录了我的经历：

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

我计划将源上传到我自己的存储库并对其进行修改，以便与通过 AJAX 加载的表单很好地配合。

我想要的只是代码按钮，但事实证明这个编辑器非常简单，我喜欢它的大部分功能，所以我只是通过一些小的调整来实现整个东西，我在链接的博客文章中描述了这些调整。

为了回答我的具体问题，这里是代码按钮的 sn-p：

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