Soma : Blog

WidgEditor: Un WISYWYG muy simple

Muchas veces en nuestros proyectos necesitamos que el usuario, cliente o visitante ingrese un texto con formato simple, o sea implementar negrita, cursiva o subrayado y nada más, hay muchos editores WISYWYG con licencia GPL útiles, pero muy pocos con una simplicidad tal que podamos modificarlos sin tener que hacerlos casi de nuevo.

Básicamente lo que hace es Sustituir un textarea por el editor hecho en JavaScript.

Para estos casos no tan especiales encontré WidgEditor, implementa en su menú las opciones de:

Negrita
Cursiva
Enlace
Lista
Listas Numéricas
Insertar Imágenes desde un enlace
Seleccionar tipo de formato, párrafo <p>, Y cabeceras <h1><h2><h3>…

Ademas si ves un poco su codigo podras notar facilmente como modificarlo y cambiar sus opciones.

Este es el código HTML básico para hacer correr:

PLAIN TEXT

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WidgEditor</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import "css/widgEditor.css";
</style>
<script type="text/javascript" src="scripts/widgEditor.js"></script>
</head>
<body>
<div id="content">
<form action="submit.php">
<textarea id="noise" name="noise" class="widgEditor nothing">introduce el texto aqui</textarea>
</form>
</div>
</body>
</html>