...

Copy code

Dibawah ini adalah code yang akan digunakan untuk melakukan copy pada code :

  • CSS
pre {
            position: relative;
            background: #f5f5f5;
            padding: 1em;
            border-radius: 8px;
            font-family: monospace;
            overflow-x: auto;
            margin-bottom: 1em;
        }

        .copy-button {
            position: absolute;
            top: 8px;
            right: 8px;
            background: #007bff;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8em;
            cursor: pointer;
            z-index: 10;
        }
  • HTML
<div id="editor-content">
                        {!! $b->deskripsi !!}
                    </div>
  • JS
<script>
    document.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('#editor-content pre').forEach(pre => {
            // Cek kalau tombol belum ditambahkan
            if (!pre.querySelector('.copy-button')) {
                const button = document.createElement('button');
                button.className = 'copy-button';
                button.textContent = 'Copy';

                pre.appendChild(button);

                button.addEventListener('click', () => {
                    const text = pre.textContent;
                    navigator.clipboard.writeText(text).then(() => {
                        button.textContent = 'Copied!';
                        setTimeout(() => button.textContent = 'Copy', 1500);
                    });
                });
            }
        });
    });
</script>

Let's build something together

Contact me
whatsapp_icon