javascript - 如何实现代码按钮来格式化文本区域中的文本？

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

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

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

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

我不确定这个函数有多少依赖于文件中的其他代码，因为我没有花时间检查它，但它肯定是执行代码按钮操作的 block 。

完成的控件

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