Tags

, , , ,

I have been working on multiple things right now. And came across an issue where our site manager wanted a specific class to be added in A tag when we are adding the Sitecore Link.

We found multiple solutions while googling and tried the same. But most of the code was in earlier version of Sitecore so one or other thing was missing.

Another important thing was, to add any button or anything we needed to make changes in Sitecore files. Our team which manages the Sitecore upgrades asked to find a solution where we don’t need to modify any Sitecore files. This way it would be much more easier task during the Sitecore upgrade.

I have achieved the same so mentioning the process step by step.

  • Create a button in Sitecore – core database – in HTML Editor profiles
  • Create code behind – if needed
  • Create an XML file
  • Create a JS file
  • Create config file

 

Steps in Detail

  1. Login to Sitecore admin panel. Change to Core DB. Go to “/sitecore/system/Settings/Html Editor Profiles/”. You will find multiple profiles. Go to the profile you want to modify. Suggestion: Create your custom profile and then change. insert_dialog_in_html_editor
  2. Add below code in a Class file in your .Net project – This will be referred in the XML file in CodeBeside tag.
    public class InsertDialogForm : DialogForm
    
    {
    protected DataContext DialogFolderDataContext;
    protected TreeviewEx DialogContentItems;
    protected string Mode
    {
    get
    {
    string mode = StringUtil.GetString(base.ServerProperties["Mode"]);
    if (!string.IsNullOrEmpty(mode))
    {
    return mode;
    }
    return "shell";
    }
    set
    {
    Assert.ArgumentNotNull(value, "value");
    base.ServerProperties["Mode"] = value;
    }
    }
    protected override void OnLoad(EventArgs e)
    {
    Assert.ArgumentNotNull(e, "e");
    base.OnLoad(e);
    if (!Context.ClientPage.IsEvent)
    {
    Inialize();
    }
    }
    
    private void Inialize()
    {
    SetMode();
    SetDialogFolderDataContextFromQueryString();
    }
    private void SetMode()
    {
    Mode = WebUtil.GetQueryString("mo");
    }
    private void SetDialogFolderDataContextFromQueryString()
    {
    DialogFolderDataContext.GetFromQueryString();
    }
    protected override void OnOK(object sender, EventArgs args)
    {
    Assert.ArgumentNotNull(sender, "sender");
    Assert.ArgumentNotNull(args, "args");
    string selectedItemID = GetSelectedItemIDAsString();
    if (string.IsNullOrEmpty(selectedItemID))
    {
    return;
    }
    string selectedItemName = GetSelectedItemName();
    string javascriptArguments = string.Format("{0}, {1}", EscapeJavascriptString(selectedItemID), EscapeJavascriptString(selectedItemName));
    if (IsWebEditMode())
    {
    SheerResponse.SetDialogValue(javascriptArguments);
    base.OnOK(sender, args);
    }
    else
    {
    string closeJavascript = string.Format("scClose({0})", javascriptArguments);
    SheerResponse.Eval(closeJavascript);
    }
    }
    
    private string GetSelectedItemIDAsString()
    {
    ID selectedID = GetSelectedItemID();
    if (selectedID != ID.Null)
    {
    return selectedID.ToString();
    }
    return string.Empty;
    }
    private ID GetSelectedItemID()
    {
    Item selectedItem = GetSelectedItem();
    if (selectedItem != null)
    {
    return selectedItem.ID;
    }
    return ID.Null;
    }
    private string GetSelectedItemName()
    {
    Item selectedItem = GetSelectedItem();
    if (selectedItem != null)
    {
    return selectedItem.Name;
    }
    return string.Empty;
    }
    private string GetSelectedItemPath()
    {
    Item selectedItem = GetSelectedItem();
    if (selectedItem != null)
    {
    return selectedItem.Paths.FullPath;
    }
    return string.Empty;
    }
    private Item GetSelectedItem()
    {
    return DialogContentItems.GetSelectionItem();
    }
    private static string EscapeJavascriptString(string stringToEscape)
    {
    return StringUtil.EscapeJavascriptString(stringToEscape);
    }
    protected override void OnCancel(object sender, EventArgs args)
    {
    Assert.ArgumentNotNull(sender, "sender");
    Assert.ArgumentNotNull(args, "args");
    if (IsWebEditMode())
    {
    base.OnCancel(sender, args);
    }
    else
    {
    SheerResponse.Eval("scCancel()");
    }
    }
    private bool IsWebEditMode()
    
    {
    return string.Equals(Mode, "webedit", StringComparison.InvariantCultureIgnoreCase);
    }
    }

     

  3. Open path in your Website : Sitecore\shell\Controls\Rich Text Editor. Create a Folder named InsertDialog. Create an XML file in this folder. Copy below mentioned code in the XML file.
    <?xml version="1.0" encoding="utf-8" ?>
    <control xmlns:def="Definition" xmlns="http://schemas.sitecore.net/Visual-Studio-Intellisense">
     <RichText.InsertDialog>
     <FormDialog Icon="Network/32x32/arrow_join.png" Header="Insert Dialog"
     Text="Select the dialog content item you want to insert." OKButton="Insert">
    
    < script Type="text/javascript" Language="javascript" Src="/sitecore/shell/Controls/Rich Text Editor/InsertDialog/InsertDialog.js">.</ script>
    <!--Remove space from above line -->
    
    <CodeBeside Type="SND81.SC.Extensions.InsertDialog.InsertDialogForm,SND81.SC.Extensions" />
    
    <DataContext ID="InternalLinkDataContext"/>
     <DataContext ID="DialogFolderDataContext" Root="{A58A9251-9CA3-4CF0-8BBA-FEB606CD0C5A}" />
    
    <Tabstrip ID="Tabs" Width="100%" Height="100%">
     <Tab ID="InternalLinkTab" Header="Internal Link">
     <Scrollbox Width="100%" Height="100%" Background="white" Border="none" Padding="0">
     <TreeviewEx ID="DialogContentItems" DataContext="DialogFolderDataContext" Root="true" />
     </Scrollbox>
    
    </Tab>
     </Tabstrip>
    </FormDialog>
     </RichText.InsertDialog>
    </control>
  4. Open path in your Website : Sitecore\shell\Controls\Rich Text Editor\InsertDialog. Create a JS file in this folder. Copy below mentioned code in the JS file.
    function GetDialogArguments() {
     return getRadWindow().ClientParameters;
    }
     
    function getRadWindow() {
     if (window.radWindow) {
     return window.radWindow;
     }
     
     if (window.frameElement && window.frameElement.radWindow) {
     return window.frameElement.radWindow;
     }
     
     return null;
    }
     
    var isRadWindow = true;
     
    var radWindow = getRadWindow();
     
    if (radWindow) { 
     if (window.dialogArguments) { 
     radWindow.Window = window;
     } 
    }
     
    function scClose(url, text) {
     var returnValue = {
     url:url,
     text:text
     };
     
     getRadWindow().close(returnValue);
    }
     
    function scCancel() {
     getRadWindow().close();
    }
     
    function scCloseWebEdit(url) {
     window.top.returnValue = window.returnValue = url;
     window.top.close();
    }
    
    if (window.focus && Prototype.Browser.Gecko) {
     window.focus();
    }
  5. Create a JS file at any location in the website. Can be in JS folder or Sitecore folder. Add below code in the file. Suggestion: Create a single file like RTECustomization.js and place all such code in a single file.
    Telerik.Web.UI.Editor.CommandList["InsertDialog"] = function(commandName, editor, args) {
     var d = Telerik.Web.UI.Editor.CommandList._getLinkArgument(editor);
     Telerik.Web.UI.Editor.CommandList._getDialogArguments(d, "A", editor, "DocumentManager");
    
    var html = editor.getSelectionHtml();
    var id;
    // internal link in form of <a href="~/link.aspx?_id=110D559FDEA542EA9C1C8A5DF7E70EF9">...</a>
     if (html) {
     id = GetMediaID(html);
     }
    // link to media in form of <a href="-/media/CC2393E7CA004EADB4A155BE4761086B.ashx">...</a>
     if (!id) {
     var regex = /~\/media\/([\w\d]+)\.ashx/;
     var match = regex.exec(html);
     if (match && match.length >= 1 && match[1]) {
     id = match[1];
     }
     }
    if (!id) {
     id = scItemID;
     }
    id = scFormatId(id);
    scEditor = editor;
    editor.showExternalDialog(
     "/sitecore/shell/default.aspx?xmlcontrol=RichText.InsertDialog&la=" + scLanguage + "&fo=" + id + (scDatabase ? "&databasename=" + scDatabase : ""),
     null, //argument
     1100,
     700,
     scInsertDialog, //callback
     null, // callback args
     "Insert Dialog",
     true, //modal
     Telerik.Web.UI.WindowBehaviors.Close, // behaviors
     false, //showStatusBar
     false //showTitleBar
     );
    };
    function scInsertDialog(sender, returnValue) {
     if (!returnValue) {
     return;
     }
    var d = scEditor.getSelection().getParentElement();
    if ($telerik.isFirefox && d.tagName == "A") {
     d.parentNode.removeChild(d);
     } else {
     scEditor.fire("Unlink");
     }
    var text = scEditor.getSelectionHtml();
    if ($telerik.isIE) {
     text = scIEFixRTETextRange(scEditor);
     }
    var returnURL = returnValue.url.replace("{", "").replace("}", "").replace('-', '');
    
    if (text == "" || text == null || ((text != null) && (text.length == 15) && (text.substring(2, 15).toLowerCase() == "<p>&nbsp;</p>"))) {
     text = returnValue.text;
     }
     else {
     // if selected string is a full paragraph, we want to insert the link inside the paragraph, and not the other way around.
     var regex = /^[\s]*<p>(.+)<\/p>[\s]*$/i;
     var match = regex.exec(text);
     if (match && match.length >= 2) {
     var placeholderHtml = "<a class=\"Green Goblin\""
     + " href=\"~/link.aspx?_id=" + returnURL
     + "&amp;_z=z\""
     + match[0]
     + "</a>";
    
    scEditor.pasteHtml(placeholderHtml, "DocumentManager");
     return;
     }
     }
    var placeholderHtml = "<a class=\"Green Goblin\""
     + " href=\"~/link.aspx?_id=" + returnURL
     + "&amp;_z=z\""
     + text
     + "</a>";
    
    scEditor.pasteHtml(placeholderHtml, "DocumentManager");
    }
  6. Now comes the most important thing. Code in Step 5 can be added directly in the RichText Commands.js file located at . But we don’t want to do that. We don’t want to touch any Sitecore file. So we will use the Config. Add a config file in the Include folder.
    <?xml version="1.0" encoding="utf-8"?>
    <configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
     <sitecore>
     <clientscripts>
     <htmleditor>
     <script src="sitecore\shell\Controls\Rich Text Editor\RTECustomization.js" language="javascript" key="customJs" />
     </htmleditor>
     </clientscripts>
     </sitecore>
    </configuration>


    IMP points
    :
    Telerik.Web.UI.Editor.CommandList[“InsertDialog”] – Here Telerik.Web.UI.Editor.CommandList is the new change in Sitecore 8.0 onwards. If you have upgraded the site and you have RTE customization then it will fail because of this change. Earlier it was RadEditorCommandList. “InsertDialog” in the bracket is the same as we mentioned in the Sitecore Button.

Advertisements