Wordpressのコピペボタンを実装して、オリジナルのテキスト通りにペーストできるようにしたい。

実現したいこと

別サイトに記載されているテキストの内容を「TabsRespondive」（WPのプラグイン）を利用して一つのページにまとめ、それぞれ「Copy　Anything to Clipboard」を使用してコピーボタン1つで別サイトに記載されている通り（空白の行も）にコピペできるようにしたい。

前提

Wordpressで作成した情報ポータルサイトの刷新作業中でして、UI/UXの向上。

発生している問題・エラーメッセージ

元々のサイトのテキストの空白の行が実現したい方法でコピペすると表示されない。

試したこと

Tabs Responsive内のテキストが<pre>タグ内にあるので、CSSにて

pre{
white-space: pre-wrap;
}

pre{
white-space: pre-line;
}

pre{
white-space: break-spaces;
}

等を試しました。
実現できれば別の方法でも大丈夫ですのでご教示いただけますと幸いです。
初心者でして、至らぬ点が多々あるかと思いますがお力添えいただけますと幸いです。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Wordpress6.2.2
Twenty Twentyバージョン: 2.2
Tabs Responsiveバージョン2.3.9
Copy Anything to Clipboardバージョン2.6.3

コピペボタンが実装できれば特にこのプラグインを使用しないといけないなどの縛りはありません。

行動規範の内容に同意します

回答1件

この回答はGPT-4による自動生成回答です

Copy Anything to Clipboardプラグインが空白行を正しくコピーできない場合、以下の方法でJavaScriptを使用してコピーボタンを実装することができます。

まず、コピーボタンとコピー対象のテキストをHTMLに追加します。

html
1<button id="copyButton">コピー</button>
2<pre id="copyText">
3ここにコピーしたいテキストを入力します。
4空白行も含めて正確にコピーされます。
5</pre>

次に、以下のJavaScriptコードを追加して、コピーボタンがクリックされたときにテキストをクリップボードにコピーする機能を実装します。

javascript
1document.getElementById('copyButton').addEventListener('click', function() {
2  const textToCopy = document.getElementById('copyText').innerText;
3  const textArea = document.createElement('textarea');
4  textArea.value = textToCopy;
5  document.body.appendChild(textArea);
6  textArea.select();
7  document.execCommand('copy');
8  document.body.removeChild(textArea);
9});