Package Exports

react-tiny-editor-word
react-tiny-editor-word/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tiny-editor-word) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Tiny Editor Word

Editor WYSIWYG tipo Word para React - Sin dependencias externas ni API keys.

🚀 Características

✍️ Editor tipo Word - WYSIWYG (What You See Is What You Get)
🖼️ Insertar imágenes - Desde tu dispositivo con redimensionamiento
🎨 Formato completo - Negrita, cursiva, subrayado, colores
📏 Zoom controlado - 75% a 150% sin salirse del contenedor
📱 Responsive - Se adapta a diferentes tamaños de pantalla
🔧 Sin dependencias - No requiere API keys ni librerías externas
🎯 Fácil de usar - Interface intuitiva tipo Microsoft Word

⚙️ Props Prop Tipo Por Defecto Descripción value string '' Contenido HTML actual del editor handleChange function requerido Función que recibe el HTML actualizado 🖼️ Manejo de Imágenes Tamaño máximo: 1078 × 607 px

Formato: JPG, PNG, GIF, WebP

Redimensionamiento: Click en imagen para ajustar tamaño

Base64: Las imágenes se convierten a base64 automáticamente

🎨 Formatos Soportados Texto: Negrita, cursiva, subrayado, tachado

Encabezados: H1, H2, H3, párrafo normal

Alineación: Izquierda, centro, derecha, justificado

Listas: Con viñetas y numeradas

Enlaces: Hipervínculos

Colores: Color de texto personalizable

❓ Preguntas Frecuentes ¿Necesito API keys? No, funciona completamente offline.

¿Qué navegadores soporta? Todos los navegadores modernos que soporten contentEditable.

¿Puedo usar imágenes? Sí, se insertan como base64 en el HTML.

📄 Licencia MIT - Libre para uso personal y comercial.

📦 Instalación

## npm install react-tiny-editor-word
npm install react-tiny-editor-word --registry http://172.19.200.22:4873/

💉 Importacion del componente

import EditorWord from 'react-tiny-editor-word'

Ejemplo de uso

    import { useState } from 'react';
    import EditorWord from 'react-tiny-editor-word';

    function App() {
    const [content, setContent] = useState('<h1>¡Hola Mundo!</h1><p>Empieza a editar...</p>');

    return (
        <div style={{ maxWidth: '800px', margin: '0 auto' }}>
        <h2>Mi Documento</h2>
        <EditorWord
            value={content}
            handleChange={(html) => setContent(html)}
        />
        <div style={{ marginTop: '20px' }}>
            <h3>HTML de salida:</h3>
            <pre>{content}</pre>
        </div>
        </div>
    );
    }

Emplo de mostrar solo los necesarios

Valores por defecto para mostrar cada herramienta, las muestra todas.

isFormato = true, isImagenes = true, isColores = true, isAlineamiento = true, isURL = true, isListas = true

        <EditorWord
            value={content}
            handleChange={(html) => setContent(html)}
            isFormato = {false} // Oculta Formato
            isImagenes = {true} // Oculta el agregar imagenes
            isColores = {true} // Oculta el cambiar colores 
            isAlineamiento = {true} // Oculta el alineamineto de los textos
            isURL = {true} // oculta la insercion de urls
            isListas = {true} //oculta las listas
        />