How to add a Plugin in Aloha Editor

Question

I am using Aloha Editor for my website. I am new to Aloha Edior. I want to add Font Size, Font Family & Text Color plugins to my editor. I got the plugins from this link: http://blog.strouseconsulting.com/2012/06/aloha-plugins/

I am not sure how to use these plugins. Please, if anyone is familiar with Aloha Editor, help me in using these plugins.

Thnks in Advance.

NOTE: I placed the plugin files in the 'plugin' folder of the editor. Like this:

aloha->plugins->fontsize (folder name)

aloha->plugins->fontfamily (folder name)

aloha->plugins->colorselector (folder name)

And also wrote the script code this way:

<script type="text/javascript" src="js/aloha/lib/aloha.js" 
data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link,common/align,common/list,colorselector,fontsize,fontfamily"></script>

I am getting the error in Console Log this way:

Uncaught Error: Script error- http://requirejs.org/docs/errors.html#scripterror - require.js:1818

Answer 1

If you have added your plugins in the common folder, then your aloha plugin list should read:

<script type="text/javascript" src="js/aloha/lib/aloha.js" 
data-aloha-plugins="common/ui,common/format,common/highlighteditables,common/link,common/align,common/list,common/colorselector,common/fontsize,common/fontfamily">
</script>

Then you will need to do some buttons in your aloha-config.js

For example, here is a sample:

(function(window, undefined) {
    var Aloha = window.Aloha || (window.Aloha = {});

    Aloha.settings = {
        toolbar: {
            tabs: [
                {
                    label: 'custom',
                    showOn: {
                        scope: 'Aloha.continuoustext'
                    },
                    components: [['increase', 'decrease','fontfamily']]
                },

Check Aloha for a working example of a config file, then you should be able to work out how to have the above sample: http://www.aloha-editor.org/howto-store-data-with-aloha-editor-ajax.php

Once you have created your aloha-config.js file, make sure to include it on your page.