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">