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. Склонировать репозиторий:

   git clone https://gitverse.ru/DADementr/svelte-svs-editor
   

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

   cd svelte-svs-editor
   npm install
   

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

   npm run dev
   

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

Файл:

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

export const config = {
    USE_SANITAZED_HTML: false,  // Включить/выключить санитизацию через DOMPurify
    FORBIDDEN_TAGS: ['script', 'iframe'],  // Теги, которые будут вырезаны
    FORBIDDEN_ATTRS: ['onerror', 'onclick'], // Атрибуты, которые будут вырезаны
    DEFAULT_QUALITY: 90  // Качество для конвертации в webp
};

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

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

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

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

<script>
    import Editor from "./lib/SvsEditor/Svs-editor.svelte";
    import { Router, Route } from 'svelte-routing';
</script>

<main>
    <Router>
        <Route path="/">
            <!-- Настройка или включение редактора -->
            <Editor />
            
            <!-- Место, куда будет биндиться редактор -->
            <div id="svs-editor" class="svs-editor"></div>
        </Route>
    </Router>
</main>

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

<script>
    import Editor from "./lib/SvsEditor/Svs-editor.svelte";
</script>

<main>
    <Editor />
    <div id="svs-editor" class="svs-editor"></div>
</main>

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

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

Лицензия

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

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

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