Extending the format plugin for Aloha Editor

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'),
   开发者_JS百科     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...

---

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/.