AEM anchor link css class

Question

I managed to display the anchor link option in the RTE for the text component for authoring. Because on our website we have a fixed header, it's offsetting the anchor link. I could resolve the issue with CSS but supporting that I'd need a CSS class on the anchor links. Could someone advise how to add a 'link-anchor' class to the anchor links in 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

Your usecase is a simplified version of this use case - http://experience-aem.blogspot.com/2017/09/aem-63-touch-ui-extend-rich-text-link-dialog-add-rel-select.html. Instead of adding drop down and 2 way mapping, you just need to hard code class name during save. This worked for me:

1. Create a clientlib - /apps/myproj/clientlibs/authoring
2. Add categories cq.authoring.dialog
3. Add a new js file as rte-link-class.js. Any name and give same name inside js.txt
4. Add below code in the 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);

After adding link from RTE, it gets saved in jcr like this