Accoriding to the Aloha Editor docs you can listen for the "aloha-smart-content-changed" event for help in, say, saving the data to whatever persistence mechanism you are using. Here is an example of what I am trying to do:
<html>
<head>
<title>Aloha Event Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.aloha-editor.org/current/lib/aloha.js" data-aloha-plugins="common/format, common/list, common/link, common/highlighteditables"></script>
<link href="http://cdn.aloha-editor.org/current/css/aloha.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Aloha.ready( function() {
var $ = Aloha.jQuery;
$('.editable').aloha();
});
$(document).ready(function() {
$('.editable').bind('aloha-smart-content-changed', function() {
console.log('Aloha smart event handled.');
});
});
</script>
</head>
<body>
<div class="editable"></div>
</body>
</html>
But the handler never fires. Would anyone that has worked with Aloha know how to properly listen for the event?
Wow, the documenation on this was quite poor. But i think i got it to work. It looks like you bind the event handlers inside the Aloha.ready() method and to the Aloha object itself.
Aloha.ready( function() {
var $ = Aloha.jQuery;
$('.editable').aloha();
Aloha.bind('aloha-smart-content-changed', function(event, editable) {
console.log('Aloha smart event handled.');
});
});
Found a little bit more info about it here and this is where i found an example of an event being bound.
Also tested this in jsfiddle here
Hope that helps
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With