在 prismjs 中更新剪贴板的内容

Question

我有代码片段，用户可以将其复制到 his/her 站点。我为此使用 prismjs to show html code. also it has copy button, so user can copy the code in clipboard, it uses clipboardjs。用户可以在不同的选项之间进行选择（这是像 <select><option>.. 这样的列表），这将更新代码片段并且还应该更新剪贴板按钮的内容（这里是问题）。

这里是html

<pre class="language-html">
   <code id="code-example">
     <!-- <div class="widget widget-BTC" data-fiat="EUR"></div> -->
   </code>
</pre>

用户选择不同的选项后，<code id="code-example">的内容将被更新（更新class名称和data-fiat属性）

这是更新的 js 代码：

 let block = document.getElementById('code-example');
 block.innerHTML = '<!-- <div class="widget ...';
 Prism.highlightElement(block);

问题是，当我从 select 列表中选择其他选项时，它会更新 html 代码片段，但如果我单击复制按钮，它会复制旧值，而不是更新值。我尝试了不同的东西，比如但仍然是同样的问题。

Answer 1

需要创建另一个对象来更新值。这是解决方案：

new Clipboard('.yourButton', {
text: function(trigger) {
    return '<div>some text</div>';
}

});

在 prismjs 中更新剪贴板的内容

update the content of clipboard in prismjs

javascript

clipboard

events

clipboard.js