En el artículo anterior presentamos Nawte y explicamos qué es lo que era... y lo que no era, para no llevar a error a las personas que están buscando un editor lo que ves es lo que obtienes. Nawte tiene diversas diferencias, algunas que lo hacen mejor y otras que lo hacen más complicado, pero sin duda resultará de utilidad. Ver el artículo sobre el editor WYSIWYM Nawte.

En el presente artículo veremos la facilidad con la que se puede crear un editor de textos basado en Nawte que escriba código en HTML, BBCode o cualquier otro, como el propio de sistemas wiki como la Wikipedia. Basta con utilizar una serie de métodos para crear cada una de las herramientas de nuestro editor.

Como primer paso tenemos que incluir en nuestra página web los scripts de Mootools y el código de Nawte, que podemos descargar de la página del producto. Como decimos, Nawte es un componente Mootools, por lo que primero debería incluirse el framework Javascript Moootools y luego la librería de Nawte:

<script src="../mootools-1.2.3-core-yc.js" type="text/javascript"></script>
<script src="nawte.0.4.full.js" type="text/javascript"></script>

Como segundo paso tendremos que disponer en algún lugar de la página un formulario que contendrá el textarea que va a servir como base para el editor de texto y una lista desordenada UL, donde se situará la botonera o barra de herramientas que creemos para nuestro editor personalizado.

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

Ahora que tenemos la infraestructura necesaria para hacer funcionar Nawte, debemos generar el editor, utilizando ya las clases que nos proporciona el componente Mootools. Para ello, como cualquier otro script Mootools que hace uso del DOM de Javascript, debemos primero crear un evento "domready" sobre el objeto Window.

window.addEvent("domready", function(){
   //aquí escribiremos el código para generar nuestro editor con Nawte.
});

Ahora sí, toca instanciar un objeto "nawte", con el constructor de la clase, al que enviaremos tanto el identificador (atributo id) del campo textarea como el de la lista donde debe situarse la barra de herramientas del editor.

nawte = new nawte('mitexto', 'herramientas');

Inicialmente el editor no tienen ninguna herramienta configurada, sino que debemos que darlas de alta nosotros por medio de código Javascript y Mootools, haciendo uso de un método del objeto "nawte". Ese método se llama addFunction() y recibe el texto del botón y una función a ejecutar cuando se pulse.

nawte.addFunction('Negrita', function() {
   //código a ejecutar para hacer una negrita
});

Como siguiente paso tenemos que definir las acciones a realizar cuando se pulsa el enlace para hacer una negrita, que escribiremos en el código de la función que enviamos como segundo parámetro a addFunction(). Esta es la parte más complicada del trabajo con Nawte y donde este componente nos ofrece una serie de métodos interesantes que nos servirán para detectar cosas como el texto seleccionado por el usuario, si es que ha seleccionado alguno, o para reemplazar unos textos del editor por otros, donde habremos introducido los códigos necesarios para incluir una negrita.

Ahora vamos a ver una función para introducir el código BBCode para hacer una negrita.

Veamos el código completo de addFunction() para generar un botón de 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
   }
});

Básicamente lo que hacemos es obtener la selección que el usuario pueda haber hecho sobre el texto del textarea, para lo que tenemos el método getSelection() que nos proporciona Nawte. Luego comprobamos esa hipotética selección de texto en el textarea, porque nuestra función debería hacer cosas distintas si se ha seleccionado un texto o no.

Si no ha seleccionado texto, entonces tenemos que meter el código para generar una negrita tal cual, sin nada dentro, que en BBCode es [b][/b].
Si ha seleccionado texto, entonces tenemos que añadir el código de apertura de la negrita antes de la selección y luego el código para cerrar la negrita al final de la selección.

Esas dos operaciones se apoyan también en métodos que proporciona el propio componente Nawte, que son replaceSelection(), para reemplazar la selección completa por otro string enviado por parámetro y el método insert(), que sirve para insertar una cadena antes o después de la selección. El método Insert() recibe la cadena a insertar y una string "before" o "after", para insertar el texto antes o después de la selección. Además tenemos que pasar también a insert un boleano para decir si es la última inserción que pensamos hacer: false significa que aun vamos a insertar más cosas y true que es la última inserción que se va a realizar.

De manera similar podríamos hacer una herramienta para definir una itálica con BBCodes en el texto.

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
   }
});

Realmente, con un poco de programación podremos realizar cualquier tipo de alteración en el textarea para incluir cualquier código que necesitemos. Para ello Nawte dispone de varios métodos adicionales. Podemos ver la documentación completa de Nawte en la página de la herramienta. Aunque cabe señalar que la documentación en el momento de escribir este artículo, no está actualizada a la última versión, que estamos utilizando para explicar este manual, ahora la 0.4.

Ahora pongo el código completo del ejemplo que habríamos realizado para implementar BBCodes en el editor de Nawte:

<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
      }
   });

});
</script>
</head>

<body>

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

</body>
</html>

Por último, pongo un enlace a una página de ejemplo donde se puede ver el editor Nawte creado para hacer este primer ejemplo sencillo.

En el siguiente artículo veremos cómo personalizar un poco más el editor, agregando otras funcionalidades y herramientas de edición de texto más avanzadas.