Expand my Community achievements bar.

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=" "/>