Saturday, 9 August 2014

Sitecore Page Editor Mode renders raw/json value as content

Leave a Comment
Recently I have faced one strange issue while working with Sitecore Page Editor Mode. Sitecore Page Editor Mode was rendering some raw json value as content. In this post I am going to narrate my findings while doing the troubleshooting. Please note that I am working with Sitecore7.0 with MVC enabled.
  • John West has already written great blog related to this issue. Please refer to John’s blog which describes resolutions to issues that can cause the Page Editor in the Sitecore to render a jumble of JSON as part of the content of a page. 
  • Ensure that webedit.css file is getting loaded and accessible. You’ll find below setting in web.config file:
    <setting name="WebEdit.ContentEditorStylesheet" value="/webedit.css"/>
    Value attribute specifies the location where webedit.css is located. By default the webedit.css file is located at the root of website. In my case, webedit.css was getting loaded perfectly.
    If webedit.css is not getting loaded into DOM then add a reference to the webedit.css in <head> of layout to resolve the problem.
  • Ensure that Sitecore.MvcExperienceEditor.config file is enabled if you are working with Sitecore MVC. You can find this file at \App_Config\Include folder. Sitecore.MvcExperienceEditor.config file is responsible to render all required javascript/css files in page editor mode.
  • Verify that you are not getting any jQuery conflict related errors. If yes, then override $ function by calling "jQuery.noConflict()".
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
    var jq = jQuery.noConflict(true);
    $jq(document).ready(function() {
     // Your jQuery related code go here. Use $jq for all calls to jQuery.
  • Ensure that Layout HTML is not causing any issue in page editor mode. Following code was written in BaseLayout.cshtml file to render IE version specific conditional css classes on body tag:
    <!--[if lt IE 8]>      <body class="lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <body class="lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    Bingo! It was the culprit who was causing the main issue. I’ve removed code of loading conditional css classes on body tag and I was no longer getting jumbled json in Sitecore Page Editor Mode.
Drop a comment below if you are aware of any additional solution for resolving this issue. Comments and suggestions are most welcome. Happy coding!


Post a Comment