Documentación

Editor WYSIWYG

Ligero, con plugins y skins. Se integra con un <textarea data-textcore>. Stylewind e IconAwesome viven aparte — el CDN público no se modifica desde este panel.

CDN

CDN (producción): https://textcore.ceballosleon.com/textcore-loader.js — una línea y listo. Aquí documentamos la misma API sin tocar esos archivos.

Introducción

textCore es un editor WYSIWYG pensado como alternativa ligera a TinyMCE: plugins modulares, skins y toolbar configurable.

Integración rápida

Loader CDN + atributos data-* en el textarea.

Plugins

Tablas, preview, emoji, media, fullscreen y más.

Skins

default, dark, modern, corporate…

Vista HTML

Edición de código y API JS (getContent, setSkin…).

Instalación

Dos caminos: CDN (recomendado) o archivos locales.

CDN (recomendado)

Una sola etiqueta script. El loader trae CSS, JS, plugins y skins.

HTML

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

<textarea data-textcore
          data-height="400"
          data-skin="dark"
          data-plugins="table,preview,emoji"></textarea>

Local (avanzado)

Incluye editor.css, jQuery, editor.js, plugins.js y skins.js, luego instancia TinyEditor.

const editor = new TinyEditor('#myEditor', {
  height: 400,
  skin: 'modern'
});

Configuración con data-*

Con el CDN, el editor se inicializa solo si el textarea tiene data-textcore.

Atributo	Descripción	Ejemplo
`data-height`	Altura en px	`data-height="400"`
`data-width`	Ancho del editor	`data-width="100%"`
`data-skin`	Skin visual	`data-skin="dark"`
`data-plugins`	Plugins (coma)	`data-plugins="table,preview"`
`data-toolbar`	Botones de toolbar	`data-toolbar="bold italic \| link"`
`data-menubar`	Mostrar menú	`data-menubar="true"`
`data-placeholder`	Placeholder	`data-placeholder="Escribe…"`

Opciones (JS)

Equivalentes al inicializar con new TinyEditor(sel, options) o $('#el').tinyeditor({…}).

Opción	Tipo	Default	Descripción
`height`	Number	400	Altura en píxeles
`width`	String	'100%'	Ancho CSS
`toolbar`	String	bold italic…	Grupos con `\|`
`menubar`	Boolean	true	Barra de menú
`plugins`	Array	[]	Nombres de plugins
`skin`	String	'default'	Skin activo
`placeholder`	String	'Escribe aquí…'	Texto vacío

Plugins

table Tablas searchreplace Buscar / reemplazar charmap Caracteres insertdatetime Fecha y hora preview Vista previa fullscreen Pantalla completa media Media / video imagemanager Imágenes typography Tipografía googlefonts Google Fonts emoji Emoji

Skins

Los skins cambian la apariencia del editor (toolbar, menubar, bordes, colores). Hay 6 skins incluidos en skins.js. Elige uno abajo para previsualizarlo y márcalo como predeterminado en esta documentación (se guarda en tu navegador y lo usa el simulador).

HTML · CDN

<textarea data-textcore data-skin="modern"></textarea>

API: editor.setSkin('dark') · Atributo: data-skin="corporate" · Opción JS: new TinyEditor('#el', { skin: 'minimal' })

Skin	Uso	Notas
`default`	Omitir `data-skin` o pasar `default`	Estilo claro clásico
`dark`	`data-skin="dark"`	Editor y toolbar oscuros
`minimal`	`data-skin="minimal"`	Sin sombra ni borde grueso
`modern`	`data-skin="modern"`	Gradiente violeta (predeterminado en esta docs)
`corporate`	`data-skin="corporate"`	Grises corporativos
`colorful`	`data-skin="colorful"`	Gradiente multicolor

Toolbar & menubar

Comandos separados por espacio; grupos con |.

toolbar

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

Menubar: Archivo, Editar, Insertar, Formato, Ver, Ayuda.

Atajos

Ctrl+BNegrita

Ctrl+ICursiva

Ctrl+USubrayado

Ctrl+ZDeshacer

Ctrl+YRehacer

Ctrl+SGuardar

F1Ayuda

API

JavaScript

const content = editor.getContent();
editor.setContent('<p>Nuevo contenido</p>');
editor.focus();
editor.setSkin('dark');
editor.destroy();

Simulador Interactivo

Elige plugins, comandos de toolbar y skin. Actualiza el editor en vivo (API local — el CDN no se toca).

Configuración del Editor

Plugins

Comandos del Toolbar

Skin

Editor en vivo

Código Generado

Copia el snippet CDN con la configuración actual del simulador (data-plugins, data-toolbar, data-skin…).

HTML · CDN

// El código se genera al configurar el simulador…