Editor de código HTML WYSIWYG

Como usar el editor HTML Pell

Para usar el editor solo introduce o pega texto en su caja.
Puede ser texto plano (sin formato) o copiado de páginas web o de editores como Microsoft Word.
En los últimos casos mantendrán el formato original.
A continuación selecciona los elementos a modificar y presiona sobre el icono necesario en la barra de herramientas superior.
En la "Vista previa" se mostrará inmediatamente el aspecto que tendrá en una página traducido por el navegador, aunque no es exacto dependiendo de la hoja de estilo (CSS) empleada en esta.
Más abajo en "Código HTML", se escribe automáticamente el código resultante, el que se puede copiar y pegar en un editor secundario WYSIWYG, un editor de texto plano como Notepad++ o hasta directamente en el código fuente de una página de un navegador web que lo permita.

¿Qué es un editor HTML WYSIWYG?

Se conoce como editores HTML WYSIWYG, a los que permiten crear código en este lenguaje y mostrar inmediatamente ambos: el resultado visual y el código.
WYSIWYG son las siglas en ingles de "Lo que ves es lo que obtienes" (What You See Is What You Get).
Existen gran cantidad de programas y aplicaciones que lo permiten, algunos muy profesionales como el famoso Adobe Dreamweaver, con gran cantidad de opciones.
El que comparto en esta página llamado Pell, es uno de lo más pequeños y sencillos, creado para usar en la web desde el navegador, con el objetivo principalmente de introducir a los lectores en el uso del lenguaje HTML.
Complementa otros artículos de este sitio, en los que comparto sobre la creación de páginas web y el uso de HTML5.

Sobre el editor HTML Pell

El editor usado en esta página de nombre Pell, es de la autoría del Jared Reich y es un proyecto de código libre disponible en Github.
Otros editores similares los comparto en otro artículo.
Funciona en con JavaScript en cualquier navegador web sin dependencias ya sea online o hasta sin conexión y permite jugar con las etiquetas básicas de HTML y ver su resultado.
https://github.com/jaredreich/pell

Modificar y agregar funciones al editor Pell

El editor de Pell se puede modificar fácilmente y agregarle o eliminarle funciones.
Solo necesitamos editar el archivo JS.
El editor es extremadamente sencillo, usa los comandos de execCommand, por lo que en la barra superior podemos agregar o eliminar herramientas para editar el texto.
Un ejemplo a continuación.
Agregar botón para encabezados H3
Agrega las siguientes instrucciones a la librería pell.js, dentro de la variable defaultActions

heading3: {
    icon: '<b>H<sub>3</sub></b>',
    title: 'Encabezado 3',
    result: function result() {
      return exec(formatBlock, '<h3>');
    }
  },

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales