Rich text редакторы

Rich Text редакторы позволяют создавать интерфейсы для редактирования текста с форматированием, включающим шрифты, цвета, списки, ссылки, изображения и другие элементы. В экосистеме Vue.js их интеграция осуществляется через компоненты и двустороннее связывание данных.

Выбор подходящего редактора

Наиболее популярные редакторы для Vue.js:

  • Quill — легковесный, расширяемый, поддерживает Vue-компоненты через vue-quill-editor.
  • CKEditor 5 — мощный редактор с модульной архитектурой, поддержкой плагинов и Vue-обёрткой @ckeditor/ckeditor5-vue.
  • TinyMCE — богатый функционал, гибкая кастомизация, официальный пакет @tinymce/tinymce-vue.

Ключевые критерии выбора:

  1. Поддержка Vue-компонентов.
  2. Размер библиотеки и производительность.
  3. Возможность интеграции с Vuex и Composition API.
  4. Поддержка кастомных плагинов и шаблонов контента.

Установка и базовая настройка

Для Quill:

npm install vue-quill-editor quill

Импорт и регистрация компонента:

import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

Vue.use(VueQuillEditor);

В шаблоне компонента:

<template>
  <quill-editor
    v-model="content"
    :options="editorOptions"
  />
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorOptions: {
        theme: 'snow',
        placeholder: 'Введите текст...',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['link', 'image'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ header: [1, 2, 3, false] }],
            [{ color: [] }, { background: [] }],
          ],
        },
      },
    };
  },
};
</script>

Особенности двустороннего связывания: v-model автоматически синхронизирует содержимое редактора с переменной content в data. Любые изменения в редакторе обновляют content, и наоборот.

Работа с событиями

Редакторы предоставляют события для контроля пользовательских действий. В Quill:

  • @text-change — вызывается при изменении текста.
  • @selection-change — вызывается при изменении выделения.

Пример:

<quill-editor
  v-model="content"
  @text-change="onTextChange"
/>

<script>
methods: {
  onTextChange(delta, oldDelta, source) {
    console.log('Изменение текста:', delta, source);
  }
}
</script>

Интеграция с Vuex

Для централизованного управления содержимым можно использовать Vuex:

computed: {
  content: {
    get() {
      return this.$store.state.editorContent;
    },
    set(value) {
      this.$store.commit('updateEditorContent', value);
    },
  },
},

Мутация в Vuex:

mutations: {
  updateEditorContent(state, payload) {
    state.editorContent = payload;
  },
},

Кастомизация интерфейса

Редакторы позволяют добавлять собственные кнопки и панели инструментов. В Quill это делается через модуль toolbar:

editorOptions: {
  modules: {
    toolbar: {
      container: [
        ['bold', 'italic'],
        ['link', 'image', 'video'],
        [{ header: 1 }, { header: 2 }],
      ],
      handlers: {
        image: function() {
          const input = document.createElement('input');
          input.setAttribute('type', 'file');
          input.click();
          input.oncha nge = () => {
            const file = input.files[0];
            // Логика загрузки изображения на сервер
          };
        },
      },
    },
  },
}

Работа с изображениями и медиа

Для загрузки медиафайлов обычно используется обработка событий change или кастомные плагины. Важно обеспечить:

  1. Асинхронную загрузку на сервер.
  2. Вставку полученного URL в контент редактора.
  3. Валидацию формата и размера файлов.

Поддержка HTML и безопасного контента

Rich Text редакторы возвращают HTML-код. Для безопасного отображения контента во Vue используется директива v-html:

<div v-html="content"></div>

Рекомендуется предварительно очищать HTML через библиотеки вроде DOMPurify, чтобы предотвратить XSS-атаки.

Composition API

С использованием Composition API можно создать реактивный редактор:

import { ref } from 'vue';

export default {
  setup() {
    const content = ref('');
    const editorOptions = {
      theme: 'snow',
      placeholder: 'Введите текст...',
    };

    const onTextCha nge = (delta, oldDelta, source) => {
      console.log('Текст изменен:', delta);
    };

    return { content, editorOptions, onTextChange };
  },
};

Многоуровневые редакторы

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

  • Поддерживать уникальные плагины для каждого редактора.
  • Легко управлять состоянием через Vuex или Pinia.
  • Оптимизировать загрузку модулей динамически.

Производительность и оптимизация

  1. Ленивое подключение редактора с помощью defineAsyncComponent.
  2. Минимизация импортируемых модулей и стилей.
  3. Ограничение количества одновременно активных редакторов на странице.
  4. Использование виртуализации при работе с большим количеством контента.

Резюме ключевых моментов

  • Rich Text редакторы во Vue.js строятся на компонентах с реактивным двусторонним связыванием.
  • Для управления состоянием удобно использовать Vuex или Composition API.
  • Кастомизация инструментов и обработка медиафайлов обеспечивают гибкость интерфейса.
  • Безопасное рендеринг HTML-контента требует дополнительной очистки.
  • Оптимизация производительности особенно важна при множественных редакторах и больших объёмах данных.
Оглавление