En los artículos anteriores sobre el componente Mootools Nawte aprendimos lo que era y no era y un primer ejemplo de uso para generar códigos BBCode sencillos a través de las herramientas del editor. Estas primeras explicaciones y ejemplos las publicamos en el Manual sobre Nawte.

Veremos ahora cómo utilizar Nawte para crear un editor de texto que escribe código HTML, lo que será útil para cargar cualquier tipo de texto con formato HTML, pero escribiendo el código con ayuda de las herramientas que implementaremos por medio de los métodos del componente.

En este artículo veremos como crear herramientas para implementar las típicas negritas o itálicas y luego veremos otro ejemplo interesante para crear una lista HTML, con la etiqueta UL. Por último mostraremos una herramienta personalizada para reemplazar todos los caracteres "<", ">" y "&" por sus correspondientes entidades de caracteres especiales, lo que nos vendrá muy bien para escribir código fuente en la página y no tener que preocuparnos porque los caracteres mayor y menor qué se puedan confundir con aperturas y cierre de etiquetas HTML.

Implementar una herramienta de negrita

De manera similar a como hicimos en el anterior artículo, podemos implementar herramientas para la creación de negritas o itálicas:

nawte.addFunction('Negrita', function() {
   //recibo el texto seleccionado
   selection = this.getSelection();
   if (selection == "") {
      //si no había texto seleccionado, coloco la etiqueta
      this.replaceSelection("<b></b>");
   }
   else {
      //si había texto seleccionado, coloco antes y después la apertura y cierre.
      this.insert("<b>", "before", false);
      this.insert("</b>", "after", true);
   }
});

Implementar una herramienta para generar una lista UL

Ahora veamos una función un poco más compleja, que genera una lista desordenada, que se tiene que implementar con la etiqueta UL y luego cada uno de sus elementos, con la etiqueta LI.

Para hacer esta herramienta necesitamos comprobar también si el usuario ha seleccionado texto.

Si no hay texto seleccionado, crearemos una lista con un elemento, pero vacía de texto.
Si se había seleccionado texto, recorreremos el texto seleccionado línea a línea, para colocarlo dentro de una etiqueta LI y luego el texto completo seleccionado lo meteremos en una etiqueta UL.

nawte.addFunction("lista", function() {
   selection = this.getSelection();
   if (selection == "") {
      this.replaceSelection("<ul>\n <li></li>\n</ul>");
   }
   else {
      
      this.processEachLine(function(line) {
         newline = " <li>" + line + "</li>";
         return newline;
      }, false);
      // El último false se envía para decir a nawte que aun pienso seguir realizando cambios en el texto seleccionado.
      
      this.insert("<ul>\n","before", false);
      this.insert("\n</ul>","after", true); //este es el último cambio, paso true.
      
   }
});

El tratamiento del caso de que no se haya seleccionado nada es sencillo, simplemente se reemplaza la selección con una lista vacía. El tratamiento que resultará un poco más complejo es la creación de la lista. Pero lo único especial que se hace es una llamada a un método llamado processEachLine() que recibe una función. Esa función se ejecutará para cada una de las líneas seleccionadas y la misma recibe un argumento que es el texto de la linea actual que se está procesando y devuelve el texto de la línea modificado como necesitemos. Como se puede ver, lo único que se hace es agregar el principio y final de la etiqueta LI a cada línea.

En processEachLine() aparte de la función para procesar cada línea, se envía un false en este caso, para decir que pensamos seguir haciendo cambios en el texto. Lo que quedaba pendiente era escribir antes y después de la selección la apertura y cierre de la lista desordenada, con el método insert(). En el último insert() cabe darse cuenta que estamos pasando un true, porque no pensamos hacer más cambios en el texto.

Herramienta de reemplazo de entidades HTML

Ahora veremos otro botón con comportamiento personalizado, que puede venir bien para un editor HTML en el que pretendemos que se puedan meter cómodamente bloques de código HTML. Este botón permitiría convertir las entidades HTML, al menos las más básicas, para que el código que se meta en el editor de texto, cuando se escriba código HTML, no se confunda con etiquetas.

nawte.addFunction('Convertir entidades', function() {
   selection = this.getSelection();
   selection = selection.replace(/&/g, "&")
   selection = selection.replace(/</g, "<");
   selection = selection.replace(/>/g, ">")
   this.replaceSelection(selection);
});

Como se puede observar, obtenemos el texto que el usuario haya seleccionado y luego hacemos una serie de "replace" (un método de las variables tipo string que tiene Javascript) para reemplazar las entidades.

Un detalle es que en este caso al método replaceSelection() no le enviamos ni true ni false, para decir si pretendemos o no seguir haciendo cambios en el texto. Esto es porque, si no enviamos ese parámetro a las funciones, toma true como valor por defecto, con lo que Nawte entiende que es el último cambio que vamos a realizar.

Podemos ver el editor en marcha, tal como quedaría al implementar estas herramientas.

El código completo de este editor de código HTML lo podemos ver a continuación:

<html>
<head>
<title>probando nawte</title>
<script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="nawte.0.4.full.js" type="text/javascript"></script>
<script>
window.addEvent("domready", function(){

//Creamos el objeto nawte
nawte = new nawte('mitexto', 'herramientas');

//Creamos un botón para meter el bbcode de la negrita.
nawte.addFunction('Negrita', function() {
selection = this.getSelection();
if (selection == "") {
this.replaceSelection("<b></b>");
}
else {
this.insert("<b>", "before", false); //como aun no he acabado de insertar, paso false como segundo parámetro
this.insert("</b>", "after", true); //como es la ultima inserción, paso true
}
});

//Creamos un botón para meter el bbcode de itálica.
nawte.addFunction('Itálica', function() {
selection = this.getSelection();
if (selection == "") {
this.replaceSelection("<i></i>");
}
else {
this.insert("<i>", "before", false); //como aun no he acabado de insertar, paso false como segundo parámetro
this.insert("</i>", "after", true); //como es la ultima inserción, paso true
}
});

//creamos un botón para hacer una lista
nawte.addFunction("lista", function() {
selection = this.getSelection();
if (selection == "") {
this.replaceSelection("<ul>\n <li></li>\n</ul>");
}
else {

this.processEachLine(function(line) {
newline = " <li>" + line + "</li>";
return newline;
}, false);
// here you see the purpose of the isLast parameter... since we are applying
// more TextTransform methods to the selection, isLast must be set to false!

this.insert("<ul>\n","before", false);
this.insert("\n</ul>","after", true); //now isLast is set to true, because it is the last one!

}
});

//creamos un botón para reemplazar las entidades HTML
nawte.addFunction('Convertir entidades', function() {
selection = this.getSelection();
selection = selection.replace(/&/g, "&")
selection = selection.replace(/</g, "<");
selection = selection.replace(/>/g, ">")
this.replaceSelection(selection);
});
});
</script>
</head>

<body>

<form>
<ul id="herramientas"></ul>
<textarea id="mitexto" class="editexto" cols="50" rows="8"></textarea>
</form>

</body>
</html>