4 Replies Latest reply on Jul 24, 2013 7:15 AM by sameer2013

    Rich Text Editor-ImagePlugin needs alt text feature

    CQHondo

      Is there some way to configure the Rich Text Editor (RTE) to accept the Alternate Text (alt) attribute for an image added to the text? The CQ.form.rte.plugins.ImagePlugin seems to only support alignment of the image.

       

      I'm working on custom component which uses the RTE.  It replaces a legacy component which uses the rich text editor, ckeditor, to perform this function.  This component essentially replaces the stock "Text" and "Text & Image" components with a single one.

       

      I figured this would be easy by taking the rich text editor then adding the Image plug-in (see http://dev.day.com/docs/en/cq/current/administering/configuring_rich_text_editor.html). This works fine, except for the one sorely missed feature--we can't add the "alt" text for the image.  It seems like a feature that should already be part of the plug-in.  Does anyone know if it is, and how to turn it on?

       

      If it isn't available, has anyone implemented the feature already and willing to share?

        • 1. Re: Rich Text Editor-ImagePlugin needs alt text feature
          Sham HC Level 7

          This feature does not exists OOB.  As a workaround please go to source edit and add alt tag for an image.

          • 2. Re: Rich Text Editor-ImagePlugin needs alt text feature
            sameer2013

            Hi

             

            I'm able to create custom plugin which extends ImagePlugin and was able to succefully add alt text in RTE for image. But the issue which I am facing is that if user have dropped multiple(for example 2) images on RTE and assume it tries to put the alt text for second image in IE it always associate the alt attribute to <img> tag of first image and not the second. It works absolutely fine in FF.

             

            The command which adds alt text is this<obj>.editorKernel.relayCmd("image", {"alt": <value given by author in custom dialog>});

             

            Seems the relayCmd method doesn't work fine for IE.

             

            Any insight, would be helpful.

             

            Thanks

            • 3. Re: Rich Text Editor-ImagePlugin needs alt text feature
              mayank01.gupta

              Hi Sameer,

               

              Can you please send me the package for the custom plug in. or share the approach for that.

               

              Thanks

              • 4. Re: Rich Text Editor-ImagePlugin needs alt text feature
                sameer2013 Level 1

                Here you go, but this is not working in IE. If you are able to fix IE also, please share it. In the below I'm extending ImagePlugin

                 

                CQ.form.rte.plugins.AltImagePlugin = CQ.Ext.extend(CQ.form.rte.plugins.ImagePlugin, {

                 

                    constructor: function(editorKernel) {

                        var plg = CQ.form.rte.plugins;

                        plg.AltImagePlugin.superclass.constructor.call(this, editorKernel);

                    },

                 

                    getFeatures: function() {

                        return [ "image" ];

                    },

                 

                    notifyPluginConfig: function(pluginConfig) {

                        this.config = pluginConfig;

                    },

                 

                    initializeUI: function(tbGenerator) {

                        // nothing to do yet, as we are not using the toolbar for images

                    },

                 

                    execute: function(pluginCommand, value, envOptions) {

                        // todo implement

                       

                        /*if (pluginCommand == "image") {           

                            this.editorKernel.relayCmd("image", value);

                        }*/

                        var mythis = this;

                        if (pluginCommand == "image") {

                            this.newDialog = CQ.WCM.getDialog({

                                "id": "imagedialog",

                                "jcr:primaryType": "cq:Dialog",

                                "xtype": "dialog",

                                "title": 'Alt Text',

                                "params": {

                                    "_charset_": "utf-8"

                                },

                                "items": {

                                    "xtype": 'panel',

                                    "items": [{

                                        xtype: 'textfield',

                                        name: 'alttext',

                                        value: value,

                                        id: "imagealttext",

                                        fieldLabel: CQ.I18n.getMessage("Alt Text")

                                    }]

                                },

                                "responseScope": this,

                                "success": "true",

                                "failure": "false",

                                "buttons": [

                                          CQ.Dialog.CANCEL,

                                          {

                                              text: "OK",

                                              handler: function(){

                                                  var imgalttext = CQ.Ext.getCmp('imagealttext').getValue();

                                                  mythis.editorKernel.relayCmd("image", {"alt": imgalttext});

                                                  CQ.Ext.getCmp('imagedialog').hide();

                                              }

                                          }

                                      ]               

                            }, 'imagedialog');

                            this.newDialog.show();

                            this.newDialog.form.url = '#';

                        }

                    },

                   

                    updateState: function(selDef) {

                        // must be overridden by implementing plugins

                    },

                   

                 

                    handleContextMenu: function(menuBuilder, selDef, context) {

                        var subItems;

                        var ui = CQ.form.rte.ui;

                       

                     

                       

                        if (this.isFeatureEnabled("image")) {

                            var com = CQ.form.rte.Common;//getElementByTagName("img")[0].getAttribute("alt")

                            //var tmp = selDef;

                            //console.log(tmp);

                            var alt_value = getAltText(context.doc.activeElement.innerHTML);

                            if (this.editorKernel.queryState("image")) {

                                subItems = [

                                   {

                                        "id": "altTextField",

                                        "text": CQ.I18n.getMessage("Alt Text"),

                                        "plugin": this,

                                        "cmd": "image",

                                        "cmdValue": alt_value

                                    }

                                ];

                               

                                menuBuilder.addItem(new ui.CmItem({

                                    "text": CQ.I18n.getMessage("Set Image Property"),

                                    "subItems": subItems/*,

                                    "iconCls": "rte-cell" */

                                }));

                            }

                        }

                    }

                 

                });

                 

                var getAltText = function(innerHtml_value){

                    console.log(innerHtml_value);

                    var startIndex = innerHtml_value.indexOf("alt=\"");

                    if(startIndex != -1){

                        startIndex = startIndex + 5;

                        var tmpSubStrWhole = innerHtml_value.substring(startIndex);   

                        var altEndIndex = tmpSubStrWhole.indexOf("\"")

                        var tmpSubstr = tmpSubStrWhole.substring(0, altEndIndex);

                        console.log("tmpSubstr=="+tmpSubstr);

                        return tmpSubstr;

                    }else{

                        return '';

                    }

                };

                 

                // register plugin

                CQ.form.rte.plugins.PluginRegistry.register("image", CQ.form.rte.plugins.AltImagePlugin);