Extending the format plugin for Aloha Editor

Question

Is there any real help out there on how to extend the aloha editor?

What I am trying to do is extend their floating menu- I want to add a drop down list with custom fields.

For instance, if a user selects a custom field then a label is added into the html and something like: <special_field> appears inside the content editable.

Update: my code for the initialization part of the plugin so far...

EXAMPLE.Product.init = function() {
    var that = this;

    // floating menu "Insert template field"-button
    var insertButton = new GENTICS.Aloha.ui.Button({
        label: 'template field',
        'size': 'small',
        'onclick': function() {
            that.insertfield();
        },
        'tooltip': this.i18n('button.insertfield'),
        'toggle': false
    });
    GENTICS.Aloha.FloatingMenu.addButton(
        'GENTICS.Aloha.continuoustext',
        insertButton,
        GENTICS.Aloha.i18n(GENTICS.Aloha, 'floatingmenu.tab.insert'),
        2
    );

    // product scope & product attribute field
    GENTICS.Aloha.FloatingMenu.createScope(this.getUID('product'), 'GENTICS.Aloha.global');

    this.productField = new GENTICS.Aloha.ui.AttributeField();

    //style for the drop down that appears when user searches for a fieldname
    this.productField.setTemplate('<span><b>{name}</b>' +
    '<br class="clear" /><i>{type}</i></span>');

    // set the type of field that are allowed to be visible of field search
    this.productField.setObjectTypeFilter(['specialfield','systemfield']);
    this.productField.setDisplayField('name');

    GENTICS.Aloha.FloatingMenu.addButton(
        this.getUID('product'),
        this.productField,
        this.i18n('floatingmenu.tab.specialfield'),
        1
    );

    // handle event as soon as a product block is clicked
    GENTICS.Aloha.EventRegistry.subscribe(GENTICS.Aloha, 'selectionChanged', function(event, rangeObject) {
        var foundMarkup = that.findProduct(rangeObject);
        jQuery('.product-selected').removeClass('product-selected');

        if (foundMarkup.length != 0) {
            GENTICS.Aloha.FloatingMenu.setScope(that.getUID('product'));
            that.productField.setTargetObject(foundMarkup, 'data-field-name');

            foundMarkup.addClass('product-selected');
        }
        // re-layout the Floating Menu
        GENTICS.Aloha.FloatingMenu.doLayout();
    });

    GENTICS.Aloha.EventRegistry.subscribe(
GENTICS.Aloha,
"editableDeactivated",
function(jEvent, aEvent) {
    jQuery('.product-selected').removeClass('product-selected');
}
);

This only adds one field to the editor, then I must click on the field itself to change it to the correct field type.

Update2: my latest code is: (with screenshot below)

/**
* insert a template field at the cursor position
*/
function SetupButton(button) {
    var scope = 'GENTICS.Aloha.continuoustext';
    var definefield = '<label class="ui-specialfield" data-field-name="{0}" data-field-type="{1}" contentEditable="false">[{2}]</label>';

    // floating menu "Insert template field"-button
    var insertButton = new GENTICS.Aloha.ui.Button({
        label: button.Name.substring(0, 11), //truncate fields to enable easy viewing for now
        size: 'small',
        onclick: function() {
            console.debug(" field: " + button);

            var range = GENTICS.Aloha.Selection.getRangeObject();
            definefield = definefield.replace("{0}", button.Name);
            definefield = definefield.replace("{1}", button.Type);
            definefield = definefield.replace("{2}", button.Name);

            var newTemplate = jQuery(definefield);
            GENTICS.Utils.Dom.insertIntoDOM(newTemplate, range, jQuery(GENTICS.Aloha.activeEditable.obj));
            range.startContainer = range.endContainer = newTemplate.contents().get(0);
            range.select();
        },
        tooltip: button.Name,
        toggle: false
    });

    switch (button.Type) {
        case "sfield":
            GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
            break;
        case "pfield":
            GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
            break;
        case "afield":
            GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
            break;
        case "cfield":
            GENTICS.Aloha.FloatingMenu.addButton(scope, insertButton, button.Type, 1);
            break;
        default:
            break;
    }

}

I will look into your code reply as soon as I can with updated code... As you can see the buttons overflow... something else you may notice is the pin cannot be seen clearly if there are many tabs...

enter image description here

can anyone add an aloha-editor tag to this comment? maybe that will pick up some interest... — Haroon, Mar 11 '11 at 09:53
aloha editor is based on ExtJs... the aloha editor (from my understanding) inherits the button, menu and other objects from Extjs hence why I added the tag! :) — Haroon, Mar 16 '11 at 09:47

score 3 · Accepted Answer · edited Jun 20 '12 at 20:01

3

Hej,

if you want to add a dropdown with custom contents you may want to try the MultisplitButton (this is the kind of input element used to apply h1, h2, h3 and so on). The MultisplitButton along with inserting contents into an editable is covered in the Product plugin (http://aloha-editor.org/guides/writing_plugins.html) which also contains a demo.

All guides are currently located at http://aloha-editor.org/guides/.

edited Jun 20 '12 at 20:01

Chris Weber

5,555
8
44
52

answered Mar 08 '11 at 09:08

blacktarmac

177
6

Thanks for your answer... the product plugin does not really show how to add a drop down list or even a jquery autocomplete list.. could you demonstrate any code? ideally I would not like to add 40 fields to the insert tab if I can avoid it. The product plugin forces an end user to add a product then go and select the actual product - a 2 step process, I would like a 1 step process... – Haroon Mar 08 '11 at 11:00
There are no dropdown lists at the moment, as there was no need for that so far. The MultisplitButton is currently the most similar thing compared to a dropdown. You don't have to add 40 fields directly to the insert tab - you could generate your own tab, containing your multisplit button with those 40 blocks you need to specify. Maybe you could provide me with a quick interface draft, so I can understand your requrements better? – blacktarmac Mar 08 '11 at 14:06
Sorry, did'nt get a notification. So, the MultisplitButton is used in https://github.com/alohaeditor/Aloha-Plugin-Format/blob/stable/plugin.js. Basically it's a set of Buttons, which is similar to a dropdown. Have a look at line 81, where we're iterating through the configuration, adding items to an array of buttons (that.multiSplitItems), which then create the MultisplitButton on line 207. This creates the formatting menu, which contains h1, h2, h3... and so on. Will you be able to use this for your task? – blacktarmac Mar 15 '11 at 21:24
no problem, I have updated my code... I have a few problems though as you can see from the screenshot. – Haroon Mar 16 '11 at 10:02

Extending the format plugin for Aloha Editor

1 Answers1