Descarga tipex - Descarga del código fuente tipex

tipex

Otro código fuente

1.0.0

Descargar

tipex

Tipex es un editor de texto enriquecido avanzado diseñado para Svelte, meticulosamente diseñado con los robustos marcos Tiptap y Prosemirror. Permite a los desarrolladores crear sin esfuerzo editores de texto enriquecidos, liberándolos de las complejidades de las tecnologías subyacentes, la gestión de estilos y las complejidades relacionadas.

¡Svelte5 y modo runas activados! ?

Características clave

Svelte 5 Ready : Creado con las últimas funciones de Svelte 5, incluidas runas y fragmentos
Controles personalizables : sistema de control flexible con opciones predeterminadas y personalizadas
Arquitectura de complementos : extensible a través de extensiones Tiptap
Responsivo : Funciona muy bien tanto en dispositivos móviles como de escritorio
Menú flotante : barra de herramientas flotante contextual para una experiencia de edición mejorada
Gestión de enlaces : Manejo de enlaces integrado con capacidades de vista previa y edición
Soporte de temas : estilo sencillo con variables CSS y clases de utilidad
Rendimiento optimizado : aprovecha la reactividad de Svelte para una edición fluida
Compatibilidad con TypeScript : compatibilidad total con TypeScript para una mejor experiencia de desarrollo

Instalación

Instale el paquete desde NPM:

 instalación npm "@friendofsvelte/tipex"

Uso básico

Importe el componente y utilícelo en su componente:

 <script lang="ts"> importar {Tipex} desde "@friendofsvelte/tipex";        let body = `<p>Este <a target="_blank" rel="noopener noreferrer" href="">contenido</a> está escrito por <a target="_blank" rel="noopener noreferrer" href=" http://bishwas.net/">Bishwas</a> en 2023.</p>`;</script>

<tipox
     {body} controla estilo flotante="margin-top: 1rem; margin-bottom: 0;"class="h-[70vh] border border-neutral-200"/>

Conceptos básicos

Modos de control

Tipex ofrece dos modos de control:

Controles predeterminados ( controls={true} ):

Barra de herramientas de formato prediseñada
Personalizable a través del accesorio utilities .
Perfecto para una implementación rápida

Controles personalizados ( controls={false} ):

Control total sobre la interfaz del editor.
Utilice controlComponent para implementaciones personalizadas
Ideal para casos de uso especializados

Sistema de extensión

Tipex aprovecha el sistema de extensión de Tiptap para mejorar la funcionalidad:

 importar { Tipex } de "@friendofsvelte/tipex"; importar { TextAlign } de '@tiptap/extension-text-align'; extensiones const = [TextAlign.configure({tipos: ['encabezado', 'párrafo'],} ),];// Uso en el componente<Tipex {extensiones} />

Menú flotante

El menú flotante proporciona opciones de formato contextuales:

 <Tipex flotante/> // Habilita el menú flotante

Uso avanzado

Secciones de cabecera y pies personalizadas

Agregue componentes personalizados encima o debajo del editor usando fragmentos de Svelte 5:

 <script lang="ts"> importar {Tipex} desde "@friendofsvelte/tipex";        dejar cuerpo = "";</script>

<Tipex {cuerpo}>
    {#cabeza de fragmento (editor)}
        <Encabezado personalizado {editor} />
    {/retazo}

        {#pie de fragmento (editor)}
        <Pie de página personalizado {editor} />
    {/retazo}
</Tipex>

Utilidades personalizadas

Agregue controles personalizados manteniendo la barra de herramientas predeterminada:

 <script lang="ts"> importar {Tipex} desde "@friendofsvelte/tipex";        dejar cuerpo = "";</script>

<Controles Tipex {cuerpo}>
    {#utilidades de fragmentos (editor)}
        <Formato personalizado {editor} />
    {/retazo}
</Tipex>

Componente de control personalizado

Cree una interfaz de control completamente personalizada:

 <script lang="ts"> importar {Tipex} desde "@friendofsvelte/tipex";        dejar cuerpo = "";</script>

<Tipex {cuerpo} controles={false}>
    {#snippet controlComponent(editor)}
        <MisControlesPersonalizados {editor} />
    {/retazo}
</Tipex>

Documentación

Para obtener documentación completa, visite tipex.pages.dev.

Acerca de Amigo de Svelte

Friend Of Svelte es un proyecto impulsado por la comunidad para ayudar a los desarrolladores de Svelte a encontrar y desarrollar increíbles recursos de Svelte. Nuestra misión es crear herramientas accesibles, fáciles de mantener y de alta calidad para el ecosistema Svelte.