Introducción

textCore es un editor WYSIWYG (What You See Is What You Get) ligero y fácil de integrar, diseñado como alternativa a TinyMCE. Proporciona una experiencia de edición rica con un sistema modular de plugins y skins personalizables.

Características principales

Instalación

textCore puede usarse de dos formas: desde CDN (recomendado) o descargando los archivos localmente.

🚀 Método 1: CDN (Recomendado - Más Simple)

La forma más fácil de usar textCore es desde el CDN. Solo necesitas una línea:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página</title>
    <!-- Solo esta línea -->
    <script src="https://textcore.ceballosleon.com/textcore-loader.js"></script>
</head>
<body>
    <!-- El editor se inicializa automáticamente -->
    <textarea data-textcore 
              data-height="400"
              data-skin="dark"
              data-plugins="table,preview,emoji"></textarea>
</body>
</html>
✨ Ventajas del CDN:
  • Una sola línea para incluir
  • Carga automática de todas las dependencias
  • Sin configuración adicional
  • Actualizaciones automáticas
  • Mejor rendimiento con caché del navegador

📦 Método 2: Instalación Local

Si prefieres descargar los archivos y usarlos localmente:

Archivos requeridos

Instalación básica local

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página</title>
    <link rel="stylesheet" href="editor.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <textarea id="myEditor"></textarea>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="editor.js"></script>
    <script src="plugins.js"></script>
    <script src="skins.js"></script>
    <script>
        const editor = new TinyEditor('#myEditor', {
            height: 400
        });
    </script>
</body>
</html>
Nota: FontAwesome es requerido para los iconos. Si usas el CDN, se carga automáticamente.

Configuración Básica

🚀 Usando CDN (Recomendado)

Con el CDN, la configuración es súper simple usando atributos data-*:

Ejemplo básico con CDN

<!-- Incluir el loader -->
<script src="https://textcore.ceballosleon.com/textcore-loader.js"></script>

<!-- Editor básico -->
<textarea data-textcore data-height="400"></textarea>

<!-- Editor con configuración -->
<textarea data-textcore 
          data-height="400"
          data-skin="dark"
          data-plugins="table,preview,emoji"
          data-placeholder="Escribe aquí..."></textarea>

Atributos disponibles

Atributo Descripción Ejemplo
data-height Altura en píxeles data-height="400"
data-width Ancho del editor data-width="100%"
data-skin Skin a aplicar data-skin="dark"
data-plugins Plugins (separados por comas) data-plugins="table,preview,emoji"
data-toolbar Barra de herramientas data-toolbar="bold italic | link"
data-menubar Mostrar menú data-menubar="true"
data-placeholder Texto placeholder data-placeholder="Escribe..."

⚙️ Inicialización Manual (Local o Avanzado)

Si prefieres inicializar manualmente o usar archivos locales:

Ejemplo básico

const editor = new TinyEditor('#myEditor', {
    height: 400,
    width: '100%',
    toolbar: 'bold italic underline | alignleft aligncenter alignright | bullist numlist | link image | code'
});

Con jQuery

textCore también soporta inicialización con jQuery:

$('#myEditor').tinyeditor({
    height: 400,
    plugins: ['table', 'preview'],
    skin: 'modern'
});

Opciones de Configuración

Las siguientes opciones están disponibles para personalizar el comportamiento del editor:

Opción Tipo Valor por defecto Descripción
height Number 400 Altura del editor en píxeles
width String '100%' Ancho del editor (puede ser '100%', '500px', etc.)
toolbar String 'bold italic...' Cadena que define los botones de la toolbar. Usa '|' para separar grupos
menubar Boolean true Mostrar u ocultar la barra de menú
plugins Array [] Array de nombres de plugins a cargar
skin String 'default' Nombre del skin a aplicar
placeholder String 'Escribe aquí...' Texto de placeholder cuando el editor está vacío

Plugins

Los plugins extienden la funcionalidad de textCore. Puedes habilitar plugins usando la opción plugins.

Plugins disponibles

Skins

Los skins permiten personalizar completamente la apariencia del editor. textCore incluye varios skins predefinidos:

Toolbar

La barra de herramientas se configura con una cadena de texto donde los comandos se separan por espacios y los grupos por |:

toolbar: 'bold italic underline | alignleft aligncenter alignright | bullist numlist | link image | code'

Menubar

La barra de menú incluye menús desplegables con todas las funciones organizadas:

Atajos de Teclado

Atajo Acción
Ctrl+B Negrita
Ctrl+I Cursiva
Ctrl+U Subrayado
Ctrl+Z Deshacer
Ctrl+Y Rehacer
Ctrl+S Guardar
F1 Ayuda

API del Editor

textCore proporciona varios métodos para interactuar con el editor programáticamente:

Métodos principales

// Obtener contenido HTML
const content = editor.getContent();

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

// Enfocar el editor
editor.focus();

// Cambiar skin dinámicamente
editor.setSkin('dark');

// Destruir el editor
editor.destroy();

Ejemplos

Ejemplo 1: Editor básico

<textarea id="editor1"></textarea>

<script>
    const editor = new TinyEditor('#editor1', {
        height: 400,
        toolbar: 'bold italic underline | alignleft aligncenter alignright | bullist numlist | link image | code'
    });
</script>

Ejemplo 2: Editor con plugins

const editor = new TinyEditor('#editor2', {
    height: 500,
    plugins: ['table', 'charmap', 'insertdatetime', 'preview', 'fullscreen'],
    toolbar: 'bold italic underline | table | charmap insertdatetime | preview fullscreen | code',
    skin: 'modern'
});

Simulador Interactivo

Prueba textCore en tiempo real. Selecciona los plugins y el skin que deseas usar y observa cómo cambia el editor al instante.

Configuración del Editor

Plugins

Skin

Código Generado

Copia este código para crear un editor con la configuración seleccionada. Se muestra el método CDN (recomendado) y el método local (alternativa): 

// Código se generará automáticamente...

Editor en Vivo