Aloha/UI: toolbar with fixed position / shown on page load

readme.md

Aloha/UI: toolbar with fixed position / shown on page load

Question

We only use a single editable, and to make it obvious to users that they can edit, we want the toolbar to show directly after page load (ie: without waiting for a click or keypress), and to stay at the top of the editor.

Solution

Use the code in example.js and example.css. #alohaContainer is some container in the page that will receive the toolbar.

Reference: https://getsatisfaction.com/aloha_editor/topics/make_toolbar_fixed_no_float_effect_and_shown_at_page_load

example.css

#alohaContainer {
    margin-bottom: 10px;
    height: 60px;
}

.aloha-ui-pin {
    display: none !important;
}

.aloha-ui-toolbar {
    position: static !important;
}

example.js

Aloha.ready(function () {
    Aloha.jQuery('#alohaEditable').aloha();
    Aloha.require(['jquery', 'ui/scopes', 'ui/ui-plugin'], function ($, Scopes, UiPlugin) {
        var toolbar = $('.aloha-toolbar');
        // Center and resize the toolbar
        //toolbar.css({'position': 'static', 'margin': 'auto'});
        $('#alohaContainer').append(toolbar);
        Scopes.setScope('Aloha.continuoustext');
        UiPlugin.showToolbar();
        // The child element must also be resized, don't know why
        //toolbar.children().css({'width': 400});

        Aloha.bind('aloha-editable-deactivated', function () {
            UiPlugin.showToolbar();
        });
    });
});