tipex Download - tipex Quellcode herunterladen

tipex

Anderer Quellcode

1.0.0

Herunterladen

Tipex

Tipex ist ein fortschrittlicher Rich-Text-Editor, der auf Svelte zugeschnitten ist und sorgfältig mit den robusten Frameworks Tiptap und Prosemirror entwickelt wurde. Es ermöglicht Entwicklern die mühelose Erstellung von Rich-Text-Editoren und befreit sie von den Feinheiten der zugrunde liegenden Technologien, der Stilverwaltung und den damit verbundenen Komplexitäten.

Svelte5 und Runenmodus aktiviert! ?

Hauptmerkmale

Bereit für Svelte 5 : Gebaut mit den neuesten Funktionen von Svelte 5, einschließlich Runen und Snippets
Anpassbare Steuerung : Flexibles Steuerungssystem mit Standard- und benutzerdefinierten Optionen
Plugin-Architektur : Erweiterbar durch Tiptap-Erweiterungen
Responsiv : Funktioniert sowohl auf Desktop- als auch auf Mobilgeräten hervorragend
Schwebendes Menü : Kontextbezogene schwebende Symbolleiste für ein verbessertes Bearbeitungserlebnis
Linkverwaltung : Integrierte Linkverwaltung mit Vorschau- und Bearbeitungsfunktionen
Theming-Unterstützung : Einfaches Styling mit CSS-Variablen und Utility-Klassen
Leistungsoptimiert : Nutzt die Reaktionsfähigkeit von Svelte für eine reibungslose Bearbeitung
TypeScript-Unterstützung : Vollständige TypeScript-Unterstützung für ein besseres Entwicklungserlebnis

Installation

Installieren Sie das Paket von NPM:

 npm install „@friendofsvelte/tipex“

Grundlegende Verwendung

Importieren Sie die Komponente und verwenden Sie sie in Ihrer Komponente:

 <script lang="ts"> {Tipex} von „@friendofsvelte/tipex“ importieren;        let body = `<p>Dieser <a target="_blank" rel="noopener noreferrer" href="">Inhalt</a> wurde geschrieben von <a target="_blank" rel="noopener noreferrer" href=" http://bishwas.net/">Bishwas</a> im Jahr 2023.</p>`;</script>

<Tipex
     {body} steuert floatstyle="margin-top: 1rem; margin-bottom: 0;"class="h-[70vh] border border-neutral-200"/>

Kernkonzepte

Steuermodi

Tipex bietet zwei Steuerungsmodi:

Standardsteuerelemente ( controls={true} ):

Vorgefertigte Formatierungssymbolleiste
Anpassbar über die utilities
Perfekt für eine schnelle Umsetzung

Benutzerdefinierte Steuerelemente ( controls={false} ):

Volle Kontrolle über die Editor-Oberfläche
Verwenden Sie controlComponent für benutzerdefinierte Implementierungen
Ideal für spezielle Anwendungsfälle

Erweiterungssystem

Tipex nutzt das Erweiterungssystem von Tiptap für erweiterte Funktionalität:

 import { Tipex } from "@friendofsvelte/tipex";import { TextAlign } from '@tiptap/extension-text-align';const extensions = [TextAlign.configure({types: ['heading', 'paragraph'],} ),];// Verwendung in Komponente<Tipex {extensions} />

Schwebendes Menü

Das schwebende Menü bietet kontextbezogene Formatierungsoptionen:

 <Tipex Floating /> // Aktiviert das Floating-Menü

Erweiterte Nutzung

Individuelle Kopf- und Fußteile

Fügen Sie benutzerdefinierte Komponenten über oder unter dem Editor hinzu, indem Sie Svelte 5-Snippets verwenden:

 <script lang="ts"> {Tipex} von „@friendofsvelte/tipex“ importieren;        let body = "";</script>

<Tipex {Körper}>
    {#snippet head(editor)}
        <CustomHeader {editor} />
    {/Snippet}

        {#snippet foot(editor)}
        <CustomFooter {editor} />
    {/Snippet}
</Tipex>

Benutzerdefinierte Dienstprogramme

Fügen Sie benutzerdefinierte Steuerelemente hinzu und behalten Sie dabei die Standardsymbolleiste bei:

 <script lang="ts"> {Tipex} von „@friendofsvelte/tipex“ importieren;        let body = "";</script>

<Tipex-{Körper}-Steuerelemente>
    {#snippet utilities(editor)}
        <CustomFormatting {editor} />
    {/Snippet}
</Tipex>

Benutzerdefinierte Steuerkomponente

Erstellen Sie eine vollständig benutzerdefinierte Steueroberfläche:

 <script lang="ts"> {Tipex} von „@friendofsvelte/tipex“ importieren;        let body = "";</script>

<Tipex {body} Controls={false}>
    {#snippet controlComponent(editor)}
        <MyCustomControls {editor} />
    {/Snippet}
</Tipex>

Dokumentation

Eine umfassende Dokumentation finden Sie unter tipex.pages.dev.

Über Friend Of Svelte

Friend Of Svelte ist ein Community-Projekt, das Svelte-Entwicklern dabei helfen soll, tolle Svelte-Ressourcen zu finden und zu entwickeln. Unsere Mission ist es, qualitativ hochwertige, wartbare und zugängliche Tools für das Svelte-Ökosystem zu entwickeln.

Treten Sie der Community bei

Markieren Sie unsere Repositories
Beteiligen Sie sich an Projekten
Teilen Sie Ihre Ideen
Offene Mitgliedschaften für alle

Wenn Ihnen dieses Projekt gefällt, können Sie einer unserer Freunde sein, indem Sie einen Beitrag zum Projekt leisten. Die Mitgliedschaft steht allen offen.