TouchUI - Richtext Hyperlink Extension

[aemd25900338]

I have to enhance to Hyperlink functionality in TouchUI Rich text editor AEM 6.2. i could not find anything related. 

Only closest thing i could find out was this article http://experience-aem.blogspot.com/2015/11/aem-61-extend-touch-ui-rich-text-table-plugin-add-summary... but this is for the tables and it doesn't even work in AEM 6.2

I have to add a field to allow 'screen reader only' text in the hyperlink. This is for accessibility requirement. So there will be an additional field in Hyperlink to capture this information. What can be done in this case ?

Can anybody provide any pointers?

TIA

[kautuk_sahni]

I have asked Sreekanth to have a look at this one. Sreekanth wrote the article that you are referring here.

~kautuk

[kautuk_sahni · Accepted solution]

Hi 

Please have a look at the new article written by Sreekanth :

Link:- http://experience-aem.blogspot.in/2017/01/aem-62-touch-ui-extend-rich-text-link-dialog-add-rel-selec...

// AEM 62 - Touch UI Extend Rich Text Link Dialog, Add Rel Attribute Select

Demo:- https://drive.google.com/file/d/0B4d6KmbLkAumZVF4cWs0Nlg2VVk/view

Package :- https://drive.google.com/file/d/0B4d6KmbLkAumYWRzZEJnM1YzLTg/view

I hope this would help you.

~kautuk

[aemd25900338]

kautuksahni wrote...

Hi 

Please have a look at the new article written by Sreekanth :

Link:- http://experience-aem.blogspot.in/2017/01/aem-62-touch-ui-extend-rich-text-link-dialog-add-rel-selec...

// AEM 62 - Touch UI Extend Rich Text Link Dialog, Add Rel Attribute Select

Demo:- https://drive.google.com/file/d/0B4d6KmbLkAumZVF4cWs0Nlg2VVk/view

Package :- https://drive.google.com/file/d/0B4d6KmbLkAumYWRzZEJnM1YzLTg/view

I hope this would help you.

~kautuk

This is very helpful but not complete. this article solves 2 problems out of 3.

1. Shows how to extend dialog box by adding new custom field.

2. Shows how to attach the value in dialog box to the HTML.

3. Does NOT show how to populate the value inside custom field in Dialog mode when existing link is edited later on. 

[aemd25900338]

kautuksahni wrote...

Hi 

Please have a look at the new article written by Sreekanth :

Link:- http://experience-aem.blogspot.in/2017/01/aem-62-touch-ui-extend-rich-text-link-dialog-add-rel-selec...

// AEM 62 - Touch UI Extend Rich Text Link Dialog, Add Rel Attribute Select

Demo:- https://drive.google.com/file/d/0B4d6KmbLkAumZVF4cWs0Nlg2VVk/view

Package :- https://drive.google.com/file/d/0B4d6KmbLkAumYWRzZEJnM1YzLTg/view

I hope this would help you.

~kautuk

For the people reading this thread, I want to complete the solution.

Please include below method in your code in addition to the article posted by Sreekanth. This will ensure that the saved values are populated in dialog boxes when editing. 

        dlgFromModel: function() {

            this.superClass.dlgFromModel.call(this);
            var relField = this.getFieldByType("rel");
            if (relField){
            var value = (this.objToEdit && this.objToEdit.attributes && this.objToEdit.attributes["rel"] ? this.objToEdit.attributes["rel"] : null);
                relField.val( value );
            }

        },