3

alohaエディターを拡張する方法について実際に役立つものはありますか？

私がやろうとしているのは、フローティングメニューを拡張することです。カスタムフィールドを含むドロップダウンリストを追加したいと思います。

たとえば、ユーザーがカスタムフィールドを選択すると、ラベルがhtmlに追加され、次のようなものが<special_field>編集可能なコンテンツ内に表示されます。

更新：これまでのプラグインの初期化部分のコード...

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');
}
);

これにより、エディターにフィールドが1つだけ追加されます。次に、フィールド自体をクリックして、正しいフィールドタイプに変更する必要があります。

Update2：私の最新のコードは:(下のスクリーンショット付き）

/**
* 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;
    }

}

更新されたコードを使用して、できるだけ早くコードの返信を調べます...ボタンがオーバーフローしていることがわかります...タブが多いとピンがはっきりと見えないことに気付くかもしれません...

ここに画像の説明を入力してください

4

1 に答える 1

3

ヘイ、

カスタムコンテンツを含むドロップダウンを追加する場合は、MultisplitButtonを試してみてください（これは、h1、h2、h3などを適用するために使用される入力要素の一種です）。MultisplitButtonは、編集可能なコンテンツへのコンテンツの挿入とともに、デモも含まれているProductプラグイン（ http://aloha-editor.org/guides/writing_plugins.html ）でカバーされています。

現在、すべてのガイドはhttp://aloha-editor.org/guides/にあります。

于 2011-03-08T09:08:18.673 に答える