Aloha Editor Customization

Question

Can the Aloha Editor be configured so that it shows only bold, italic and underline buttons and so that the overall toolbar is then no bigger than it needs to be?

Answer 1

Yes, to customise the toolbar take a look at the configuration settings:

http://aloha-editor.org/guides/ui.html#configuration

And if you check the demo-app on GitHub there is a config file begin used where you can add this settings.

https://github.com/alohaeditor/Aloha-Editor/blob/dev/src/demo/demo-app/app/js/demo-app-load.js

There is also an alternative for this that you can check on the source code of demo/3col at:

http://aloha-editor.org/demos/3col/

<script>
    var Aloha = window.Aloha || ( window.Aloha = {} );

    Aloha.settings = {
        locale: 'en',
        plugins: {
            format: {
                config: [  'b', 'i', 'p', 'sub', 'sup', 'del', 'title', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'pre', 'removeFormat' ],
                editables : {
                    // no formatting allowed for title
                    '#title'    : [ ]
                }
            },
            link: {
                editables : {
                    // No links in the title.
                    '#title'    : [  ]
                }
            },
            list: {
                editables : {
                    // No lists in the title.
                    '#title'    : [  ]
                }
            },
            abbr: {
                editables : {
                    // No abbr in the title.
                    '#title'    : [  ]
                }
            },
            image: {
                'fixedAspectRatio': true,
                'maxWidth': 1024,
                'minWidth': 10,
                'maxHeight': 786,
                'minHeight': 10,
                'globalselector': '.global',
                'ui': {
                    'oneTab': false
                },
                editables : {
                    // No images in the title.
                    '#title'    : [  ]
                }
            }
        },
        sidebar: {
            disabled: true
        },
        contentHandler: {
            allows: {
                elements: [
                    'a', 'abbr', 'b', 'blockquote', 'br', 'caption', 'cite', 'code', 'col',
                    'colgroup', 'dd', 'del', 'dl', 'dt', 'em', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
                    'i', 'img', 'li', 'ol', 'p', 'pre', 'q', 'small', 'strike', 'strong',
                    'sub', 'sup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'u',
                    'ul', 'span', 'hr', 'object', 'div'
                ],

                attributes: {
                    'a': ['href', 'title', 'id', 'class', 'target', 'data-gentics-aloha-repository', 'data-gentics-aloha-object-id'],
                    'div': [ 'id', 'class'],
                    'abbr': ['title'],
                    'blockquote': ['cite'],
                    'br': ['class'],
                    'col': ['span', 'width'],
                    'colgroup': ['span', 'width'],
                    'img': ['align', 'alt', 'height', 'src', 'title', 'width', 'class'],
                    'ol': ['start', 'type'],
                    'q': ['cite'],
                    'p': ['class'],
                    'table': ['summary', 'width'],
                    'td': ['abbr', 'axis', 'colspan', 'rowspan', 'width'],
                    'th': ['abbr', 'axis', 'colspan', 'rowspan', 'scope', 'width'],
                    'ul': ['type'],
                    'span': ['class','style','lang','xml:lang']
                },

                protocols: {
                    'a': {'href': ['ftp', 'http', 'https', 'mailto', '__relative__']},
                    'blockquote': {'cite': ['http', 'https', '__relative__']},
                    'img': {'src' : ['http', 'https', '__relative__']},
                    'q': {'cite': ['http', 'https', '__relative__']}
                }
            }
        }
    };
</script>

<script type="text/javascript" src="http://cdn.aloha-editor.org/latest/lib/aloha.js"
            data-aloha-plugins="common/ui,
                                common/format,
                                common/table,
                                common/list,
                                common/link,
                                common/highlighteditables,
                                common/block,
                                common/undo,
                                common/image,
                                common/contenthandler,
                                common/paste,
                                common/commands,
                                common/abbr"></script>

<!-- turn an element into editable Aloha continuous text -->
<script type="text/javascript">
Aloha.ready(function() {
    $('#title').aloha();
    $('#multicolumnElement').aloha();
});

</script>