AEM锚链接css类

Question

我设法在 RTE 中显示用于创作的文本组件的锚链接选项。因为在我们的网站上，我们有一个固定的标题，它抵消了锚链接。 我可以用 CSS 解决问题，但支持我需要锚链接上的 CSS 类。有人可以建议如何向 AEM 中的锚链接添加“链接锚”类吗？

<links jcr:primaryType="nt:unstructured" features="[modifylink,unlink,anchor]" />

<uiSettings jcr:primaryType="nt:unstructured">
    <cui jcr:primaryType="nt:unstructured">
      <inline jcr:primaryType="nt:unstructured" toolbar="[undo#undo,undo#redo,#paraformat,#styles,-,#format,experience-aem#colorPicker,-,#justify,-,#lists,-,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,edit#cut,edit#copy,edit#paste-plaintext,edit#paste-wordhtml,misctools#specialchars,misctools#sourceedit,-,table#table]">
          <popovers jcr:primaryType="nt:unstructured">
              <format
                  jcr:primaryType="nt:unstructured"
                  items="[format#bold,format#italic,format#underline]"
                  ref="format"/>
              <justify
                  jcr:primaryType="nt:unstructured"
                  items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                  ref="justify"/>
              <lists
                  jcr:primaryType="nt:unstructured"
                  items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                  ref="lists"/>
              <styles
                  jcr:primaryType="nt:unstructured"
                  items="styles:getStyles:styles-pulldown"
                  ref="styles"/>
              <paraformat
                  jcr:primaryType="nt:unstructured"
                  items="paraformat:getFormats:paraformat-pulldown"
                  ref="paraformat"/>
          </popovers>
        </inline>
      <dialogFullScreen jcr:primaryType="nt:unstructured" toolbar="[undo#undo,undo#redo,#paraformat,-,#format,experience-aem#colorPicker,-,#justify,-,#lists,-,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,edit#cut,edit#copy,edit#paste-plaintext,edit#paste-wordhtml,misctools#specialchars,misctools#sourceedit,-,table#table]">
        <popovers jcr:primaryType="nt:unstructured">
            <format
                jcr:primaryType="nt:unstructured"
                items="[format#bold,format#italic,format#underline]"
                ref="format"/>
            <justify
                jcr:primaryType="nt:unstructured"
                items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                ref="justify"/>
            <lists
                jcr:primaryType="nt:unstructured"
                items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                ref="lists"/>
            <styles
                jcr:primaryType="nt:unstructured"
                items="styles:getStyles:styles-pulldown"
                ref="styles"/>
            <paraformat
                jcr:primaryType="nt:unstructured"
                items="paraformat:getFormats:paraformat-pulldown"
                ref="paraformat"/>
        </popovers>
      </dialogFullScreen>
      <tableEditOptions
          jcr:primaryType="nt:unstructured"
          toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
    </cui>
</uiSettings>

Answer 1

您的用例是此用例的简化版本 - http://experience-aem.blogspot.com/2017/09/aem-63-touch-ui-extend-rich-text-link-dialog-add-rel-select.html。 无需添加下拉菜单和 2 路映射，您只需在保存期间对类名进行硬编码。这对我有用：

1. 创建一个客户端库 - /apps/myproj/clientlibs/authoring
2. 添加分类cq.authoring.dialog
3. 添加一个新的 js 文件作为 rte-link-class.js。 js.txt 中的任意名称和相同的名称
4. 在 rte-link-class.js 中添加以下代码

(function ($) {
  "use strict";

  var _ = window._,
    Class = window.Class,
    CUI = window.CUI,
    RTE_LINK_DIALOG = "rtelinkdialog";

  if (CUI.rte.ui.cui.CuiDialogHelper.eaemExtended) {
    return;
  }

  var EAEMLinkBaseDialog = new Class({
    extend: CUI.rte.ui.cui.CQLinkBaseDialog,

    toString: "EAEMLinkBaseDialog",

    initialize: function (config) {
      this.superClass.initialize.call(this, config);
    },

    dlgToModel: function () {
      this.superClass.dlgToModel.call(this);
      this.objToEdit.attributes["class"] = "custom-anchor-link";
    },

    dlgFromModel: function () {
      this.superClass.dlgFromModel.call(this);
    },
  });

  CUI.rte.ui.cui.CuiDialogHelper = new Class({
    extend: CUI.rte.ui.cui.CuiDialogHelper,

    toString: "EAEMCuiDialogHelper",

    instantiateDialog: function (dialogConfig) {
      var type = dialogConfig.type;

      if (type !== RTE_LINK_DIALOG) {
        this.superClass.instantiateDialog.call(this, dialogConfig);
        return;
      }

      var $editable = $(this.editorKernel.getEditContext().root),
        $container = CUI.rte.UIUtils.getUIContainer($editable),
        dialog = new EAEMLinkBaseDialog();

      dialog.attach(dialogConfig, $container, this.editorKernel);

      return dialog;
    },
  });

  CUI.rte.ui.cui.CuiDialogHelper.eaemExtended = true;
})(jQuery);

从 RTE 添加链接后，它会像这样保存在 jcr 中