新增代码片段按钮

我在网站的 代码片段 部分的所有代码片段中添加了两个新按钮。 现在，您可以使用一个按钮直接添加到 Snippets.app，另一个按钮直接复制到剪贴板，加入 Coda 和 Textmate 按钮。

继续阅读以了解有关它们的更多详细信息，请记住，您可以通过 提交您的代码片段 来帮助代码片段部分发展。

Snippets.app 按钮

Snippets.app 支持 URL 协议。 也就是说，一旦安装了应用程序，系统上的浏览器就会知道，当输入以“snippets:”开头的 URL（而不是 http://）时，它应该启动（或询问您启动）Snippets.app 并对该 URL 进行操作。

它们的格式为

snippets:add?code=[ENCODED-CODE-HERE]&name=[SNIPPET-NAME]&relatedurl=[REFERENCE-URL]&author=[AUTHOR-NAME]

由于我所有的代码片段都在 <pre> 元素中，因此这是我在每个代码块中添加 Snippets.app 按钮的方式（简化）

$("pre").each(function() {
    $preblock = $(this);
    $codeblock = $preblock.find("code");
    $snippets_link = "snippet:add?code=" + encodeURIComponent($codeblock.text()) + "&name=" + $title + "&relatedurl=" + encodeURIComponent(document.location.href);
    $("<a class='snippet-button'>Add to Snippets.app</a>").attr("href",$snippets_link).appendTo($preblock);         
});

复制到剪贴板

此按钮由出色的 Zero Clipboard 提供支持。 Flash 10 发布后的一段时间，从网络复制到剪贴板失败了，因为 Flash 10 有些新的安全限制阻止了以前的方法（是的，显然需要 Flash才能使此功能正常工作）。 Zero Clipboard 加强了它并以某种方式解决了这个问题。

这里的一个特殊挑战是，我正在使用悬停技术来显示每个按钮的“工具提示”文本。 在其他三个按钮上，我做了一个简单的事情，即在悬停时将一个 span 附加到锚点链接，并在悬停回调中将其删除

$(".snippet-button").hover(function() {
    $el = $(this);
    $el.append("<span>" + $el.text() + "</span>");
}, function() {
    $(this).find("span").remove();
});

span 使用 CSS 进行样式设置和定位。

问题是，Zero Clipboard 通过在按钮顶部定位一个完全透明的 flash 嵌入来工作。 这意味着当鼠标移到该区域时，不会触发传统的悬停事件。 幸运的是，Zero Clipboard 提供了事件侦听器，您可以让它们为您触发回调函数。 请参阅最后两行

ZeroClipboard.setMoviePath( '/path/to/ZeroClipboard.swf' );
    
$(".copy-clip").each(function(i) {

    clip = new ZeroClipboard.Client();
    
    $el = $(this);
    $parent = $el.parent();
    
    clip.glue($el[0], $parent[0]);
    
    txt = $el.parent().find("code").text();
    clip.setText(txt);
    
    clip.addEventListener('complete', function(client, text) {
      // provide some user feedback of success
    });
    
    clip.addEventListener('mouseOver', copyMouseOver);
    clip.addEventListener('mouseOut', copyMouseOut);     

});

这两个函数 copyMouseOver 和 copyMouseOut 用于执行其他按钮使用的相同 span 应用和删除操作。 剩下的一个棘手的事情是，这些函数需要知道要处理哪个父元素，在单个页面上有多个代码片段的情况下。 幸运的是，它们会自动将对象传递给函数，该函数加载了有关该元素的信息，包括 ID，我使用它来指定我们正在谈论哪个代码片段按钮

function copyMouseOver(passed) {
    $("#copy-" + passed.id).append("<span>Copy to Clipboard</span>");
};

我想确保在成功复制到剪贴板时有用户反馈，因此您会注意到，在成功复制后，剪贴板本身会快速淡出并再次淡入。 有点微妙，但我认为它相当令人满意。

Coda 和 TextMate

这里没有什么变化。 我在 以前的教程 中介绍了如何添加 Coda 按钮。 David Walsh 介绍了 TextMate 按钮，这需要一些花哨的服务器端操作。

看起来工作正常？

测试一下，告诉我结果... 我在 Twitter 上听到了一些关于失败的议论，但对我来说，所有按钮看起来都工作正常。 如果您想提交失败报告，请尽量提供有帮助的信息，并说明哪个按钮不起作用，浏览器/版本/平台，以及实际发生了什么。

Macintosh Mac Mac Mac

是的，所有集成都是 Mac 软件。 对此表示歉意，这就是我的风格。 如果有一个支持 URL 协议的 PC 程序，我会检查一下并看看我能做些什么来集成它。 现在，复制到剪贴板的功能仍然很有用。