TouchUI - Richtext Hyperlink Extension | Community
Skip to main content
A
aemd25900338
January 29, 2017
Solved

TouchUI - Richtext Hyperlink Extension

  • January 29, 2017
  • 4 replies
  • 3078 views

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.html 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

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by kautuk_sahni

    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-select.html

    // 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

    4 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    January 30, 2017

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

    ~kautuk

    Kautuk Sahni
    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity ManagerAccepted solution
    Community Manager
    January 31, 2017

    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-select.html

    // 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
    A
    aemd25900338Author
    February 1, 2017

    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-select.html

    // 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. 

    A
    aemd25900338Author
    February 2, 2017

    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-select.html

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

            }, 

      Terms & ConditionsAccessibility statement

      Loading footer...