Skip to content

Instantly share code, notes, and snippets.

@evo42
Created March 7, 2012 16:12
Show Gist options
  • Save evo42/1994064 to your computer and use it in GitHub Desktop.
Save evo42/1994064 to your computer and use it in GitHub Desktop.
AE and dynamic DOM
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Aloha Editor - Dynamic DOM</title>
<style type="text/css">
.editable {
border: 1px dashed gray;
margin: 20px;
}
</style>
<link rel="stylesheet" href="/aloha-editor/css/aloha.css" id="aloha-style-include" type="text/css">
<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>
<script src="http://cdn.aloha-editor.org/latest/lib/aloha.js" data-aloha-plugins="common/ui,common/format,common/list,common/table,common/link"></script>
</head>
<body>
<h1>Add Pages Test</h1>
<div id="my-editable" class="editable">
<p>Edit me</p>
</div>
<h2>My pages</h2>
<a href="#" onclick="addPage();">add page</a>
<div id="pages"></div>
<script type="text/javascript">
Aloha.ready( function(){
var $ = Aloha.jQuery;
$('.editable').aloha();
});
function addPage() {
var $ = Aloha.jQuery,
page = $("<div class=\"editable\"></div>");
$('#pages').append(page);
page.aloha();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment