Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.

AEM 6.5.12.0 - Extend RTE Link Plugin Command to add Icon / Info text specifying doc type | AEM Community Blog Seeding

Avatar

Administrator

8/23/22

BlogImage.jpg

AEM 6.5.12.0 - Extend RTE Link Plugin Command to add Icon / Info text specifying doc type by Sreekanth Choudry Nalabotu

Abstract

Goal
Extend the RTE Link Command (/libs/clientlibs/granite/coralui2/optional/rte/js/core/commands/link.js) to automatically add html specifying document type (eg. PDF, Word etc.)

Solution
Create clientlib /apps/eaem-rte-anchor-link-html/clientlib with categories=[cq.authoring.dialog.all], add the following code..

(function ($, $document) {
const RICH_TEXT_EDITABLE_SELECTOR = ".cq-RichText-editable",
DATA_RTE_INSTANCE = "rteinstance";

$document.on("foundation-contentloaded", function(e){
const $richTextDiv = $(e.target).find(RICH_TEXT_EDITABLE_SELECTOR);

$richTextDiv.each(function() {
$(this).on("editing-start", function() {
const $this = $(this),
rte = $this.data(DATA_RTE_INSTANCE),
ek = rte.editorKernel;

extendLinkCommand(ek.registeredCommands._link);
})
});
});

function extendLinkCommand(_linkCmd){
const origAddLinkToDomFn = _linkCmd.addLinkToDom;

_linkCmd.addLinkToDom = function(execDef){
origAddLinkToDomFn.call(this, execDef);

const context = execDef.editContext,
path = execDef.value.url;

if(path.endsWith(".pdf")){
addIconHTML(context, getPDFIconHTML());
}else if(path.endsWith(".docx")){
addIconHTML(context, getWordIconHTML());
}else{
addIconHTML(context, getFileIconHTML());
}
}

function addIconHTML(context, iconHTML){
let range = CUI.rte.Selection.getLeadRange(context);

let tempDiv = context.doc.createElement("div");
tempDiv.innerHTML = iconHTML;

let textFrag = context.doc.createDocumentFragment();
let firstNode, lastNode;

while ((firstNode = tempDiv.firstChild)) {
lastNode = textFrag.appendChild(firstNode);
}

range.deleteContents();
range.insertNode(textFrag);
range.setStartAfter(lastNode);
}

function getPDFIconHTML(){
return ' (pdf)';
}

function getWordIconHTML(){
return ' (word)';
}

function getFileIconHTML(){
return ' (document)';
}
}

}(jQuery, jQuery(document)));

Read Full Blog

AEM 6.5.12.0 - Extend RTE Link Plugin Command to add Icon / Info text specifying doc type

Q&A

Please use this thread to ask the related questions.