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

It took me a while to figure out how to do the same thing even after reading this answer.

Here is what I did:

<script language="javascript">
        Aloha = window.Aloha || {};

        Aloha.settings = {
            plugins: {
                format: {
                    config:  [ 'b', 'i', 'u','del']
                }
            },
            toolbar: {
                exclude: ['formatBlock', '\n','subscript', 'superscript']
            },
            sidebar: {
                disabled: true
            }
        };

        </script>
        <script src="/src/aloha/lib/aloha.js"
        data-aloha-plugins="common/ui,common/format"></script>

The key points to note from that code:

• Aloha.settings is defined before including aloha.js
• plugins.format.config sets the buttons available to the format plugin
• toolbar.exclude gets rid of stuff I don't want.
• My config includes 'del' which is the strikethrough option and not part of the OP's requested options.

I may not need to remove subscript and superscript because they are not in the config I didn't worry about that because this worked for me and I don't care if I have a few unneeded config options.

Answer 2

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>