meWYSE — Block Editor

Funcionalidades

Funciona con cualquier elemento: textarea, div, span o cualquier HTML
Sistema de bloques: Inspirado en Notion, cada linea es un bloque independiente
12 tipos de bloques: Parrafo, titulos, citas, codigo, listas, checklists, tablas, imagenes, separadores
Formato enriquecido: Menu flotante con negrita, cursiva, colores, enlaces y mas
Menciones (@): Escribe @ para mencionar usuarios con autocompletado
Resumen y estadisticas: Indice de navegacion, conteo de palabras y tiempo de lectura
Menu slash (/): Menu contextual al estilo Notion para cambiar tipos de bloque
Atajos de teclado: Ctrl+B/I/U/Z/Y/K para formato rapido y undo/redo
Exportacion multiple: JSON, HTML, Markdown y texto plano
Soporte Markdown: Importar y exportar contenido Markdown
Internacionalizacion: Espanol, ingles y traducciones personalizadas
Temas y dark mode: Auto-deteccion del sistema + tema personalizable
Content Styles: Opcion para heredar estilos CSS de la pagina
Accesibilidad: ARIA attributes, focus-visible, keyboard navigation

Editor Basico

Editor aplicado a un textarea. Ideal para formularios y campos de texto enriquecido.

var editor = new meWYSE({
  target: '#basicEditor',
  onChange: function(data) {
    console.log('Contenido:', data.plainText);
  }
});

// Por defecto no toma foco. Para enfocar manualmente:
editor.focus();        // primer bloque
editor.focus(blockId); // bloque especifico

// Para auto-foco al inicializar:
// new meWYSE({ target: '#editor', autoFocus: true });

Controles

Editor con Toolbar

Editor con barra de herramientas superior para acceso rapido a formato.

var editor = new meWYSE({
  target: '#toolbarEditor',
  toolbar: true,
  onChange: function(data) {
    console.log('Contenido:', data.plainText);
  }
});

Controles

Editor con Summary

Editor con boton de resumen, estadisticas e indice de navegacion.

var editor = new meWYSE({
  target: '#summaryEditor',
  toolbar: true,
  summary: true,
  blocks: [
    { id: 1, type: 'heading1', content: 'Bienvenido' },
    { id: 2, type: 'paragraph', content: 'Contenido...' }
  ]
});

Controles

Sistema de Menciones

Escribe @ para mencionar usuarios con autocompletado y avatares.

var editor = new meWYSE({
  target: '#mentionsEditor',
  toolbar: true,
  mentions: [
    { id: '1', name: 'Juan Garcia', avatar: 'url/avatar.jpg' },
    { id: '2', name: 'Maria Lopez' }
  ]
});

Controles

Editor con Div

El editor funciona con cualquier elemento, no solo con textarea.

var editor = new meWYSE({
  target: '#divEditor',
  toolbar: true
});

// Funciona con div, span, p o cualquier elemento HTML

Este contenido inicial esta en un div.

Controles

Internacionalizacion (i18n)

Editor en ingles. Todos los menus y tooltips se muestran en el idioma configurado.

// Ingles
var editor = new meWYSE({ target: '#editor', lang: 'en' });

// Traducciones personalizadas (parcial o completo)
var editor = new meWYSE({
  target: '#editor',
  lang: {
    blockTypes: { paragraph: 'Paragraphe', heading1: 'Titre 1' },
    tooltips: { bold: 'Gras', italic: 'Italique' }
  }
});

Controles

Tema Dark

Dark mode se auto-detecta segun el sistema. Tambien puedes forzarlo con theme: 'dark'.

var editor = new meWYSE({
  target: '#darkEditor',
  toolbar: true,
  theme: 'dark'
});

// Sin theme, auto-detecta prefers-color-scheme del OS

Controles

Tema Compact

Editor compacto con theme: 'compact'. Ideal para sidebars y formularios.

var editor = new meWYSE({
  target: '#compactEditor',
  toolbar: true,
  theme: 'compact'
});

Controles

Sin estilos de contenido

Con contentStyles: false, los headings, blockquotes, tablas, etc. heredan los estilos CSS de la pagina.

var editor = new meWYSE({
  target: '#noStylesEditor',
  toolbar: true,
  contentStyles: false
});

// La pagina define sus propios estilos:
// #noStylesEditor h1 { font-size: 2em; color: navy; }
// #noStylesEditor blockquote { border-left: 4px solid blue; }

Controles

Buscar y Reemplazar · Fullscreen · Show Blocks · Contador

Atajo Ctrl+F / Cmd+F para abrir el panel de busqueda. El boton "pantalla completa" expande el editor sobre toda la ventana. "Mostrar bloques" muestra los limites de cada bloque y su tipo para debugging. La barra inferior muestra el contador de palabras, caracteres y tiempo de lectura en tiempo real.

var editor = new meWYSE({
  target: '#toolsEditor',
  toolbar: true,
  charCounter: true,     // barra inferior con palabras/caracteres/tiempo
  findReplace: true,     // Ctrl+F abre buscar y reemplazar (default true)
  fullscreen: true,      // muestra boton de pantalla completa (default true)
  showBlocksToggle: true // muestra boton de "mostrar bloques" (default true)
});

