Prism.js复制到剪贴板

Question

我正在使用Prism JS。我必须实现复制到剪贴板功能。我在http://dev.misterphilip.com/prism/plugins/toolbar/找到了解决方案。

我试图在本地系统上使用来自本网站的支持JS文件通过执行查看源来实现此解决方案。但是这不适用于我的本地系统。

感谢您的任何帮助。

问候

Answer 1

您可以使用clipboardjs代替

下载：https://zenorocha.github.io/clipboard.js/

现在你可以使用这个方法：（需要jQuery的）

在你的HTML头添加：

<script src="dist/clipboard.min.js"></script> 

在您的html代码中添加：

<pre class="copytoclipboard"> 
    <code class="language-html"> 
     <h1>Hello world !</h1> 
    </code> 
</pre> 

在您的网页添加页脚：

<script> 
     /* Prism copy to clipbaord for all pre with copytoclipboard class */ 
     $('pre.copytoclipboard').each(function() { 
      $this = $(this); 
      $button = $('<button>Copy</button>'); 
      $this.wrap('<div/>').removeClass('copytoclipboard'); 
      $wrapper = $this.parent(); 
      $wrapper.addClass('copytoclipboard-wrapper').css({position: 'relative'}) 
      $button.css({position: 'absolute', top: 10, right: 10}).appendTo($wrapper).addClass('copytoclipboard btn btn-default'); 
      /* */ 
      var copyCode = new Clipboard('button.copytoclipboard', { 
       target: function (trigger) { 
        return trigger.previousElementSibling; 
       } 
      }); 
      copyCode.on('success', function (event) { 
       event.clearSelection(); 
       event.trigger.textContent = 'Copied'; 
       window.setTimeout(function() { 
        event.trigger.textContent = 'Copy'; 
       }, 2000); 
      }); 
      copyCode.on('error', function (event) { 
       event.trigger.textContent = 'Press "Ctrl + C" to copy'; 
       window.setTimeout(function() { 
        event.trigger.textContent = 'Copy'; 
       }, 2000); 
      }); 
     }); 
</script> 

基于：http://webdesign.tutsplus.com/tutorials/copy-to-clipboard-made-easy-with-clipboardjs--cms-25086