-
1. Re: Rich Text Editor-ImagePlugin needs alt text feature
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
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
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
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);