5 Replies Latest reply on Sep 6, 2012 8:48 AM by rush_pawan

    Remove Default <br> tag in RichText

    CalyDev

      When I set the 'removeSingleParagraphContainer' property to true, the RichText editor inserts a <br> tag even if there is no text.  Is there a way to stop this?

        • 1. Re: Remove Default <br> tag in RichText
          smurfsky101

          Yup. Try adding this property

           

          'singleParagraphContainerReplacement' - 'div'

           

          That should use a div tag instead of a line break


          • 2. Re: Remove Default <br> tag in RichText
            CalyDev Level 1

            I've actually tried 'singleParagraphContainerReplacement' but for some reason it doesn't do anything.  I'm running CQ 5.4 btw.

             

            Here's the code:

            {

            itemId                            : 'credit',                        

            name                              : 'photoCredit',                        

            xtype                             : 'richtext',                        

            fieldLabel                        : 'Photo Credit',                        

            width                             : '95%',                        

            height                            : 100,                        

            removeSingleParagraphContainer     : true,

            singleParagraphContainerReplacement: 'div',

            }

            • 3. Re: Remove Default <br> tag in RichText
              smurfsky101 Level 1

              could you post the exact contents of dialog.xml?

              • 4. Re: Remove Default <br> tag in RichText
                CalyDev Level 1

                <?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"

                    jcr:primaryType="cq:TabPanel"

                    activeTab="0"

                    helpPath="en/cq/current/wcm/default_components.html#Text Image"

                    xtype="tabpanel">

                    <items jcr:primaryType="cq:WidgetCollection">

                        <tab2

                            jcr:primaryType="cq:Widget"

                            cropParameter="./imageCrop"

                            ddGroups="[media]"

                            fileNameParameter="./fileName"

                            fileReferenceParameter="./fileReference"

                            mapParameter="./imageMap"

                            name="./file"

                            requestSuffix=".img.png"

                            rotateParameter="./imageRotate"

                            sizeLimit="100"

                            title="Image"

                            uploadUrl="/tmp/upload/*"

                            xtype="smarterimage"/>

                       <tab3

                            jcr:primaryType="cq:Widget"

                            prefix="."

                            title="Advanced Image Properties"

                            xtype="ImageProperties"/>

                        <tab4

                            jcr:primaryType="cq:Widget"

                            xtype="configcomponentstyles"/>

                    </items>

                </jcr:root>

                 

                The portion that actually declares the RichText fields is in a separate js file here:

                 

                CN.Author.widgets.ImageProperties = CQ.Ext.extend(CQ.Ext.Panel, {

                 

                    prefix             : './image',

                 

                    renditionOptions   : [],

                 

                    rendition          : null,

                 

                    selectedRendition  : null,

                 

                    componentPath      : null,

                 

                    ORIGINAL           : "[0:0]",

                 

                    USE_SIZE           : "[-1:-1]",

                 

                    constructor: function(config) {

                 

                        this.CN   = this.CN || {};

                        config    = config || {};

                 

                        CN.Author.widgets.ImageProperties.superclass.constructor.call(this, config);

                    },

                 

                    initComponent: function() {

                        var

                 

                            me = this,

                 

                            dialog,

                 

                            tabPanel,

                 

                            /**

                             * Populates the panel's form fields.

                             * @param {Object} data An object containing metadata

                             * @private

                             */

                            populate = function(data) {

                                var

                                    fieldPanel = this.getComponent('imageProperties_panel');

                 

                                fieldPanel.getComponent('imageProperties_title').setValue(data['dc:title']);

                                fieldPanel.getComponent('imageProperties_alt').setValue(data['dc:title']);

                                fieldPanel.getComponent('imageProperties_credit').setValue(data['dc:title']);

                                fieldPanel.getComponent('imageProperties_desc').setValue(data['dc:description']);

                            },

                 

                            /**

                             * Checkbox handler, which is called with every check.

                             * @param {CQ.Ext.form.Checkbox} checkbox The checkbox that has been checked/unchecked

                             * @param {Boolean} isChecked True if checked

                             * @private

                             */

                            checkHandler = function(checkbox, isChecked) {

                                if (isChecked) {

                                    populate.call(this, this.CN.imageMetaData);

                                }

                            },

                 

                            damBox = new CQ.Ext.form.Checkbox({

                                disabled       : true,

                                fieldLabel     : 'Use DAM Meta'

                            }),

                 

                            saveRendition = new CQ.form.Selection({

                                fieldLabel     : 'Save this new rendition',

                                name           : './saveRendition',

                                type           : "checkbox"

                            }),

                 

                 

                            rendition = new CQ.form.Selection({

                                name           : './rendition',

                                fieldLabel     : "Rendition:",

                                type           : "select",

                                listeners      : {

                                    selectionchanged     : function() {

                                        var

                                            newValue  = this.getValue(),

                                            sizeField = me.fieldPanel.get('imageProperties_size');

                 

                                        if (newValue === me.ORIGINAL) {

                                             sizeField.reset();

                                             sizeField.setDisabled(true);

                                        }

                                        else if (newValue === me.USE_SIZE) {

                                            sizeField.setDisabled(false);

                                            sizeField.reset();

                                        }

                                        else {

                                            sizeField.reset();

                                            sizeField.setDisabled(true);

                                        }

                                    },

                                    loadContent         : function(field,record,path){

                                        me.selectedRendition = record.data.rendition;

                                    }

                                }

                            }),

                 

                            fieldPanel   = new CQ.Ext.Panel({

                                frame        : false,

                                border       : false,

                                layout       : 'form',

                                autoScroll   : true,

                                autoHeight   : true,

                                itemId       : 'imageProperties_panel',

                                cls          : 'imagePropertiesPanel',

                                items        : [

                                    {

                                        itemId                            : 'imageProperties_title',

                                        name                                  : this.prefix + '/jcr:title',

                                        xtype                             : 'textfield',

                                        fieldLabel                        : 'Title',

                                        width                             : '95%'

                                    },

                                    {

                                        itemId                            : 'imageProperties_alt',

                                        name                              : this.prefix + '/alt',

                                        xtype                             : 'textfield',

                                        fieldLabel                        : 'Alt Text',

                                        width                             : '95%'

                                    },

                                    {

                                        itemId                            : 'imageProperties_link',

                                        name                              : this.prefix + '/linkURL',

                                        xtype                             : 'pathfield',

                                        fieldLabel                        : 'Link to',

                                        parBrowse                         : true,

                                        width                             : '95%'

                                    },

                                    {

                                        itemId                            : 'imageProperties_credit',

                                        name                              : this.prefix + '/photoCredit',

                                        xtype                             : 'richtext',

                                        fieldLabel                        : 'Photo Credit',

                                        width                             : '95%',

                                        height                            : 100,

                                        removeSingleParagraphContainer     : true,

                                        singleParagraphContainerReplacement: 'div',

                                        rtePlugins                        : {

                                            misctools: {

                                                features: ['specialchars', 'sourceedit'],

                                                specialCharsConfig: {

                                                    chars: {

                                                        "copyright": {

                                                            "entity": "&copy;"

                                                        },

                                                        "degree": {

                                                            "entity": "&deg;"

                                                        },

                                                        "elipses": {

                                                            "entity": "&#133;"

                                                        },

                                                        "latin": {

                                                            "rangeEnd": "255",

                                                            "rangeStart": "192"

                                                        },

                                                        "leftanglequote": {

                                                            "entity": "&laquo;"

                                                        },

                                                        "misc": {

                                                            "rangeEnd": "152",

                                                            "rangeStart": "145"

                                                        },

                                                        "morefractions": {

                                                            "rangeEnd": "8543",

                                                            "rangeStart": "8531"

                                                        },

                                                        "percentage": {

                                                            "rangeEnd": "47",

                                                            "rangeStart": "32"

                                                        },

                                                        "register": {

                                                            "entity": "&reg;"

                                                        },

                                                        "rightpointquote": {

                                                            "entity": "&raquo;"

                                                        },

                                                        "trademark": {

                                                            "entity": "&#153;"

                                                        },

                                                        "vulgarfractions": {

                                                            "rangeEnd": "190",

                                                            "rangeStart": "188"

                                                        }

                                                    }

                                                }

                                            }

                                        }

                                    },

                                    {

                                        itemId                            : 'imageProperties_desc',

                                        name                              : this.prefix + '/jcr:description',

                                        xtype                             : 'richtext',

                                        fieldLabel                        : 'Caption',

                                        width                             : '95%',

                                        height                            : 100,

                                        removeSingleParagraphContainer     : true,

                                        rtePlugins                        : {

                                            misctools: {

                                                features: ['specialchars', 'sourceedit'],

                                                specialCharsConfig: {

                                                    chars: {

                                                        "copyright": {

                                                            "entity": "&copy;"

                                                        },

                                                        "degree": {

                                                            "entity": "&deg;"

                                                        },

                                                        "elipses": {

                                                            "entity": "&#133;"

                                                        },

                                                        "latin": {

                                                            "rangeEnd": "255",

                                                            "rangeStart": "192"

                                                        },

                                                        "leftanglequote": {

                                                            "entity": "&laquo;"

                                                        },

                                                        "misc": {

                                                            "rangeEnd": "152",

                                                            "rangeStart": "145"

                                                        },

                                                        "morefractions": {

                                                            "rangeEnd": "8543",

                                                            "rangeStart": "8531"

                                                        },

                                                        "percentage": {

                                                            "rangeEnd": "47",

                                                            "rangeStart": "32"

                                                        },

                                                        "register": {

                                                            "entity": "&reg;"

                                                        },

                                                        "rightpointquote": {

                                                            "entity": "&raquo;"

                                                        },

                                                        "trademark": {

                                                            "entity": "&#153;"

                                                        },

                                                        "vulgarfractions": {

                                                            "rangeEnd": "190",

                                                            "rangeStart": "188"

                                                        }

                                                    }

                                                }

                                            }

                                        }

                                    },

                                    {

                                        itemId            : 'imageProperties_size',

                                        widthParameter    : this.prefix + '/width',

                                        heightParameter   : this.prefix + '/height',

                                        xtype             : 'sizefield',

                                        fieldLabel        : 'Size',

                                        disabled          : true

                                    },

                                    damBox,

                                    rendition,

                                    saveRendition

                                ]

                            });

                 

                        CN.Author.widgets.ImageProperties.superclass.initComponent.call(this);

                 

                        this.rendition     = rendition;

                        this.fieldPanel    = fieldPanel;

                 

                        this.add(fieldPanel);

                 

                        this.CN.damBox     = damBox;

                        this.CN.damBox.on('check', checkHandler, this);

                 

                        dialog             = this.findParentByType("dialog");

                        tabPanel           = this.ownerCt;

                 

                        if (dialog) {

                            dialog.on("loadcontent", function() {

                                 this.onLoadContent(dialog.path);

                            }, this);

                        }

                 

                        if(tabPanel) {

                            tabPanel.on("tabchange",function(tabPanel, tab) {

                                if(tab.xtype === 'ImageProperties') {

                                     this.onActivate(tab);

                                }

                            }, this);

                        }

                 

                    },

                 

                    /**

                     * Overrides CQ.Ext.Panel.onRender.  Find the smarterimage component and register a callback onto

                     * the CN.customEvents.DAM.response event.

                     */

                    onRender: function (ct, pos) {

                        var

                            ownerCt          = this.ownerCt,

                            items            = null,

                            imgCmpt          = null,

                            i                = 0,

                            len              = 0;

                 

                        if (typeof ownerCt !== "undefined") {

                            items = ownerCt.items.items;

                            len   = items.length;

                            for (i = 0; i < len; i++) {

                                imgCmpt = (imgCmpt === null) ? ((items[i].xtype === "smarterimage") ? items[i] : null) : imgCmpt;

                            }

                 

                            if (imgCmpt !== null) {

                                // Let's know about all the images loading on the smarterimage widget

                                imgCmpt.on('CN.customEvents.DAM.response', this.onDamResponse, this);

                            }

                        }

                        CN.Author.widgets.ImageProperties.superclass.onRender.call(this, ct, pos);

                    },

                 

                    onLoadContent: function(path) {

                        this.componentPath = path;

                    },

                 

                    onActivate: function(tab) {

                        var

                            sizes,

                            rendition,

                            option;

                 

                        if (this.renditionOptions.length === 0) {

                 

                            sizes = CN.Author.Util.getConfiguration("dam/sizes");

                 

                            this.renditionOptions.push({'text':'-Use size field-','value':this.USE_SIZE});

                            this.renditionOptions.push({'text':'Original Size','value':this.ORIGINAL});

                 

                            for(rendition in sizes) {

                                if(sizes.hasOwnProperty(rendition)){

                                    option = {};

                                    if(!rendition.match(/jcr/g)) {

                                        option['text']  = rendition;

                                        option['value'] = sizes[rendition];

                                        this.renditionOptions.push(option);

                                    }

                                }

                            }

                        }

                 

                        if (this.renditionOptions.length > 0) {

                            this.rendition.setOptions(this.renditionOptions);

                            this.rendition.setValue(this.selectedRendition);

                        }

                    },

                    /**

                     * CN.customEvents.DAM.response handler.

                     * @param {Object} metaData The metadata object from the HTTP response of smarterimage

                     * @public

                     */

                    onDamResponse: function(metaData) {

                        this.CN.damBox.enable();

                        this.CN.imageMetaData = metaData;

                    }

                });

                 

                CQ.Ext.reg('ImageProperties', CN.Author.widgets.ImageProperties);

                • 5. Re: Remove Default <br> tag in RichText
                  rush_pawan Level 4

                  Hi,

                  I also tried using same configuration to replace <br> tag but its not working for me as well.

                   

                  Thanks,

                  Pawan