Embedding the page editor in the content editor

07 maart 2013 om 00:00 by Ruud van Falier - Post a comment

Yesterday I tweeted a screenshot showing the Page Editor embedded in the Content Editor.
I was going to share this solution after I was done building our new website (which this script is part of), but the response has been so positive that I figured I have to share this right away.

I got this idea when I got to work with EPiServer during a project.
EPiServer is one of Sitecore's competitors and very similar, but of course has some other features and solved some things in another way than Sitecore did.
My idea is to take all the good things from EPiServer and introduce them to Sitecore as separate modules.

One of these modules is the Embedded Page Editor; when you edit an item in the Content Editor, instead of displaying the content tab, I display a new tab that contains the Page Editor view for that item.
Hopefully, this motivates the user to edit the page using the Page Editor instead of the content editor because I believe this really is a much more pleasant way of managing your website.
I notice that a lot of users don't even know the Page Editor exists, let alone how it could make their content editing experience a lot easier.

Embedding the Page Editor was a ridiculously easy thing to do and I only needed to make a few code ninja moves to make it work properly in Internet Explorer and FireFox.
Instead of writing the code in a code-behind file, I decided to create a plain ASPX file so that anyone can install it in their Sitecore instance and modify if they want, without the need for Visual Studio.

The code is shared on GitHub so that you will always have the latest version, should I decide to modify something.
Grab it here: https://github.com/ParTech/Embedded-Page-Editor

For easy installation, I also added a Sitecore installation package: https://github.com/ParTech/Embedded-Page-Editor/raw/master/ParTech.Embedded-Page-Editor.zip

As for how to install it, just follow these steps (which are also mentioned in the readme file on GitHub):

1) Add the PageEditor.aspx file to your webroot in the folder /sitecore/shell/Custom

2) Create a new Editor in Sitecore using the following steps:

  • Open the Content Editor
  • Switch to the Core database
  • Select the item /sitecore/content/Applications/Content Editor/Editors
  • Insert a new folder called Custom
  • In that folder, insert a new item called Page Editor from the template Sitecore Client/Content editor/Editor
  • In the Url field, enter this URL: /sitecore/shell/custom/pageeditor.aspx
  • Choose an appropiate icon
  • Check the Refresh On Show checkbox

3) Now you have added a new Editor, let's configure some templates to use it:

  • Open the Standard Values item for the template for which you want the embedded Page Editor to be enabled.
    Side note: I advised you to use proper inheritance so that all page templates inherit from one base template. Then you only have to configure the editor for that one template.
  • Make sure that the Standard Fields checkbox in the View ribbon is enabled
  • Locate the Editors field in the Appearance section and add the newly created Page Editor editor there
  • Save the Standard Values and you're good to go!

The Page Editor is now embedded in the Content Editor for all the items that were made using the templates for which you just configured it.

In the next few weeks, I expect to come up with more of these small improvements that I picked up from other Content Management Systems and that I feel are missing in Sitecore.
If you have any suggestions in this regard, please let me know! I would really like to get input on this.