Toolbar con scroll horizontal

Pasa toolbarOverflow: 'scroll' para que la toolbar se mantenga en una sola fila con scroll horizontal cuando los botones no caben. La rueda vertical se traduce a scroll horizontal sobre la barra, las flechas/fades aparecen solo cuando hay overflow, y los botones de mover bloque (↑ ↓) quedan anclados a la derecha sin moverse. Encoge la ventana para forzar el overflow.

var editor = new meWYSE({
  target: '#scrollToolbarEditor',
  toolbar: true,
  toolbarOverflow: 'scroll'  // default 'wrap'
});

Soporte RTL (derecha-a-izquierda)

Para idiomas como árabe, hebreo o urdu. Pasa rtl: true en las opciones.

var editor = new meWYSE({
  target: '#rtlEditor',
  toolbar: true,
  rtl: true
});

Estilos custom (styleFormats)

Define estilos personalizados que aparecen en el dropdown de tipos de bloque. La página define los CSS, meWYSE solo aplica las clases. Abre el dropdown "Texto" en la toolbar para verlos.

var editor = new meWYSE({
  target: '#styleFormatsEditor',
  toolbar: true,
  styleFormats: [
    { title: 'Destacado',     block: 'p',          className: 'destacado-demo' },
    { title: 'Aviso',         block: 'blockquote', className: 'aviso-demo' },
    { title: 'Nota al margen', block: 'p',         className: 'nota-margen-demo' }
  ]
});

// Y en tu CSS:
// .destacado-demo  { background: yellow; padding: 8px; ... }
// .aviso-demo      { border-left: 4px solid red; ... }
// .nota-margen-demo { font-size: 0.9em; color: gray; ... }

Listas anidadas, dropdown de caso y atajos de teclado

Pulsa Tab dentro de un ítem de lista para anidar (hasta 5 niveles), Shift+Tab para des-anidar. El botón "Aa" del toolbar abre un dropdown con 5 opciones de caso: MAYÚSCULAS, minúsculas, Título, Oración e Invertir.

Atajos nuevos: Ctrl+E (código inline), Ctrl+Shift+X (tachado), Ctrl+Shift+K (limpiar formato), Ctrl+Alt+1/2/3 (H1/H2/H3), Ctrl+Shift+7/8 (lista numerada/viñetas).

var editor = new meWYSE({
  target: '#nestedEditor',
  toolbar: true
});

// Insertar bloques con indentLevel
editor.loadFromJSON([
  { id: 1, type: 'bulletList', content: 'Frutas',         indentLevel: 0 },
  { id: 2, type: 'bulletList', content: 'Manzana',        indentLevel: 1 },
  { id: 3, type: 'bulletList', content: 'Roja',           indentLevel: 2 },
  { id: 4, type: 'bulletList', content: 'Verde',          indentLevel: 2 },
  { id: 5, type: 'bulletList', content: 'Plátano',       indentLevel: 1 },
  { id: 6, type: 'bulletList', content: 'Verduras',       indentLevel: 0 }
]);

Callbacks onFocus / onBlur

Los callbacks onFocus y onBlur se disparan solo al entrar/salir del editor (no al moverse entre bloques internos ni al usar la toolbar/menus/modales). Útil para validaciones al perder foco.

var editor = new meWYSE({
  target: '#focusEditor',
  toolbar: true,
  onFocus: function(data) {
    console.log('focus en bloque', data.focusedBlockId, data.focusedBlockType);
  },
  onBlur: function(data) {
    if (!data.plainText.trim()) alert('El editor no puede estar vacío');
  }
});

Eventos en directo

Haz click dentro/fuera del editor o en la toolbar para ver los eventos:

(esperando eventos...)

Drag & drop de imágenes (entre celdas y bloques)

Las imágenes son arrastrables: pulsa una imagen y arrástrala a otra celda de la tabla, o fuera de la tabla para convertirla en bloque independiente. También puedes arrastrar un archivo del sistema operativo al editor o a una celda.

// El drag&drop es automático, no requiere configuración.
// Funciona con:
// - Imágenes en celdas de tabla ↔ otras celdas
// - Imágenes en celdas ↔ bloques independientes
// - Archivos arrastrados desde el OS → cualquier bloque o celda
var editor = new meWYSE({
  target: '#dragDropEditor',
  toolbar: true,
  imageMaxSize: 1024000  // opcional: límite 1MB
});

Soporte Markdown

Importar y exportar contenido en formato Markdown.

var editor = new meWYSE({
  target: '#markdownEditor',
  toolbar: true,
  onChange: function(data) {
    console.log(data.markdown); // Markdown del contenido
  }
});

// Exportar
var md = editor.getMarkdown();

// Importar
editor.loadFromMarkdown('# Titulo\n\nTexto con **negrita**.');

// Round-trip
editor.loadFromMarkdown(editor.getMarkdown());