Expand my Community achievements bar.

SOLVED

TouchUI - Richtext Hyperlink Extension

Avatar

Level 3

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

1 Accepted Solution

Avatar

Correct answer by
Administrator

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



Kautuk Sahni

View solution in original post

4 Replies

Avatar

Administrator

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

~kautuk



Kautuk Sahni

Avatar

Correct answer by
Administrator

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



Kautuk Sahni

Avatar

Level 3

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. 

Avatar

Level 3

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 );
            }

        },