4

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)?

Hyperlink window

  • Possible, but would require you're own GUI extension. I did try this once a while back and basically rolled my own version of this pop-up, based on the one above. I got as far as triggering my pop-up and having the additional text field but got stuck trying to override the FormatArea.js file. – Neil Jan 27 at 10:46
8

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.

enter image description here

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.

| improve this 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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.