Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

Avatar

Administrator

23-08-2022

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.