Как в Тильде сделать кнопку копирования

Вы сможете добавить кнопку для копирования текста из блока TX19 — код

Код примера

Это и есть пример, который вы можете видеть в каждой статье

<!--
 * Name: Кнопка копирования текста в блоке TX19 — код
 * Description: Скрипт позволяет копировать собержимое текста блока TX19 — код, так же выводить уведомление
 * Author: ANKU
 * URL: https://anku.one/copy-code
-->
<script>
    const COPY_TIME = 1500; // Время в ms, на которое вы увидите уведомление после копирования
    
    // Не менять код ниже этого комментария
    function setupCopyButtons(){let e=document.querySelectorAll('a[href="#copy"]');e.forEach(e=>{e.addEventListener("click",function(t){t.preventDefault();let o=e.parentElement,n=null;for(;o&&!(n=o.previousElementSibling?.querySelector("code"));)o=o.parentElement;if(n){let l=n.textContent;navigator.clipboard?navigator.clipboard.writeText(l).then(()=>{console.log("Текст успешно скопирован через Clipboard API")}).catch(e=>{console.error("Ошибка копирования через Clipboard API",e)}):function e(t){let o=document.createElement("textarea");o.value=t,o.style.position="fixed",o.style.opacity="0",document.body.appendChild(o),o.focus(),o.select();try{document.execCommand("copy"),console.log("Текст успешно скопирован (альтернативный метод)")}catch(n){console.error("Не удалось скопировать текст через execCommand",n)}document.body.removeChild(o)}(l);let c=document.querySelector(".uc-copy-wind");c&&(c.classList.add("active"),setTimeout(()=>{c.classList.remove("active")},COPY_TIME))}})}),console.log("Хочешь скрипт кнопки копирования Tilda, смотри эту статью: https://anku.one/copy-code ")}"loading"!==document.readyState?setupCopyButtons():document.addEventListener("DOMContentLoaded",function(){setupCopyButtons()});
</script>
<style>
    .uc-copy-wind{position:fixed;z-index:1000000;left:0;top:0;transition:.2s;width:100%;opacity:0;transform:translateY(-100%);pointer-events:none}.uc-copy-wind.active{opacity:1;transform:translateY(0)}
</style>

Инструкция


  1. Копируете скрипт в T123;
  2. Заполняете настройки*;
  3. Устанавливаете внизу страницы, если используете на всем сайте, то устанавливайте в подвал;
  4. Ставите блок TX19 — код и заполняете контентом;
  5. Ниже ставите любой блок с кнопкой;
  6. В ссылку кнопки ставите ссылку «#copy»;
  7. Создаете ZeroBlock для уведомления об успешном копировании;
  8. Присвойте для ZeroBlock класс «uc-copy-wind»;
  9. Настраиваете внешний вид и текст уведомления;
  10. Публикуете страницу.

*Настройки помечены комментариями в коде.

Дополнение

Данный скрипт можно адаптировать под разные задачи, например копирование текста из любого блока, включая ZeroBlock, так же менять состояние кнопки после копирования или выдавать уведомление о том, что текст успешно скопирован. Возможно добавлять ссылку на страницу, откуда было совершено копирование.

Если есть подобные задачи, пишите!
Made on
Tilda