Sitecore Extend Content Editor.js

I recently had a costumer, who wanted the Content Tree to be displayed by default in the Content Editor when editing an item through the Content Editor opened via Page Editor.

The following screen dumps will explain it…

Is it clear now?! :-)

Sitecore uses the “Content Editor.js” located at “/Sitecore/shell/Applications/Content Manager” when managing the behavior of the content editor. More specifically, it is the function “scContentEditor.prototype.initializeTree”, we should enhance. 

The functionality of the javascript varies slightly from version 6 and 7-8 in how to display the Content Tree Panel. 

Sitecore v7 – v8.1:

scContentEditor.prototype.initializeTree = function () {
    var ctl = scForm.browser.getControl("ContentTreePanel");

    if (ctl != null) {
        var visible = (scForm.getCookie("scContentEditorFolders") != "0") && (window.location.href.indexOf("mo=preview") < 0) && (window.location.href.indexOf("mo=mini") < 0) && (window.location.href.indexOf("mo=popup") < 0) || (window.location.href.indexOf("mo=template") >= 0);

        ctl.style.display = visible ? "" : "none";
    }
}

A slidely different in Sitecore v6:

scContentEditor.prototype.initializeTree = function () {
    var ctl = scForm.browser.getControl("ContentTreePanel");

    if (ctl != null) {
        var visible = (scForm.getCookie("scContentEditorFolders") != "0") && (window.location.href.indexOf("mo=preview") < 0) && (window.location.href.indexOf("mo=mini") < 0) && (window.location.href.indexOf("mo=popup") < 0) || (window.location.href.indexOf("mo=template") >= 0);

        ctl.style.display = visible ? "" : "none";

        var width = scForm.getCookie("scContentEditorFoldersWidth");

        if (width != null && width != "") {
            ctl.style.width = width;
        }
    }
}

What we want to do, is to make sure that the “var visible” is true, if the the Content Editor is opened through the Page Editor. When the Content Editor opens through the Page Editor, Sitecore adds the query string “sc_ce=1” to the URL. 

So, let us extend the function above with this  “|| (window.location.href.indexOf("sc_ce=1")”. Ending up with a javascript as following:

scContentEditor.prototype.initializeTree = function () {
    var ctl = scForm.browser.getControl("ContentTreePanel");

    if (ctl != null) {
        var visible = (scForm.getCookie("scContentEditorFolders") != "0") && (window.location.href.indexOf("mo=preview") < 0) && (window.location.href.indexOf("mo=mini") < 0) && (window.location.href.indexOf("mo=popup") < 0) || (window.location.href.indexOf("mo=template") >= 0) || (window.location.href.indexOf("sc_ce=1"));

        ctl.style.display = visible ? "" : "none";
    }
}

Sure, best practice is not to add the statement into the javascript, which Sitecore use. Instead, we should add the extended function into a separate javascript and enhance the Content Editor with the separated javascript. How do we add the javascript to the Content Editor?

Sitecore allow us to hook into the renderContentEditor pipeline to add controls into the head section of the standard Content Editor. This is exactly what we want to do. 

using System;
using System.Web.UI;
using Sitecore.Diagnostics;
using Sitecore.Pipelines;
 
namespace MySitecoreExtensions.Pipelines.ContentEditor
{
    public class AddScripts
    {
        public void Process(PipelineArgs args)
        {
            Sitecore.Context.Page.Page.Header.Controls.Add((Control)new LiteralControl(scriptTag.FormatWith("/MySitecoreExtensions/Content Editor/Javascripts/ShowTreeView.js"))));
        }
    }
}

Finally, we add the a new processor into the renderContentEditor pipeline :

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
    <sitecore>
        <pipelines>

<!-- render script to display content tree in page editor - Render content mode -->
            <renderContentEditor>
              <processor type="MySitecoreExtensions.Pipelines.ContentEditor.AddScripts, MySitecoreExtensions" patch:before="processor[@type='Sitecore.Shell.Applications.ContentEditor.Pipelines.RenderContentEditor.RenderSkinedContentEditor, Sitecore.Client']" />
            </renderContentEditor>
        </pipelines>
    </sitecore>
</configuration>