Guía de Integración - Editor Avanzado Reinflable

Esta guía explica cómo integrar fácilmente el Editor Avanzado Reinflable (Estilo Goblo) en cualquier página web. El editor incluye funcionalidades de IA para sugerencia de texto, resumen, mejora de contenido, wiki.

Integración Básica

Para integrar el editor en tu página web, sigue estos pasos:

1. Incluye los archivos necesarios

Añade los siguientes enlaces a CSS y JavaScript en el <head> de tu HTML:

<link rel="stylesheet" href="http://carlomaxxine.com/librery/creator/5/css/editor-styles.css">
<script src="http://carlomaxxine.com/librery/creator/5/js/editor-core.js" defer></script>

2. Añade un contenedor para el editor

Coloca un elemento contenedor donde quieras que aparezca el editor:

<div id="mi-editor"></div>

3. Inicializa el editor

Añade el siguiente código JavaScript al final de tu página, justo antes del cierre de </body>:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const editor = new AdvancedEditor('#mi-editor', {
            placeholder: 'Escribe aquí...',
            suggestions: true,
            toolbar: true,
            saveOptions: true
        });
    });
</script>

Opciones de Configuración

El editor acepta las siguientes opciones de configuración:

const editor = new AdvancedEditor('#mi-editor', {
    // Texto que se muestra inicialmente en el editor
    placeholder: 'Comienza a escribir aquí...',
    
    // Habilitar/deshabilitar la barra de herramientas flotante
    toolbar: true,
    
    // Habilitar/deshabilitar las sugerencias de texto con IA
    suggestions: true,
    
    // Habilitar/deshabilitar las opciones de guardado
    saveOptions: true,
    
    // Altura inicial del editor (en píxeles o CSS válido)
    height: '400px',
    
    // Ancho inicial del editor (en píxeles o CSS válido)
    width: '100%'
});

Eventos

Puedes escuchar los siguientes eventos para interactuar con el editor:

const editorContainer = document.querySelector('#mi-editor');

// Evento cuando cambia el contenido
editorContainer.addEventListener('editor:change', function(e) {
    console.log('Contenido actualizado:', e.detail.content);
});

// Evento cuando se selecciona texto
editorContainer.addEventListener('editor:selection', function(e) {
    console.log('Texto seleccionado:', e.detail.text);
});

Métodos API

El editor proporciona los siguientes métodos para interactuar programáticamente:

// Obtener el contenido actual del editor
const contenido = editor.getContent();

// Establecer nuevo contenido
editor.setContent('<p>Nuevo contenido</p>');

// Insertar HTML en la posición actual del cursor
editor.insertHTML('<strong>Texto en negrita</strong>');

// Ejecutar un comando de edición
editor.execCommand('bold');
editor.execCommand('createLink', 'https://ejemplo.com');

Integración Guardado en Base de Datos

El editor está configurado para conectarse a la base de datos del espacio de usuario. -Debera asegúrarse de que esta identificado correctamente.

Nubes: Para el guardado en otras nubes debera estarse registrado y autenticarse directamente en plataformas externas. (Otras Posibles)

Integración con APIs de IA

El editor utiliza las siguientes APIs de IA:

Groq: Para sugerencias de texto y resumen
Gemini: Para mejorar el texto existente

El Fine-Tuning de modelos garantizara estas funcionalidades minimas adaptadas para distintos lenguajes. Los principales usos extendidos se realizaran con modificaciones LLama y ALIA; Para orientarse al lenguaje Español, como la lengua del Procesamiento del Lenguaje Natural. (PLN)

Modelos: Puedes configurar tus propias claves APIs de IA, desde tu espacio de Usuario Activo. (Integrar y usar cuantos modelos desees.)

Personalización Avanzada

Para personalizar aún más el editor, puedes modificar los siguientes archivos:

css/editor-styles.css - Para cambiar la apariencia
js/editor-core.js - Para modificar la funcionalidad

Ejemplo Completo

Aquí tienes un ejemplo completo de integración:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página con Editor Avanzado</title>
    <link rel="stylesheet" href="http://carlomaxxine.com/librery/creator/5/css/editor-styles.css">
</head>
<body>
    <h1>Mi Editor de Texto</h1>
    
    <div id="mi-editor"></div>
    
    <script src="http://carlomaxxine.com/librery/creator/5/js/editor-core.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const editor = new AdvancedEditor('#mi-editor', {
                placeholder: 'Escribe tu contenido aquí...',
                height: '500px'
            });
            
            // Ejemplo de interacción con el editor
            document.getElementById('mi-boton').addEventListener('click', function() {
                const contenido = editor.getContent();
                console.log('Contenido actual:', contenido);
            });
        });
    </script>
</body>
</html>

Soporte para Dispositivos Móviles

El editor está diseñado para ser completamente responsive y funcionar en dispositivos móviles. La barra de herramientas flotante (Globo) se adapta automáticamente al tamaño de la pantalla.

Solución de Problemas

Si encuentras algún problema con el editor, verifica lo siguiente:

Asegúrate de que todos los codigos CSS y JavaScript están correctamente incluidos sin errores.
Comprueba la consola del navegador para ver si hay errores JavaScript ó pregunta a Copilot.
Asegúrate de que las APIs sean correctas y que esten activas.

Para cualquier otra consulta o problema, consultar la documentación completa, contactar a soporte ó pedir ayuda a la IA. | Manual | SALIR