Aloha inline Editor

Question

I'm trying to add a button to the Aloha inline editor UI toolbar for use in my rails app. The code when used for a normal html page works fine. However in my rails app it just doesnt work, even if i copy-pasted it. The page does not even show any errors. My code is as follows, Its from their website, just included it here for the heck of it:-

<script type="text/javascript">
Aloha.require(['ui/ui', 'ui/button'], function(Ui, Button) {
    var button = Ui.adopt("myButton", Button, {
        click: function(){
            alert("Click!");
        }
    });
});

Aloha.settings.toolbar = {
    tabs: [
     {
        label: 'Save',
        components: [ 'myButton' ]
     }
    ],
    exclude: [ 'strong', 'emphasis', 'strikethrough' ]
};

Aloha.ready( function() {
    var $ = Aloha.jQuery;
    $('.editable').aloha();
});
</script>

Answer 1

I agree!

 Aloha.settings.toolbar = {...};

should come before the include of aloha.js . But if so, you have the problem that Aloha is not defined at the moment you want to use.

So i found that workaround in the demos.

(function(window, undefined) {

   if (window.Aloha === undefined || window.Aloha === null ) {
      var Aloha = window.Aloha = {};
   }

   Aloha.settings = { 
      toolbar :{.....} 
   }; 

})(window);

After that, include the aloha.js and the settings should be take effect.