Css锚点:AEM锚点链接 css类-边看边学

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

<links jcr:primaryType="nt:unstructured" features="[modifylink,unlink,anchor]" />
<uiSettings jcr:primaryType="nt:unstructured">
    <cui jcr:primaryType="nt:unstructured">
      <inline jcr:primaryType="nt:unstructured" ="[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" ="[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"
          ="[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>

你的 usecase 是这个用例的简化版本-http://experience-aem.blogspot.com/2017/09/aem-63-touch-ui-extend-rich-text-link-dialog-add-rel-select.html。而不是添加 drop down 和 2 路映射,你只需要在保存期间硬编码类名。这对我有用:

创建 clientlib-/ apps / myproj / clientlibs / authoring

添加类别cq.authoring.dialog

添加一个新的 js 文件作为 rte-link-cl.js。任何名称，并在 js.txt 中给出相同的名称

在 rte-link-cl.js 中添加以下代码

(function ($) {
  "use strict";
  var _ = window._,
    Cl = window.Cl,
    CUI = window.CUI,
    RTE_LINK_DIALOG = "rtelinkdialog";
  if (CUI.rte.ui.cui.CuiDialogHelper.eaemExtended) {
    return;
  }
  var EAEMLinkBaseDialog = new Cl({
    extend: CUI.rte.ui.cui.CQLinkBaseDialog,
    toString: "EAEMLinkBaseDialog",
    initialize: function (config) {
      this.superCl.initialize.call(this, config);
    },
    dlgToModel: function () {
      this.superCl.dlgToModel.call(this);
      this.objToEdit.attributes["cl"] = "custom-anchor-link";
    },
    dlgFromModel: function () {
      this.superCl.dlgFromModel.call(this);
    },
  });
  CUI.rte.ui.cui.CuiDialogHelper = new Cl({
    extend: CUI.rte.ui.cui.CuiDialogHelper,
    toString: "EAEMCuiDialogHelper",
    instantiateDialog: function (dialogConfig) {
      var type = dialogConfig.type;
      if (type !== RTE_LINK_DIALOG) {
        this.superCl.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