svelte-svs-editor — Svelte Simple Editor

SvsEditor — это простой визуальный редактор для Svelte-приложений с базовым функционалом, позволяющим редактировать текст, добавлять картинки, таблицы, списки, формы, ссылки и другие элементы.

Ключевые особенности

Базовое форматирование:

• B, I, S, U, H1-5, OL, UL, QUOTE, LEFT, CENTER, RIGHT, LINK, CODE, TABLE

Работа с картинками:

• Вставка через drag and drop (Dropzone) или по вставке из буфера.
• Картинка сохраняется в виде base64 (не отправляется на сервер).
• Возможность перекодировать вставленный base64 в webp-base64 и изменять размеры перед вставкой.

Простая интеграция:

• Редактор был создан для Django-шаблонов, поэтому может "биндиться" к любому элементу, по умолчанию к
  <div id="svs-editor">
  .
• Удобен для быстрого редактирования контента в админке, а также во внешних приложениях.

Безопасность (санитизация):

• Есть возможность включить санитизацию HTML через DOMPurify.
• Запрещённые теги и атрибуты можно указать в конфиге.

Настройка качества webp:

• Используется библиотека @jsquash/webp для конвертации изображений в webp.
• Качество и прочие параметры задаются в конфиге.

Установка

1. Склонировать репозиторий:

2. Установить зависимости:

3. Запустить проект для разработки:

Конфигурация

Файл:

Внутри него доступны различные настройки, например:

Если вы используете редактор на публичном сайте, для повышения безопасности рекомендуется включать

Использование

Допустим, у вас есть Svelte-приложение. Добавьте в него SvsEditor:

Использование с роутингом

Вариант использования без роутинга

Дополнительная информация

• Для санитизации HTML используется библиотека DOMPurify.
• Для конвертации изображений в webp используется @jsquash/webp.

Лицензия

Этот редактор распространяется "как есть". При желании вы можете адаптировать его под свои нужды, дополнять и изменять функционал. Указывайте авторство, если используете проект как основу для своих решений.

Обратная связь

Если у вас есть идеи по улучшению редактора, либо вы находите ошибки или баги, пожалуйста, создавайте issues или пул-реквесты на Gitverse.