Давайте создадим кнопку копирования кода для Kendo UI for Vue Editor с правильными стилями и встроенным значком копирования.

Progress Kendo UI for Vue имеет очень полезный редактор, который к тому же является расширяемым!

Кратко суть

Это позволяет создать кнопку копирования кода для Kendo UI for Vue и добавить ее в редактор. При этом автоматически будут использоваться правильные стили и встроенный значок копирования.

Настройка

Создайте новое приложение Nuxt. Вы также можете напрямую использовать Vue.js.

Получите лицензию Kendo UI for Vue

Войдите в Progress Telerik и приобретите лицензию Kendo UI для Vue или воспользуйтесь бесплатной пробной версией.

Загрузите сам ключ, так как он понадобится вам позже для развертывания.

Установка лицензирования Kendo

Затем выполните:

Это настроит Kendo UI на вашем локальном компьютере для этого проекта. Убедитесь, что к этому моменту у вас есть действующая лицензия и что вы выполнили правильную настройку.

Установка пакетов

Установите все пакеты, которые понадобятся вам для этой демоверсии.

Настройка Nuxt

Обновите файл nuxt.config.ts для оптимизации зависимостей Vue и включения CSS для нужной темы Kendo UI. Progress Kendo UI имеет специальный конструктор тем (Custom ThemeBuilder) для любых цветов на ваш выбор!

Редактор кнопки копирования

Сначала нам нужна функциональность.

Составляемая функция кнопки копирования (Composable)

Нам нужна повторно используемая составная функция, которую можно применять в любом компоненте.

Navigator имеет свойство clipboard, которое широко доступно во всех браузеры.
Мы устанавливаем тайм-аут, чтобы кнопка выглядела более плавно с точки зрения пользовательского интерфейса (UX). Мы можем избавиться от таймера при размонтировании composable с помощью onScopeDispose.
Мы также возвращаем скопированное значение.

Компонент копирования редактора

Затем мы настраиваем редактор.

Нам действительно нужен только handleEditorChange для более сложных сценариев использования.
Мы передаем HTML функции копирования кода в composable и используем состояние для переключения значка.

Каждая группа инструментов объединяет кнопки в разделы.

Здесь мы используем render, чтобы показать нужный нам компонент внутри шаблона.

🛸 Бонус: Кнопка копирования блока кода

Я создал кнопку копирования блока кода с помощью нашей composable-функции.

Я сгенерировал несколько кнопок копирования SVG, так как кнопки копирования Kendo UI выглядели некорректно для данного сценария использования. Composable работает точно так же и чрезвычайно проста в использовании.
Нормой для блоков кода является использование тегов pre и code.
Если вы планируете отображать блоки кода в своем приложении, вам следует установить библиотеку подсветки синтаксиса. Prism.js Highlight.js

Репозиторий: GitHubДемо: Vercel Serverless