Dojo Editor en acción

Hace poco me encontré ante un problema muy común: la traducción de los textos de una web. Normalmente los que traducen no tienen conocimientos técnicos y suelen manejar ficheros word y similares. Pero suelen tener un problema: al no saber el contexto real de los textos, a veces las traducciones son un poco «raras» (seguro que más de uno sabe a lo que me refiero).

Pues bien, el otro día una vez tenía montada una web en el idioma original (english) y preparado el sistema de traducción (XMLs con cadenas para cada idioma cargados desde PHP), se me ocurrió una idea. ¿Y si el traductor simplemente tuviera que hacer click en el trozo de texto que desea editar y ponerse a escribir? De esta forma estaría viendo el texto en el contexto correcto y en tiempo real… y además… yo podría hacer que el texto que ha escrito se guardase en un XML (ahorrándome un montón de rato y errores haciendo Copy+Paste).

Lo primero que me vino a la cabeza… esto va a ser complicado de implementar, mejor lo dejo. Pero entonces me acordé de que mis amigos de dojo, tienen un widget Editor (ahora Editor2) que de una forma muy sencilla, te permite convertir en editable cualquier texto de la web. Manos a la obra.

Por ejemplo, para este parrafo:
dojo editor

Al hacer click, aparecería:

dojo editor

Veamos un poco de código javascript:

<script type="text/javascript" src="javascript/dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.Editor");
	
	editorVisible = false;


	function crearEditor ()
	{
		 
		var editorArgs = {
			items: ["save", "cancel", "|", "formatblock", "|", "insertunorderedlist", "insertorderedlist", "bold", "italic", "underline", "|", "createLink"]
		};
		var editor = dojo.widget.fromScript("Editor", editorArgs, 
										dojo.byId("parrafoEditor"));
										
		editor.saveUrl = 'guardar.php';
		editor.saveArgName = 'textToSave';
		editor.closeOnSave = true;
	}
	
	
	function handleOnClick(evt){
		if (!editorVisible) {
			editorVisible = true;
			crearEditor();
		}
	}

	dojo.event.connect(dojo.byId("parrafoEditor"), "onclick", "handleOnClick");
</script>

Las primeras sentencias, sirven para cargar primero la base del toolkit dojo y luego el código del Editor:

<script type="text/javascript" src="javascript/dojo.js"></script>
<script type="text/javascript">
	dojo.require("dojo.widget.Editor");

Hacer que un nodo HTML sea editable con dojo es muy simple, y lo conseguimos con las siguientes líneas de código:

var editorArgs = {
			items: ["save", "cancel", "|", "formatblock", "|", "insertunorderedlist", "insertorderedlist", "bold", "italic", "underline", "|", "createLink"]
		};
var editor = dojo.widget.fromScript("Editor", editorArgs, 
                 dojo.byId("parrafoEditor"));

La funcion fromScript nos sirve para crear un nuevo widget y acepta tres argumentos:

  1. El tipo de widget (en este caso ‘Editor’)
  2. Los argumentos de creación del widget (en este caso le pasamos los botones que queremos que aparezcan).
  3. El nodo HTML donde queremos que se cree el editor (y cuyo texto va a ser editable). En este caso lo localizamos por su Id «parrafoEditor» usando la funcion dojo.byId

A continuación, una vez creado el widget, terminamos de configurarlo:

editor.saveUrl = 'guardar.php';
editor.saveArgName = 'textToSave';
editor.closeOnSave = true;
  • la variable saveUrl, indica la url que es llamada cuando se pulsa el botón guardar del editor. El contenido del editor se pasa mediante POST.
  • saveArgName será el nombre de la variable POST que llegará a nuestro script de guardar con el contenido del editor.
  • closeOnSave indica al editor si debe deshabilitarse (no seguir permitiendo la edición del texto) una vez que se ha pulsado el botón guardar. En este caso, una vez que se pulsa el botón guardar, no se podrá seguir editando.

Por último, conectamos el evento onclick para activar el modo de edición. O sea, el texto no es editable hasta que se hace click sobre el la primera vez.

function handleOnClick(evt){
		if (!editorVisible) {
			editorVisible = true;
			crearEditor();
		}
	}

dojo.event.connect(dojo.byId("parrafoEditor"), "onclick", "handleOnClick");

Y para que no sea sólo teoría, aquí teneis un sencillo ejemplo.

Podeis encontrar más detalles sobre la edición de textos con el toolkit dojo en su web: Rich text editing with dojo.

Publicado por

manuel

Me dedico al desarrollo de aplicaciones. Principalmente trabajo con XHTML, CSS, Javascript, XML, JSON, PHP, MySQL, Linux/MacOS X y Flash actionscript. Intento siempre trabajar con estándares y simplificar el desarrollo y las aplicaciones finales con el objetivo de orientarlas al usuario (que sean útiles y faciliten el trabajo).

5 comentarios en «Dojo Editor en acción»

  1. Hola soy nuevo usando el editor de dojo y quisiera saber como hago para grabar las modificaciones del texto en una base de dato. Espero puedan librarme de esa duda.

  2. Es muy sencillo, una vez recibes los datos por POST en tu archivo php (en este caso guardar.php), ahí lo guardas en una base de datos :)

  3. Hola Patricia,

    que yo sepa, no lo trae de fábrica, pero no debe ser nada dificil implementarlo detectando los caracteres que las forman y cambiándolos por su correspondiente imagen.

    Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *