Custom Hyperlink Manager – sitecore

Adding a new field into Hyperlink Manager

Adding a new field into Hyperlink Manager.

if you want to insert a link to external websites, an email link, or create anchors on a page, you must use the Hyperlink Manager.

With the Hyperlink Manager, you can insert a link to:

  • An external website.
  • A media item – for example, a video or a PDF file from your Media Library.
  • An anchor in the same text field – a bookmark that links to a section within a page.
  • An email address – a link that opens and creates a new email in the visitor’s default email program.

To Create External links with the Hyperlink Manager:

  1. Usually, not all the information needs to be linked which is available in the content editor.
  2. In this case, you want to link to something which is not the server is when we create external links
  3. Navigate to the item in the Content Editor where you want to insert a link.
  4. In the text editor, select the text or image that you want to be a link and click on Insert link
  5. To insert link to

On the Hyperlink tab, in the URL field, enter the URL of the website that you want to link to.

To create all the fields in the hyperlink we use Telerik controls.

For example how to add  label and a text box to hyperlink manager?

Create a project having all the present hyperlink manager fields as one project.

IT can be created using telerik controls

Create a user control linkmanager.ascx

For example, we need to add field which is already there in hyperlink manager.

Add all the tabs in hyperlink manager:

<telerik:RadTabStrip ShowBaseLine="true" ID="LinkManagerTab" runat="server" SelectedIndex="0"

MultiPageID="dialogMultiPage">

<Tabs>

<telerik:RadTab Text="HyperlinkTab" Value="HyperlinkTab">

</telerik:RadTab>

<telerik:RadTab Text="AnchorTab" Value="AnchorTab">

</telerik:RadTab>

<telerik:RadTab Text="EmailTab" Value="EmailTab">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

 

Here it adds Hyperlink tab, Anchor tab and Email tab which is main tab section diving. For all the three hyperlink manager tabs telerik:RadTab is created individually.

And when user tries to switch the tabs then we need a method for switching in between the tabs

&lt;script&gt;

getModifiedLink: function () {

var resultLink = this._clientParameters.get_value();

var selectedTabValue = this._tab.get_selectedTab().get_value();

if (selectedTabValue == "HyperlinkTab")//"link"

{

resultLink.href = this._linkUrl.value;

if (this._linkTargetCombo.value == "_none") {

resultLink.removeAttribute("target", 0);

}

else {

resultLink.target = this._linkTargetCombo.value;

}

if (this._texTextBoxParentNode &amp;&amp; this._texTextBoxParentNode.style.display != "none") {

resultLink.innerHTML = this._linkText.value;

}

if (resultLink.innerHTML.trim() == "" || resultLink.innerHTML.trim().length &lt; this._linkText.value.trim().length) {

resultLink.innerHTML = this._linkText.value.replace(/&amp;/gi, "&amp;amp;").replace(/&lt;/gi, "&amp;lt;").replace(/&gt;/gi, "&amp;gt;");

}

if (resultLink.innerHTML.trim() == "") {

resultLink.innerHTML = resultLink.href;

}

if (this._linkIdLink &amp;&amp; this._linkIdLink.value.trim()) {

resultLink.id = this._linkIdLink.value.trim();

}

else {

resultLink.removeAttribute("id");

}

if (this._linkTooltip.value.trim() == "") {

resultLink.removeAttribute("title", 0);

}

else {

resultLink.title = this._linkTooltip.value;

}

this._hyperlinkManagerExtenderGetModifiedLink(resultLink);

this._setClass(resultLink, this._linkCssClass);

}

else if (selectedTabValue == "AnchorTab")//"anchor"

{

resultLink.removeAttribute("name");

resultLink.removeAttribute("NAME");

resultLink.name = null;

resultLink.name = this._anchorName.value;

resultLink["NAME"] = this._anchorName.value;

if (this._linkIdAnchor &amp;&amp; this._linkIdAnchor.value.trim()) {

resultLink.id = this._linkIdAnchor.value.trim();

}

else {

resultLink.removeAttribute("id");

}

//Make sure the href and some other attributes are removed just in case they are present

resultLink.removeAttribute("href");

resultLink.removeAttribute("target");

resultLink.removeAttribute("title");

}

else //"email"

{

resultLink.href = "mailto:" + this._emailAddress.value;

if (this._emailSubject.value != "") {

resultLink.href += "?subject=" + this._emailSubject.value;

}

if (this._emailTextBoxParentNode &amp;&amp; this._emailTextBoxParentNode.style.display != "none") {

resultLink.innerHTML = this._emailLinkText.value;

}

if (this._linkIdEmail &amp;&amp; this._linkIdEmail.value.trim()) {

resultLink.id = this._linkIdEmail.value.trim();

}

else {

resultLink.removeAttribute("id");

}

if (this._emailToolTip &amp;&amp; this._emailToolTip.value.trim())

resultLink.title = this._emailToolTip.value.trim();

this._setClass(resultLink, this._emailCssClass);

}

return resultLink;

},

&lt;/script&gt;

