tipex Télécharger - tipex Téléchargement du code source

tipex

Autre code source

1.0.0

Télécharger

Tipex

Tipex se présente comme un éditeur de texte riche avancé conçu pour Svelte, méticuleusement conçu avec les frameworks robustes Tiptap et Prosemirror. Il permet aux développeurs de créer sans effort des éditeurs de texte enrichis, en les libérant des subtilités des technologies sous-jacentes, de la gestion du style et des complexités associées.

Svelte5 et mode runes activés ! ?

Principales fonctionnalités

Svelte 5 Ready : Construit avec les dernières fonctionnalités de Svelte 5, notamment les runes et les extraits de code.
Contrôles personnalisables : système de contrôle flexible avec des options par défaut et personnalisées
Architecture du plugin : Extensible grâce aux extensions Tiptap
Adaptatif : fonctionne parfaitement sur les appareils de bureau et mobiles
Menu flottant : barre d'outils flottante contextuelle pour une expérience d'édition améliorée
Gestion des liens : gestion intégrée des liens avec capacités de prévisualisation et d'édition
Prise en charge des thèmes : style facile avec des variables CSS et des classes utilitaires
Performances optimisées : exploite la réactivité de Svelte pour un montage fluide
Prise en charge de TypeScript : prise en charge complète de TypeScript pour une meilleure expérience de développement

Installation

Installez le package depuis NPM :

 npm install "@friendofsvelte/tipex"

Utilisation de base

Importez le composant et utilisez-le dans votre composant :

 <script lang="ts"> importer {Tipex} depuis "@friendofsvelte/tipex" ;        let body = `<p>Ce <a target="_blank" rel="noopener noreferrer" href="">contenu</a> est écrit par <a target="_blank" rel="noopener noreferrer" href=" http://bishwas.net/">Bishwas</a> en 2023.</p>`;</script>

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

Concepts de base

Modes de contrôle

Tipex propose deux modes de contrôle :

Contrôles par défaut ( controls={true} ) :

Barre d'outils de formatage prédéfinie
Personnalisable via l'accessoire utilities
Parfait pour une mise en œuvre rapide

Contrôles personnalisés ( controls={false} ) :

Contrôle total sur l'interface de l'éditeur
Utilisez controlComponent pour les implémentations personnalisées
Idéal pour les cas d'utilisation spécialisés

Système d'extension

Tipex exploite le système d'extension de Tiptap pour des fonctionnalités améliorées :

 importer { Tipex } depuis "@friendofsvelte/tipex"; importer { TextAlign } depuis '@tiptap/extension-text-align';const extensions = [TextAlign.configure({types : ['heading', 'paragraph'],} ),];// Utilisation dans le composant<Tipex {extensions} />

Menu flottant

Le menu flottant fournit des options de formatage contextuelles :

 <Tipex flottant /> // Active le menu flottant

Utilisation avancée

Sections de tête et de pied personnalisées

Ajoutez des composants personnalisés au-dessus ou en dessous de l'éditeur à l'aide des extraits de code Svelte 5 :

 <script lang="ts"> importer {Tipex} depuis "@friendofsvelte/tipex" ;        laissez corps = "";</script>

<Tipex {corps}>
    {#tête d'extrait (éditeur)}
        <CustomHeader {éditeur} />
    {/fragment}

        {#extrait de pied (éditeur)}
        <CustomFooter {éditeur} />
    {/fragment}
</Tipex>

Utilitaires personnalisés

Ajoutez des contrôles personnalisés tout en conservant la barre d'outils par défaut :

 <script lang="ts"> importer {Tipex} depuis "@friendofsvelte/tipex" ;        laissez corps = "";</script>

<Commandes Tipex {corps}>
    {#utilitaires d'extraits de code (éditeur)}
        <CustomFormatting {éditeur} />
    {/fragment}
</Tipex>

Composant de contrôle personnalisé

Créez une interface de contrôle entièrement personnalisée :

 <script lang="ts"> importer {Tipex} depuis "@friendofsvelte/tipex" ;        laissez corps = "";</script>

<Tipex {body} contrôles={false}>
    {#snippet controlComponent (éditeur)}
        <MyCustomControls {éditeur} />
    {/fragment}
</Tipex>

Documentation

Pour une documentation complète, visitez tipex.pages.dev.

À propos de L'ami de Svelte

Friend Of Svelte est un projet communautaire visant à aider les développeurs Svelte à trouver et à développer de superbes ressources Svelte. Notre mission est de créer des outils de haute qualité, maintenables et accessibles pour l'écosystème Svelte.