Add new option inside the Hyperlink window

Question

The current options inside the Hyperlink window, used when inserting hyperlinks in a format area, are: Type, URL, Title and Target. Is it possible to add a new one to manage the link rel attribute (nofollow, sponsored, ugc)?

Answer 1

As Neil and Mark have noted, what you are looking for is a GUI extension extending the FormatArea.js and three other JavaScript and ASPX files:

• %Tridion Home%\Web\WebUI\Core\Controls\FormatArea\FormatArea.js
• %Tridion Home%\Web\WebUI\Editors\Base\Views\Popups\Link\Link.aspx
• %Tridion Home%\Web\WebUI\Editors\Base\Views\Popups\Link\Link.js
• %Tridion Home%\Web\WebUI\Editors\CME\Commands\FormatArea\InsertHyperLink.js

In the extended popup Link.aspx file in your extension, you would have to add the extra fields that you need. For example, if you need a field for the rel attribute add something like this:

 <tr id="rowRel" valign="middle">
    <td><asp:Literal runat="server" Text="Rel" />:</td>
    <td colspan="2"><input type="text" id="FieldRel" style="width:100%" maxlength="250" tabindex="6" /></td>
    <td colspan="2"></td>
 </tr>

In the extended Link.js in your extension, add an event handler for all on change events of your new fields something like this:

Tridion.Web.UI.Editors.Base.Views.Popups.Link.prototype._onRelChange = function Link$_onRelChange(event) {
    var sourceElement = event.target;
    if (sourceElement) {
        this.properties.NewLink.rel = sourceElement.value;
    }
};

In the extended InsertHyperlink.js in your GUI extension, update the popup to display your extended Link.aspx like this and not the OOTB Link.aspx popup:

var popup = $popupManager.createDisposingExternalContentPopup(
   $config.expandEditorPath("/Views/Popups/ExtendedHyperLink/ExtendedHyperLink.aspx", 'ExtendedHyperLink'), 
   { width: 400, className: "popupdialog gradient" },
   { link: link, popupType: Tridion.Controls.PopupManager.Type.MODAL_IFRAME });

In the extended FormatArea.js in the getHyperLink function, get the value of the "rel" input field and set it to the rel property of lHyperlinkObj like this:

lHyperlinkObj.rel = getElementsAttributeValue(lSelectedElements, "rel", ["a"], lBoolCheckChildren, lCreatedMarkers);

And in the applyHyperLink function, set the rel property of the lHyperlinkObj to the selected rel value:

if (iHyperlinkObj.rel) 
{
    lSelectedElement.rel = iHyperlinkObj.rel;
}
else 
{
    lSelectedElement.removeAttribute("rel");
}

and

if (iHyperlinkObj.rel)
{
    lAttributes.rel = iHyperlinkObj.rel;
}

If you have extended all the above JS and ASPX files and have configured the extensiongroups and groups in your config file properly you should be able to have the formatarea updated with the value of the custom attributes.

Note: This has to be tested for cross domain scripting if XPM is used as Mark noted. Eric Huiza's blog post on GUI extensions here http://erichuiza.blogspot.com/2013/10/ui-extensions-ensuring-item-is-full.html is of great help.

Answer 2

There is no OOTB way to add options into the existing dialog.

As Neil notes, if you try to extend the current pop-up you will have challenges extending the formatarea.js as there's no supported extension point to that file. Take into consideration also this needs to work with the xdm {cross domain methods} object for cross-domain scripting if you're using XPM.

Extend to your own extension with its own dialog and version for formatarea.js - noting that any hotfix/update to that .js file will likely need to be integrated into your version.