Article Editor

<sg-article-editor> v0.1.1

Editor de texto enriquecido con soporte para HTML y Markdown. Incluye barra de herramientas de formato, vista previa en tiempo real, y contador de palabras.

Ejemplos

Editor completo

    
    example.html 
<sg-article-editor
  value="<p>Empieza a escribir...</p>"
  view-mode="split"
  min-height="300"
  placeholder="Escribe tu artículo aquí..."
  locale="es">
</sg-article-editor>
    

Solo editor

    
    example.html 
<sg-article-editor
  view-mode="editor"
  min-height="200"
  available-view-modes="editor">
</sg-article-editor>
    

Playground

Experimenta con el editor en tiempo real:

API Reference

Propiedades

Prop	Tipo	Default	Descripción
`value`	`string`	`''`	Contenido del editor
`content-type`	`'html' \| 'markdown'`	`'html'`	Tipo de sintaxis del contenido
`view-mode`	`'editor' \| 'preview' \| 'split'`	`'editor'`	Modo de visualización
`min-height`	`number`	`400`	Altura mínima en pixels
`placeholder`	`string`	`'Start writing...'`	Texto placeholder
`disabled`	`boolean`	`false`	Estado deshabilitado
`readonly`	`boolean`	`false`	Modo solo lectura
`spellcheck`	`boolean`	`true`	Habilitar corrección ortográfica
`show-word-count`	`boolean`	`true`	Mostrar contador de palabras
`enable-external-preview`	`boolean`	`true`	Habilitar preview en ventana externa
`locale`	`'en' \| 'es' \| 'fr' \| 'de' \| ...`	`'en'`	Idioma de la interfaz
`available-content-types`	`string`	`'html,markdown'`	Tipos de contenido disponibles
`available-view-modes`	`string`	`'editor,preview,split'`	Modos de vista disponibles

Eventos

Evento	Tipo	Descripción
`editorChange`	`CustomEvent<EditorChangeEvent>`	Emitido cuando el contenido cambia
`contentTypeChange`	`CustomEvent<ContentTypeChangeEvent>`	Emitido al cambiar el tipo de contenido
`viewModeChange`	`CustomEvent<ViewModeChangeEvent>`	Emitido al cambiar el modo de vista
`mediaLibraryOpen`	`CustomEvent<void>`	Emitido al solicitar la librería de medios
`mediaInsert`	`CustomEvent<MediaItem>`	Emitido al insertar un medio

Métodos

Método	Retorna	Descripción
`getContent()`	`Promise<string>`	Obtiene el contenido actual
`setContent()`	`Promise<void>`	Establece el contenido programáticamente
`getHtml()`	`Promise<string>`	Obtiene el contenido convertido a HTML
`focusEditor()`	`Promise<void>`	Da foco al área de edición
`insertAtCursor()`	`Promise<void>`	Inserta contenido en la posición del cursor
`insertMedia()`	`Promise<void>`	Inserta un elemento multimedia

Cómo usar

Tipos de contenido

El editor soporta dos modos de sintaxis:

HTML: Edición WYSIWYG con formato visual
Markdown: Sintaxis Markdown con preview

Modos de vista

editor: Solo el área de edición
preview: Solo la vista previa
split: Editor y preview lado a lado

Obtener contenido

    
    editor-api.js 
const editor = document.querySelector('sg-article-editor');

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

// Obtener siempre como HTML
const html = await editor.getHtml();

// Escuchar cambios
editor.addEventListener('editorChange', (e) => {
  console.log('Nuevo contenido:', e.detail.value);
  console.log('Palabras:', e.detail.wordCount);
});
    

Internacionalización

El editor soporta múltiples idiomas:

    
    i18n.html 
<sg-article-editor locale="es"></sg-article-editor>

// Idiomas soportados: en, es, fr, de, pt, it, zh, ja, ko, ar