是否可以在 AEM 组件的工具栏上添加自定义按钮?

Ron*_*gee 3 aem

在此处输入图片说明

在AEM 6.5的编辑模式下,如果我点击一个组件,就会弹出上面的工具栏。除了通过在 CRXDE 上创建 cq:dialog 节点来添加对话框(扳手按钮)之外,您是否可以在工具栏上创建自定义按钮?如果是这样,我可以在网上找到哪些工作示例?

RK1*_*RK1 6

是的,你可以这样做。

您将需要使用在工具栏中注册按钮的 JS 文件创建自定义客户端库:

(function ($document, author) {
    var openDialog = {
        icon: 'coral-Icon--game',
        text: 'Open Dialog',
        handler: function (editable, param, target) {
            author.DialogFrame.openDialog(new author.edit.Dialog(editable));
        },
        condition: function (editable) {
            //show this action only for component type eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog
            return editable.type === "eaem-touchui-open-comp-dialog-register-action/touchui-open-component-dialog";
        },
        isNonMulti: true
    };

    $document.on('cq-layer-activated', function (ev) {
        if (ev.layer === 'Edit') {
            author.EditorFrame.editableToolbar.registerAction('EAEM_OPEN_DIALOG', openDialog);
        }
    });
})($(document), Granite.author);
Run Code Online (Sandbox Code Playgroud)

您可以自定义图标、文本、按钮的行为,并决定此工具栏自定义对哪些组件可见。

来源

  • 是的。您可以在操作属性中添加属性“order: "before CONFIGURE",”(在“icon: 'coral-Icon--game'”旁边)来决定其显示位置。值“CONFIGURE”是您要在之前插入按钮的工具栏按钮的“data-action”属性。 (2认同)