Editor de texto sencillo y facil de utilizar, lo conoci en un proyecto con FM
requiere de dos depencias require.js, jquery.js y los archivos del editor aloha.js, aloha.css
se pueden ver ejemplos funcionales en su web oficial: http://aloha-editor.org/demos.php
Guia de uso
1. Empezemos asumiendo que usted posee una simple pagina web
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Getting Started with Aloha Editor</title> <link rel="stylesheet" href="index.css" type="text/css"> </head> <body> <div id="main"> <div id="content"><p>Getting started with Aloha Editor!</p></div> </div> </body>
2. Insertamos el editor de texto, para esto necesitamos añadir el css /javascripts/aloha/css/aloha.css y tambien el java script /javascripts/aloha/lib/aloha.js tambien se necesita insertar require.js que mas adelante sera una dependencia opcional.
aloha tambien puede cargar dependencias adicionales, que puedes consultar en el siguiente link http://www.aloha-editor.org/guides/dependencies.html
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Getting Started with Aloha Editor</title> <link rel="stylesheet" href="index.css" type="text/css"> <!-- Load Aloha Editor css and js --> <link rel="stylesheet" href="/javascripts/aloha/css/aloha.css" type="text/css"> <script src="/javascripts/aloha/lib/require.js"></script> <script src="/javascripts/aloha/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link"></script> </head> <body> <div id="main"> <div id="content"><p>Getting started with Aloha Editor!</p></div> </div> </body>
3.Crear los editables
editable es un elemento html que podra ser editado por aloha editor, puedes especificar el elemento con un jQuery selector, y simplemente agregar .aloha para el.
When we want to make the div with ID content editable, we add the script
The class ‘aloha’, and any other classes that begin with ‘aloha-’ are used by aloha for internal purposes and you should therefore avoid using them in your application.
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Getting Started with Aloha Editor</title> <link rel="stylesheet" href="index.css" type="text/css"> <!-- Load Aloha Editor css and js --> <link rel="stylesheet" href="/javascripts/aloha/css/aloha.css" type="text/css"> <script src="/javascripts/aloha/lib/require.js"></script> <script src="/javascripts/aloha/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link"></script> </head> <body> <div id="main"> <div id="content"><p>Getting started with Aloha Editor!</p></div> </div> <script type="text/javascript"> Aloha.ready( function() { Aloha.jQuery('#content').aloha(); }); </script> </body>
In this example, the HTML element is made editable in the event handler of the Aloha.ready event. This ensures that aloha is fully loaded, before actually using it and is therefore the recommended way of using Aloha Editor.
The follwing reverts an editable to its non-editable form
$('#editable').mahalo(); |
This should also remove the attributes added by aloha (classes, contenteditable=true, etc.).
4. Elementos soportados
Aloha can be used with the following HTML text elements:
When using calling .aloha() on a textarea, if the textarea has a HTML ID (eg. mytxtarea) the ID of the Aloha editable will be “-aloha” suffixed (eg. mytxtarea-aloha).
[ 'a', 'abbr', 'address', 'article', 'aside','b', 'bdo', 'blockquote', 'cite', 'code', 'command','del', 'details', 'dfn', 'div', 'dl', 'em', 'footer','h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'i','ins', 'menu', 'nav', 'p', 'pre', 'q', 'ruby','section', 'small', 'span', 'strong', 'sub', 'sup','textarea', 'var'] |
Not supported HTML elements:
[ 'canvas', 'audio', 'br', 'embed', 'fieldset', 'hgroup', 'hr','iframe', 'img', 'input', 'map', 'script', 'select', 'style','svg', 'table', 'ul', 'video', 'ol', 'form', 'noscript'] |