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

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

完成控制

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

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

1 个答案: