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.
SOLVED

Link is not working in Custom Text Component

Avatar

Level 4

Dear Team,

I am trying to figure out the link issue in my custom text component. But not able to find out.

When I am creating new link by using my custom text component, then my link is coming in the next line and also it is broken, as shown in below screenshot.

 

Thanks,

Sunita

1 Accepted Solution

Avatar

Correct answer by
Level 10

I know its custom text.jsp but the xtype you are using for RTE is custom or OOB ??

can you share your dialog.xml

View solution in original post

3 Replies

Avatar

Level 10

Are you using OOB RTE or customized ?

also, what is the value stored in the content ? does it include '123'. Also did you try debugging using browser console and see if any of the CSS causing this issue ?

Avatar

Correct answer by
Level 10

I know its custom text.jsp but the xtype you are using for RTE is custom or OOB ??

can you share your dialog.xml

Avatar

Level 4

Hi Lokesh,

Kindly find my dialog.xml file for text.jsp

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"
    padding="5"
    title="Edit Text"
    height="{Long}380"
    width="{Long}575"
    xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection">
        <tabs jcr:primaryType="cq:TabPanel">
            <items jcr:primaryType="cq:WidgetCollection">
                <General 
                    jcr:primaryType="cq:Widget" 
                    title="General"
                    xtype="panel">
                    <items jcr:primaryType="cq:WidgetCollection">
                        <text
                            jcr:primaryType="cq:Widget"
                            allowBlank="false"
                            hideLabel="true"
                            externalStyleSheets="[/etc/docroot/sunita/components/text/text/css/text.dialog.css]"
                            name="./text"
                            xtype="richtext">
                            <htmlRules
                                jcr:primaryType="nt:unstructured"
                                path="/apps/sunita/components/text/text/htmlRules.infinity.json"
                                xtype="cqinclude"/>
                            <rtePlugins
                                jcr:primaryType="cq:Widget"
                                path="/apps/sunita/components/text/text/rtePlugins.infinity.json"
                                xtype="cqinclude"/>                                
                            <listeners
                                    jcr:primaryType="nt:unstructured"
                                    added="function(comp, parentCt, index) {
                                        if ('postProcessor' in comp.editorKernel) {
                                            /* I override postProcessor.applyHtmlRules to apply link rules also on postProcessing */
                                            comp.editorKernel.postProcessor.applyHtmlRules = function(dom) {
                                                /* todo maybe we should move an extended version of this method to HtmlRules for common use? */
                                                var com = CQ.form.rte.Common;
                                                /* adjust tag names to more appropriate (regarding editing) tag names if */
                                                /* necessary */
                                                var tagName = dom.tagName.toLowerCase();
                                                var changedTagName = (this.isPreProcessing() ?
                                                this.htmlRules.docType.adjustToRaw(tagName)
                                                : this.htmlRules.docType.adjustToDocType(tagName));
                                                var changedDom;
                                                if (changedTagName != null) {
                                                    changedDom = this.context.createElement(changedTagName);
                                                    this.elementsToChange.push({
                                                        'domToChange': dom,
                                                        'changedDom': changedDom
                                                    });
                                                    return false;
                                                }

                                                /* handle links (add attributes as specified by rules, remove links with invalid */
                                                /* HREFs) */
                                                if (com.isTag(dom, 'a')) {
                                                    var href = com.getAttribute(dom, 'href');
                                                    if (href) {
                                                        if (this.htmlRules.links.validateHref(href)) {
                                                            this.htmlRules.links.applyToObject(dom);
                                                            return false;
                                                        } else {
                                                            this.markForRemoval(dom);
                                                            return true;
                                                        }
                                                    }
                                                }

                                                return false;
                                            };

                                            /* */

                                            /* original function wrapped */
                                            comp.editorKernel.htmlRules.links.applyToObject_ =
                                                 comp.editorKernel.htmlRules.links.applyToObject;

                                            comp.editorKernel.htmlRules.links.applyToObject = function(obj) {
                                                var anchorWrapper;
                                                /* this override override wraps every link with its child as was required in DFCOB-531 */
                                                comp.editorKernel.htmlRules.links.applyToObject_(obj);

                                                if (obj.childElementCount > 0) {
                                                    anchorWrapper = CQ.Ext.getDoc().dom.createElement('DIV');

                                                    if (obj.firstChild.nodeName == 'IMG') {
                                                        /* we leave images as they were */
                                                        return;
                                                    } else {
                                                        CQ.Ext.each(obj.children, function(childEl) {
                                                            /* we clone anchor and its child */
                                                            var clonedLink = obj.cloneNode(false);
                                                            var clonedContent = childEl.cloneNode(false);

                                                            /* regular ExtJS's .appendChild cannot be used because it does not
                                                             handle TextNodes */

                                                            while (childEl.hasChildNodes()) {
                                                                clonedLink.appendChild(childEl.removeChild(childEl.firstChild));
                                                            }

                                                            CQ.Ext.Element.get(clonedContent).appendChild(clonedLink);
                                                            CQ.Ext.Element.get(anchorWrapper).appendChild(clonedContent);
                                                        });
                                                        obj.parentNode.replaceChild(anchorWrapper, obj);
                                                    }
                                                }

                                            }
                                        }
                                    }"
                                    />
                        </text>
                        <richtextClass
                            jcr:primaryType="cq:Widget"
                            fieldLabel="Text class"
                            name="./richtextClass"
                            defaultValue=" "
                            type="select"
                            xtype="selection">
                            <options jcr:primaryType="cq:WidgetCollection">
                                <none
                                    jcr:primaryType="cq:Widget"
                                    text="none"
                                    value=" "/>