Skip to content

Instantly share code, notes, and snippets.

@evo42
Created March 13, 2013 10:49
Show Gist options
  • Save evo42/5151036 to your computer and use it in GitHub Desktop.
Save evo42/5151036 to your computer and use it in GitHub Desktop.
Aloha Editor: create a plugin
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aloha Editor Example</title>
<!-- load the require.js and jQuery libraries -->
<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/require.js"></script>
<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/vendor/jquery-1.7.2.js"></script>
<!-- load the Aloha Editor core and some plugins -->
<script src="http://cdn.aloha-editor.org/latest/lib/aloha.js"
data-aloha-plugins="common/ui,
common/format,
common/list,
common/link,
common/highlighteditables">
</script>
<!-- load the Aloha Editor CSS styles -->
<link href="http://cdn.aloha-editor.org/latest/css/aloha.css" rel="stylesheet" type="text/css" />
<!-- make all elements with class="editable" editable with Aloha Editor -->
<script type="text/javascript">
Aloha.ready( function() {
var $ = Aloha.jQuery;
$('.editable').aloha();
});
</script>
</head>
<body>
<h1 class="editable">Aloha Editor Example</h1>
<p class="editable">Click to edit this paragraph.</p>
<div class="editable">
<p>This is an editable div container.</p>
<p>Follow us on <a href="http://twitter.com/alohaeditor">Twitter</a>.</p>
<ul>
<li>list item one</li>
<li>list item two</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment