Skip to content

Instantly share code, notes, and snippets.

@evo42

evo42/commands-api-example.html

Created August 29, 2012 09:29
Show Gist options
  • Save evo42/3509018 to your computer and use it in GitHub Desktop.
Save evo42/3509018 to your computer and use it in GitHub Desktop.
Download ZIP
Aloha/UI: using Aloha Editor commands API for your own toolbar
Raw
readme.md

Using the commands API for a custom UI

Raw
commands-api-example.html
<html>
<head>
<link rel="stylesheet" href="http://aloha-editor.org/builds/development/latest/src/css/aloha.css"
type="text/css">
<script src="http://aloha-editor.org/builds/development/latest/src/lib/aloha.js"></script>
</head>
<body>
<button id="bold">Bold</button>
<div class="edit">This is some content</div>
<script>
// Bind to Aloha Ready Event
Aloha.ready(function () {
var $ = jQuery = Aloha.jQuery;
$('.edit').aloha();
var button = jQuery('#bold');
button.attr('disabled', (Aloha.queryCommandSupported('bold') && Aloha.queryCommandEnabled('bold')));
button.click(function () {
Aloha.execCommand('bold', false, '');
updateBoldColor();
});
Aloha.bind('aloha-selection-changed', function () {
updateBoldColor();
});
function updateBoldColor() {
if (Aloha.queryCommandIndeterm('bold')) {
button.css('background-color', 'yellow');
return;
}
button.css('background-color', Aloha.queryCommandState('bold') ? 'lightgreen' : 'orange');
}
// update the color on startup
updateBoldColor();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment