QEditor богатый текстовый редактор

QEditor — это компонент Quasar, предназначенный для работы с форматированным текстом. Он поддерживает редактирование HTML-контента, работу с ссылками, изображениями, списками и стилями текста, а также интеграцию с другими компонентами Quasar, такими как диалоги и панели инструментов.

Компонент основан на contenteditable, что позволяет динамически изменять содержимое и получать его в виде HTML. Это делает QEditor гибким инструментом для создания визуальных редакторов, блог-платформ и административных панелей.

Подключение и базовая установка

Для использования QEditor необходимо убедиться, что проект Quasar настроен с поддержкой компонентов. Импорт осуществляется следующим образом:

• v-model связывает содержимое редактора с переменной content.
• :definitions позволяет расширять стандартный набор кнопок и функций редактора.

Настройка панели инструментов

QEditor предоставляет гибкую настройку панели инструментов через объект definitions. Можно добавить кнопки форматирования текста, вставки ссылок, изображений и блоков кода.

Пример пользовательской панели:

customDefinitions: {
  bold: { icon: 'format_bold', label: 'Жирный', handler: (editor) => editor.execCommand('bold') },
  italic: { icon: 'format_italic', label: 'Курсив', handler: (editor) => editor.execCommand('italic') },
  link: { icon: 'link', label: 'Ссылка', handler: (editor) => {
    const url = prompt('Введите URL');
    if (url) editor.execCommand('createLink', url);
  } }
}

• Каждая кнопка определяется объектом с полями icon, label и handler.
• handler получает экземпляр редактора для выполнения команд.

Форматирование текста

QEditor поддерживает стандартные HTML-команды для форматирования:

• bold — жирный текст
• italic — курсив
• underline — подчеркнутый текст
• strikeThrough — зачеркнутый текст
• insertOrderedList / insertUnorderedList — нумерованные и маркированные списки

Использование встроенных команд:

editor.execCommand('bold');       // Сделать текст жирным
editor.execCommand('insertUnorderedList'); // Создать маркированный список

Вставка медиа и ссылок

Редактор поддерживает вставку изображений, видео и ссылок с сохранением HTML-структуры:

editor.execCommand('insertImage', 'https://example.com/image.jpg');
editor.execCommand('createLink', 'https://example.com');

• Важно контролировать размеры изображений через стили, чтобы не нарушать разметку страницы.
• Для ссылок можно добавлять атрибут target="_blank" через модификацию HTML-кода после вставки.

Обработка событий

QEditor предоставляет ряд событий для отслеживания изменений и взаимодействий:

• @input — срабатывает при каждом изменении содержимого
• @focus / @blur — при фокусе и потере фокуса
• @selection-change — при изменении выделенного текста

Пример привязки события ввода:

methods: {
  onContentChange(html) {
    console.log('Текущее содержимое редактора:', html);
  }
}

Расширение функционала

Можно создавать собственные плагины, расширяющие возможности редактора, например:

• вставка таблиц
• подсветка кода
• кастомные блоки контента (quote, alert, note)

Плагин подключается через объект definitions, аналогично встроенным кнопкам.

Работа с HTML и безопасностью

Так как QEditor работает с HTML-контентом, необходимо учитывать безопасность:

• применять sanitize-html или аналогичные библиотеки для очистки пользовательского ввода
• фильтровать теги, которые могут содержать скрипты (