<strong>Adding Fields to Anchor Tab:</strong>
<telerik:RadPageView ID="anchorFieldset" runat="server">
								
     <div class="redRow redToolButton">
	<label class="redLabel" for="linkIdAnchor">
		<script type="text/javascript">document.write(localization["AnchorId"]);</script>
	</label>
	<input type="text" id="linkIdAnchor" class="redInputTool" />
	     <a href="javascipr:void(0);" id="anchorGenIdBtn" class="reTool reGenIdLink">
		<span class="reGenerateId" unselectable="on"> </span></a>
	</div>

	<div class="redRow">
		<label class="redLabel" for="AnchorName">
			<script type="text/javascript">document.write(localization["LinkName"]);</script>
		</label>
		<input type="text" id="AnchorName" />
	</div>
</telerik:RadPageView>

 

Add the fields in the email tab

<telerik:RadPageView ID="emailFieldset" runat="server">

<div class="redRow">

<label class="redLabel" for="EmailAddress">

<script type="text/javascript">document.write(localization["LinkAddress"]);</script>

</label>

<input type="text" id="EmailAddress" />

</div>

<div class="redRow" id="emailTextBoxParentNode">

<label class="redLabel" for="EmailLinkText">

<script type="text/javascript">document.write(localization["LinkText"]);</script>

</label>

<input type="text" id="EmailLinkText" />

</div>

<div class="redRow">

<label class="redLabel" for="EmailSubject">

<script type="text/javascript">document.write(localization["LinkSubject"]);</script>

</label>

<input type="text" id="EmailSubject" />

</div>

<div class="redRow redToolButton">

<label class="redLabel" for="linkIdEMail">

<script type="text/javascript">document.write(localization["EmailId"]);</script>

</label>

<input type="text" id="linkIdEMail" class="redInputTool" />

<a href="javascipr:void(0);" id="emailGenIdBtn" class="reTool reGenIdLink">

<span class="reGenerateId" unselectable="on"> </span> </a>

</div>

<div class="redRow">

<label class="redLabel" for="EmailCssClass">

<script type="text/javascript">document.write(localization["CssClass"]);</script>

</label>

<div class="redInlineBlock redMiddle">

<tools:ApplyClassDropDown ID="EmailCssClass" runat="server" />

</div>

</div>

<div class="redRow">

<label class="redLabel" for="EmailToolTip">

<script type="text/javascript">document.write(localization["EmailTooltip"]);</script>

</label>

<input type="text" id="EmailToolTip" />

</div>

</telerik:RadPageView>

script for all the fields

