SummArg | Cursos y recursos para webmasters

Aloha: Editor WYSIWYG HTML 5

Hace poco hablamos sobre ¿Cómo insertar un editor WYSIWYG en tu proyecto web? en donde vimos paso a paso el tema. Ahora nos movemos un poquito más adelante y vamos a explorar un poco este editor WYSIWYG pero para HTML 5.

Aloha Editor es un exponente de los editores de su tipo para la web que viene. El hecho de que trabaje sobre HTML 5 limita las posibilidades pues actualmente son muchas las versiones de navegadores que no lo soportan. Vean el demo por ustedes mismos y apreciarán el salto que hay entre los viejos editores y este.

La posibilidad de mover la barra del editor por toda la pantalla nos permite redistribuir los espacios a conveniencia y utilizar varios textarea con una misma botonera. La disposición de los botones nos recuerda al MSOffice 2007, cuestión que merece su mención ya que el usuario responde mejor cuando ve elementos que le resultan familiares. En el site mencionan que este editor es un 25% mas veloz que cualquier otro.

¿Cómo utilizo Aloha Editor en mi web?

El editor es completamente gratuito y lo podemos descargar de la web del autor (download). Debemos colocar el directorio /aloha/ dentro de nuestro proyecto y en el header incluimos el siguiente código:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Editor Aloha</title>
<script type="text/javascript" src="aloha/aloha.js"></script>
<script type="text/javascript" src="aloha/plugins/com.gentics.aloha.plugins.Format/plugin.js"></script>
<script type="text/javascript" src="aloha/plugins/com.gentics.aloha.plugins.Table/plugin.js"></script>
<script type="text/javascript" src="aloha/plugins/com.gentics.aloha.plugins.List/plugin.js"></script>
<link rel="stylesheet" href="examples.css" />
<!-- Convierte un elemento en editable -->
<script type="text/javascript">
GENTICS.Aloha.settings = {
errorhandling : false,
ribbon: false,
"i18n": {"current": "en"},
"plugins": {
"com.gentics.aloha.plugins.GCN": {
"enabled": false
},
"com.gentics.aloha.plugins.Format": {
config : [ 'b', 'i','u','del','sub','sup', 'p', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat'],
}
}
};
$(document).ready(function() {
$('#contenido').aloha();
});
</script>
</head>
<body>

Ahora en cualquier elemento #contenido, se activará nuestro editor al clickear en la sección. El editor trae algunos ejemplos en una carpeta aparte que podrán observar y editar a gusto. Espero les sirva!

Dejar un comentario

  1. darcon3371

    Hola, estoy implementando este editor (Muy bueno por cierto) para algunos textarea, pero como el formulario se envía via ajax, no se actualiza el contenido del textarea al ser enviado.

    ¿Hay alguna forma de actualizar el contenido del textarea sin necesidad de hacer un sumbit al formulario?

    Cuando usaba FCK Editor, solo tenía que ejecutar esta función antes de enviar el formulario via ajax: $.fck.update();

  2. Nekko

    No lo he probado, pero siguiendo el desarrollo de este editor pude ver que se modificaron algunas cosas en lo referente al textarea:
    http://getsatisfaction.com/aloha_editor/topics/aloha_editor_for_textareas

    Pero mas allá de lo que muestran en este link creo que no evolucionó la cantidad de opciones disponibles para esto.

  3. darcon3371

    Gracias al link que me proporcionaste, encontré una solucion =) la comparto aqui por si alguien mas se encuentra con este problema.

    Primero hay que ubicar lo que vamos a cambiar, es en la linea 234 del archivo aloha.js (comprimido) ó se busca espeficiamente este texto: “form:first” (Solo esta una vez)

    Hay que cambiar especificamente esto: “obj.parents(‘form:first’).submit(updateFunction);”
    —-por esto—> “div.mouseout(updateFunction)”

    Que hicimos? que el contenido del textarea no se actualice con el evento submit del formulario, sino con el evento mouseout del div editable.

    Tocó hacerlo así ya que por ahora no tienen implemantada una función que sea solo para actualizar los contenidos de los textarea.

    De nuevo Gracias y espero que a alguien más le sirva.

  4. Nekko

    Muchas gracias por compartir tu solución!

  5. Alejo

    Hola, acabo de descubrir los WYSIWYG y aloha tiene buena pinta porque dice que se trabaja en el front-end en lugar de en el back-end.
    No tengo muy claro y voy a decir una burrada, pero si se puede editar el front-end, ¿cómo hacemos para que no lo pueda modificar cualquier usuario que entre en mi web? Yo querría poder modificar los contenidos solo yo.
    Gracias

  6. Nekko

    Depende de como este construido tu sitio siempre se necesitan permisos (de administración) para poder escribir sobre el contenido de un sitio web. Si querés podés contarnos qué tipo de plataforma manejas para tu website y vemos que alternativas tenés para una edición simple. Podés registrarte en nuestro foro si necesitás explayarte sobre tu caso 😉

  7. nonato

    Ok. Pues ya me he registrado, en el foro no encuentro nada de aloha o WYSIWIG. ¿donde me recomiendas que habrá el hilo para poder hablar acerca de este tema?
    Gracias.

  8. nonato

    Perdón por el “habrá” quería decir “abra” que daño !!!

  9. Nekko

    Veo que ya iniciaste un tema, nos vemos en el foro!

  10. “cualquier elemento #contenido”, en que consiste esto?, un ejemplo por favor.

Dejar un comentario