Как копировать предварительно отформатированный текст

Последние изменения: 11.10.2023

В своих статьях вы создаете предварительно отформатированные блоки текста или кода, чтобы пользователи скопировали их в исходном виде. Задачу форматирования решают HTML-теги pre и code, но чтобы пользователи одним кликом скопировали все содержимое, используйте следующую конструкцию.

1. Добавьте JS-скрипт в центр поддержки

Перейдите по пути аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация» → блок «виджеты и скрипты». Добавьте следующий JS-скрипт:

$(document).ready(function() {

    $(".omni_block, .copy_block").each(function() {
        const divElement = $(this);

        const codeElement = divElement.find("code, pre");

        if (codeElement.length > 0) {
        
            const copyIcon = $('<span class="omni_block-copy fa-duotone fa-copy"></span>');
            codeElement.append(copyIcon);
            
            copyIcon.click(function() {
                let codeText = codeElement.text().trim();
                const omniText = document.createElement('textarea');
                omniText.style.position = 'fixed';
                omniText.style.left = '0';
                omniText.style.top = '0';
                omniText.style.opacity = '0';
                omniText.value = codeText;
                document.body.appendChild(omniText);
                omniText.focus();
                omniText.select();
                document.execCommand('copy');
                document.body.removeChild(omniText);
            });
        }
    });
});

2. Добавьте кастомный CSS в центр поддержки

Перейдите по пути аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация» → блок «Кастомный CSS». Добавьте следующий CSS:

.copy_block {
    display: block;
    position: relative;
}

.omni_block .omni_block-copy {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    margin: 6px 8px 0px 0px;
    color: #f8f8f8 !important;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.9 !important;
}

.omni_block-copy {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    margin: 8px 8px 0px 0px;
    color: #a4a5a5 !important;
    cursor: pointer;
    font-weight: 200;
    font-size: 14px;
    opacity: 0.85 !important;
}
.omni_block-copy:hover {
    font-size: 14.5px;
    opacity: 1 !important;
}
.omni_block-copy:active {
    color: #fff;
    font-size: 14px;
}

3. Добавьте теги в исходной код в статьи

Перейдите в режим исходного кода редактора, добавьте один из варинатом HMTL-разметки.

а) Текст или код, прописанный с помощью тегов pre и code, не используя стилизованный блок. Пример для тега pre:

<div class="copy_block">
    [Ваш предварительно отформатированный код]
</div>

б) Текст или код, прописанный с помощью тегов code, используяю стилизованный блок:

<div class="omni_block [Выберите кастомный блок]">
    <code class="[синтаксис кода]">[Ваш предварительно отформатированный код]</code>
</div>

Примеры кастомных блоков есть тут.

Подсветка синтаксиса кода описана тут.

В результате мы динамически добавим элемент span class="omni_block-copy fa-duotone fa-copy". При копировании функция стирает все пустые пространства до и после вашего текста с помощью JavaScript метода trim().

PRO Подсказка

Если хотите, чтобы все теги pre и code автоматически добавляли специальный блок .copy_block и элемент span для отображения иконки, используйте такой JS-скрипт:

<script>
$(document).ready(function () {
    $("pre, code").each(function () {
        const codeElement = $(this);

        if (!codeElement.parent().hasClass('copy_block')) {
            const copyBlock = $('<div class="copy_block"></div>');
            codeElement.wrap(copyBlock);

            const copyIcon = $('<span class="omni_block-copy fa-duotone fa-copy"></span>');
            codeElement.parent().append(copyIcon);

            copyIcon.click(function () {
                let codeText = codeElement.text().trim();
                const omniText = document.createElement('textarea');
                omniText.style.position = 'fixed';
                omniText.style.left = '0';
                omniText.style.top = '0';
                omniText.style.opacity = '0';
                omniText.value = codeText;
                document.body.appendChild(omniText);
                omniText.focus();
                omniText.select();
                document.execCommand('copy');
                document.body.removeChild(omniText);
            });
        }
    });
});
</script>

Если вы добавляли кастомные стили, то такой скрипт может сбить верстку или иконка будет отображаться некорректно. Скорее всего, вам потребуется внести изменения в кастомном CSS.

Помогла ли вам статья?