setupChildren: function () {

this._linkUrl = $get("LinkURL");

if (this._linkUrl == null) {

this._linkUrl = {};

this._linkUrl.value = "";

}

this._linkText = $get("LinkText");

this._linkTargetCombo = $get("LinkTargetCombo");

this._setLinkTargetLocalization();

this._existingAnchor = $get("ExistingAnchor");

this._linkTooltip = $get("LinkTooltip");

this._linkIdLink = $get("linkIdLink");

this._linkGenIdBtn = $get("linkGenIdBtn");

if (this._linkGenIdBtn)

this._linkGenIdBtn.title = localization["GenerateId"];

//NEW: Document manager support

this._documentManager = $find("DocumentManagerCaller");

this._linkCssClass = $find("LinkCssClass");

this._anchorName = $get("AnchorName");

this._linkIdAnchor = $get("linkIdAnchor");

this._anchorGenIdBtn = $get("anchorGenIdBtn");

if (this._anchorGenIdBtn)

this._anchorGenIdBtn.title = localization["GenerateId"];

this._emailAddress = $get("EmailAddress");

this._emailLinkText = $get("EmailLinkText");

this._emailSubject = $get("EmailSubject");

this._emailCssClass = $find("EmailCssClass");

this._emailToolTip = $get("EmailToolTip")

this._linkIdEmail = $get("linkIdEMail");

this._emailGenIdBtn = $get("emailGenIdBtn");

if (this._emailGenIdBtn)

this._emailGenIdBtn.title = localization["GenerateId"];

 

For both Ok and Cancel button

<button type="button" id="lmInsertButton">

<script type="text/javascript">

setInnerHtml("lmInsertButton", localization["OK"]);

</script>

</button>

<button type="button" id="lmCancelButton">

<script type="text/javascript">

setInnerHtml("lmCancelButton", localization["Cancel"]);

</script>

</button>

 

Then add the script for click event for both Ok and Cancel button.

this._insertButton = $get("lmInsertButton");

if (this._insertButton)

this._insertButton.title = localization["OK"];

this._cancelButton = $get("lmCancelButton");

if (this._cancelButton)

this._cancelButton.title = localization["Cancel"];

this._tab = $find("LinkManagerTab");

 

create an other project for what all fields needs to be added.

Let say I would like to add a label and a textbox

when you enter the data into the text box it needs to convert that piece of data into the <a href=”http://” upccode=”ghhh”>this</a> is a sample text.

Here upccode has been selected from the show editor and open the hyperlink manager and now enter the code “ghhh”. Once this is done click OK, open it in the htmleditor and then you will notice that it has link with the following <a href=”http://” upccode=”ghhh”>this</a>

Add the following code for the text box and label field.

<div class="redRow"> <!-- Get the UPCcode label and text field-->

<label class="redLabel" for="UPC">

UPCCode

</label>

<input type="text" id="textUPC" name="UpcCode" />

</div>

 

And add the following script to generate <a> in the html editor.

<script>

function UPCCodeClean() // to clean

{

upcCode = $get("textUPC");

upcCode.value = "";

}

function UPCCodeLoadLink(currentLink) // load the link

{

if (currentLink.href) {

upcCode = $get("textUPC");

if (upcCode) {

currentUpccode = currentLink.getAttribute("upccode");

if (currentUpccode !== null)

{

upcCode.value = currentUpccode;

}

else {

upcCode.value = "";

}

}

}

}

function UPCCodeModifyLink(resultLink) // modify the link

{

upcCode = $get("textUPC");

if (upcCode)

resultLink.setAttribute('upccode', upcCode.value); // If code is entered

else

resultLink.setAttribute('upccode', ''); // If empty, remove rel attribute.

return resultLink;

}

</script>

 

Add the following in the config file of this upccode project.

<Extension name="UPCCode" markup="~/sitecore modules/………………./UPCCode.html"

clean="UPCCodeClean"  loadLink="UPCCodeLoadLink"  modifyLink="UPCCodeModifyLink" />

 

depending the .html added, we must change it in the .config file.

and change the class name in editorpage.aspx – inetpub\wwwroot\project\Website\sitecore\shell\Controls\Rich Text Editor

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="EditorPage.aspx.cs" Inherits="HyperlinkManagerExtender.EditorPage" %>

This class should contain the following code in the hyperlinkmanagerextender project

namespace HyperlinkManagerExtender

{

[ToolboxData("<{0}:HyperlinkManagerExtender runat=server></{0}:HyperlinkManagerExtender>")]

public class HyperlinkManagerExtender : WebControl

{

private static Config Config = null;

static HyperlinkManagerExtender()

{

// Get the configuration.

Config = Factory.CreateObject("XXX/HyperlinkManagerExtenderConfig", true) as Config;

}

protected override void RenderContents(HtmlTextWriter output)

{

// Loop through the extensions that have been configured.

foreach (var extension in Config.Extensions)

{

// Get the extension's markup.

var markup = System.IO.File.ReadAllText(HttpContext.Current.Server.MapPath(extension.Markup));

// Output the markup.

output.Write(markup);

}

RenderCleanScripts(output);

RenderLoadLinkScripts(output);

RenderModifyLinkScripts(output);

}

protected virtual void RenderCleanScripts(HtmlTextWriter output)

{

output.WriteLine();

output.WriteLine("<script>");

output.WriteLine("oldXSC = Telerik.Web.UI.Widgets.LinkManager.prototype._hyperlinkManagerExtenderSetupChildren;");

output.WriteLine("Telerik.Web.UI.Widgets.LinkManager.prototype._hyperlinkManagerExtenderSetupChildren = function () {");

foreach (var extension in Config.Extensions)

output.WriteLine("{0}();".FormatWith(extension.CleanFunc));

output.WriteLine("oldXSC.apply(this, null);");

output.WriteLine("}</script>");

}

protected virtual void RenderLoadLinkScripts(HtmlTextWriter output)

{

output.WriteLine();

output.WriteLine("<script>");

output.WriteLine("oldXLLP = Telerik.Web.UI.Widgets.LinkManager.prototype._hyperlinkManagerExtenderLoadLinkProperties;");

output.WriteLine("Telerik.Web.UI.Widgets.LinkManager.prototype._hyperlinkManagerExtenderLoadLinkProperties = function (currentLink) {");

foreach (var extension in Config.Extensions)

output.WriteLine("{0}(currentLink);".FormatWith(extension.LoadLinkFunc));

output.WriteLine("oldXLLP.apply(this, currentLink);");

output.WriteLine("}</script>");

}

protected virtual void RenderModifyLinkScripts(HtmlTextWriter output)

{

output.WriteLine();

output.WriteLine("<script>");

output.WriteLine("oldXGML = Telerik.Web.UI.Widgets.LinkManager.prototype._hyperlinkManagerExtenderGetModifiedLink;");

output.WriteLine("Telerik.Web.UI.Widgets.LinkManager.prototype._hyperlinkManagerExtenderGetModifiedLink = function (resultLink) {");

foreach (var extension in Config.Extensions)

output.WriteLine("{0}(resultLink);".FormatWith(extension.ModifyLinkFunc));

output.WriteLine("oldXGML.apply(this, resultLink);");

output.WriteLine("}</script>");

}

}

}

 

Add the following in editorpage.cs in the hyperlinkmanagerextender

public class EditorPage : Sitecore.Shell.Controls.RichTextEditor.EditorPage

{

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

Editor.ExternalDialogsPath = "~/sitecore modules/HyperlinkManagerExtender";

}

}

This results in the following

enter any text in the UPCCode field and then click accept. Now open the  htmleditor.

 

Custom Hyperlink Manager – sitecore

Leave a Reply

Your email address will not be published. Required fields are marked *