Toolbar 插件允许使用多种方法通过 Prism.plugins.toolbar.registerButton 函数注册按钮。
最简单的方法是通过 HTML API。将 data-label 属性添加到 pre 元素,Toolbar 插件将读取该属性的值并将标签附加到代码片段中。
<pre data-src="plugins/toolbar/prism-toolbar.js" data-label="Hello World!"></pre>
如果您想向按钮提供任意 HTML,请创建一个带有所需 HTML 标签的 template 元素,并将 template 元素的 id 提供给 data-label。Toolbar 插件会使用该模板的内容作为按钮。您也可以使用内联方式声明事件处理程序
<pre data-src="plugins/toolbar/prism-toolbar.js" data-label="my-label-button"></pre>
<template id="my-label-button"><button onclick="console.log('This is an inline-handler');">My button</button></template>
为了获得更大的灵活性,Toolbar 暴露了一个 JavaScript 函数,可用于向 Toolbar 注册新按钮或标签,即 Prism.plugins.toolbar.registerButton。
该函数接受一个按钮键和一个具有 text 属性字符串以及一个可选的 onClick 函数或 url 字符串的对象。当点击按钮时将调用 onClick 函数,而 url 属性将被设置为锚标签的 href。
Prism.plugins.toolbar.registerButton('hello-world', {
text: 'Hello World!', // required
onClick: function (env) { // optional
alert('This code snippet is written in ' + env.language + '.');
}
});
注意到上面的代码是如何注册 Hello World! 按钮的?您可以在插件中使用它向工具栏注册您自己的按钮。
如果您需要更多控制,可以将一个函数提供给 registerButton,该函数返回 span、a 或 button 元素。
Prism.plugins.toolbar.registerButton('select-code', function(env) {
var button = document.createElement('button');
button.innerHTML = 'Select Code';
button.addEventListener('click', function () {
// Source: http://stackoverflow.com/a/11128179/2757940
if (document.body.createTextRange) { // ms
var range = document.body.createTextRange();
range.moveToElementText(env.element);
range.select();
} else if (window.getSelection) { // moz, opera, webkit
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(env.element);
selection.removeAllRanges();
selection.addRange(range);
}
});
return button;
});
上面的函数会创建您看到的“选择代码”按钮,当您点击它时,代码将被突出显示。
默认情况下,按钮将按照注册它们的顺序添加到代码片段中。如果需要对顺序进行更多控制,可以使用 data-toolbar-order 属性。给定一个以逗号分隔的按钮名称列表,它将确保这些按钮按给定的顺序显示。
未列出的按钮将不会显示。这意味着可以使用此技术禁用按钮。
示例:“Hello World!”按钮会显示在“Select Code”按钮之前,自定义标签按钮将不会显示。
<pre data-toolbar-order="hello-world,select-code" data-label="Hello World!"><code></code></pre>
data-toolbar-order 属性是继承的,因此您可以通过将属性添加到页面的 body 来定义整个文档的按钮顺序。
<body data-toolbar-order="select-code,hello-world,label">