Загрузка tipex - Загрузка исходного кода tipex

tipex

Другой исходный код

1.0.0

Скачать

Типекс

Tipex представляет собой продвинутый текстовый редактор, специально разработанный для Svelte и тщательно разработанный с использованием надежных платформ Tiptap и Prosemirror. Он дает разработчикам возможность легко создавать редакторы форматированного текста, освобождая их от тонкостей базовых технологий, управления стилями и связанных с ними сложностей.

Активирован режим Svelte5 и руны! ?

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

Svelte 5 Ready : создан с использованием новейших функций Svelte 5, включая руны и фрагменты.
Настраиваемые элементы управления : Гибкая система управления с опциями по умолчанию и настраиваемыми параметрами.
Архитектура плагинов : расширяется с помощью расширений Tiptap.
Адаптивный : отлично работает как на настольных, так и на мобильных устройствах.
Плавающее меню : контекстно-зависимая плавающая панель инструментов для расширенных возможностей редактирования.
Управление ссылками : встроенная обработка ссылок с возможностью предварительного просмотра и редактирования.
Поддержка тем : простая стилизация с помощью переменных CSS и служебных классов.
Оптимизированная производительность : использует реактивность Svelte для плавного редактирования.
Поддержка TypeScript : Полная поддержка TypeScript для лучшего опыта разработки.

Установка

Установите пакет из NPM:

 npm установить "@friendofsvelte/tipex"

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

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

 <script lang="ts"> импортировать {Tipex} из "@friendofsvelte/tipex";        let body = `<p>Этот <a target="_blank" rel="noopener noreferrer" href="">контент</a> написан <a target="_blank" rel="noopener noreferrer" href=" http://bishwas.net/">Бишвас</a> в 2023 году.</p>`;</script>

<Типекс
     {body} контролирует floatstyle="margin-top: 1rem; Margin-bottom: 0;"class="h-[70vh] border border-neutral-200"/>

Основные понятия

Режимы управления

Tipex предлагает два режима управления:

Элементы управления по умолчанию ( controls={true} ):

Готовая панель инструментов форматирования
Настраивается через utilities
Идеально подходит для быстрого внедрения

Пользовательские элементы управления ( controls={false} ):

Полный контроль над интерфейсом редактора
Используйте controlComponent для пользовательских реализаций.
Идеально подходит для специализированных случаев использования

Система расширения

Tipex использует систему расширения Tiptap для расширения функциональности:

 import { Tipex } from "@friendofsvelte/tipex";import { TextAlign } from '@tiptap/extension-text-align';const Extensions = [TextAlign.configure({types: ['heading', 'paragraph'],} ),];// Использование в компоненте<Tipex {extensions} />

Плавающее меню

Плавающее меню предоставляет параметры контекстно-зависимого форматирования:

 <Tipex float /> // Включает плавающее меню

Расширенное использование

Пользовательские секции головы и ног

Добавьте пользовательские компоненты над или под редактором, используя фрагменты Svelte 5:

 <script lang="ts"> импортировать {Tipex} из "@friendofsvelte/tipex";        пусть тело = "";</script>

<Типекс {тело}>
    {#snippet head(редактор)}
        <CustomHeader {editor} />
    {/фрагмент}

        {#snippet foot(editor)}
        <CustomFooter {редактор} />
    {/фрагмент}
</Типекс>

Пользовательские утилиты

Добавьте пользовательские элементы управления, сохранив панель инструментов по умолчанию:

 <script lang="ts"> импортировать {Tipex} из "@friendofsvelte/tipex";        пусть тело = "";</script>

<Элементы управления Tipex {body}>
    {#snippet утилиты(редактор)}
        <Пользовательское форматирование {редактор} />
    {/фрагмент}
</Типекс>

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

Создайте полностью собственный интерфейс управления:

 <script lang="ts"> импортировать {Tipex} из "@friendofsvelte/tipex";        пусть тело = "";</script>

<Tipex {body} control={false}>
    {#snippet controlComponent(editor)}
        <MyCustomControls {редактор} />
    {/фрагмент}
</Типекс>

Документация

Подробную документацию можно найти на сайте Tipex.pages.dev.

О друге Svelte

Friend Of Svelte — это проект сообщества, призванный помочь разработчикам Svelte находить и разрабатывать потрясающие ресурсы Svelte. Наша миссия — создавать качественные, удобные в обслуживании и доступные инструменты для экосистемы Svelte.