clipboard.js Скопируйте текст в ближайшую сторону <pre>

Question

Я использую буфер обмена JS

Я хотел бы иметь возможность скопировать мой <pre> содержание, но не уверен, как заставить его работать с кодом внутри панели начальной загрузки

Вот пример того, что я пробовал codepen

<script type="text/javascript">
$(document).ready(function() {
    var clipboard = new Clipboard('#copy-button');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
});

</script>

HTML

<div class="container">

<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left"> 
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" id="copy-button">Copy</button>
</div>
</div>
</div>
<div class="panel panel-body">
<pre>
RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|js|robots\.txt)
RewriteRule ^(.*)$ /projectFolder/index.php/$1 [L]  
</pre>
</div>
</div>
</div><!-- Panel--> 
</div>
</div><!-- Row -->

</div>

Решение

Благодаря Natrium работает

<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<div class="clearfix">
<div class="pull-left"> 
</div>
<div class="pull-right">
<button type="button" class="btn btn-default" id="copy-button" data-clipboard-target="#foo">Copy</button>
</div>
</div>
</div>
<div class="panel panel-body">
<pre id="foo">
RewriteEngine on
RewriteCond $1 !^(index\.php|images|css|js|robots\.txt)
RewriteRule ^(.*)$ /projectFolder/index.php/$1 [L]  
</pre>
</div>
</div>
</div><!-- Panel--> 
</div>
</div><!-- Row -->

скрипт

<script type="text/javascript">
$(document).ready(function() {
    var clipboard = new Clipboard('#copy-button');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
});

</script>

Answer 1

Прочитайте документацию на https://clipboardjs.com/ (из чего мне сказать rtfm?)

Ваша кнопка нуждается в атрибуте data-clipboard-target где вы указываете селектор для элемента, который вы хотите скопировать.