March 2012 » Kentico CMS 6.0 Upgrade Quick Tip – Fix Blank Content Areas That Should Not Be Blank
Mar 13

Kentico CMS 6.0 Upgrade Quick Tip – Fix Blank Content Areas That Should Not Be Blank

Like I have mentioned before, at BizStream we have done our fair share of upgrades from Kentico CMS 4.x, 5.x, or 5.5 R2 to Kentico CMS 6.0. Along the way we have run into more than a few issues, but overall the process is usually quite smooth. Today I had an interesting problem though. When a newly upgraded site loaded up in the CMSDesk, the main content area was just a blank looking box. It appeared to be in some sort of disabled state. This was something that I had not seen before. Especially since the site was not using workflow nor the versioning system. The issue looked much like the screen shot below.

 

Blank Content Area with no Source button

 

After some trial and error, and harsh words under my breath, I figured out that the document contained a few embedded YouTube videos in the editable text content. When I manually removed the content that contained the embed tag from the DocumentContent field in the database, the issue went away and the editor worked as expected. The offending markup was basically the same as the snippet below:

 

<embed width="560" height="315" 
    src="http://www.youtube.com/v/-63JWVjGxYQ" 
    type="application/x-shockwave-flash">
</embed>

 

Without that markup the editor was fine, as shown below:

 

Normal Content Area of an Edittable Text Web Part

 

If I placed the markup back in via the source button, like below, the problem showed right up again.

 

Content Area with Embed only Code

 

The strangest part of this is that page and CMSDesk worked flawlessly in the live environment which is still running 5.5 R2. The major difference between 5.5 R2 and 6.0 is the fact that 6.0 uses a newer WYSIWYG editor component called CKEditor. So I started researching how the new CKEditor works compared to the older FCKEditor component that Kentico CMS used prior to 6.0. As it turns out the CKEditor expects and requires any embed tags to be wrapped in an object tag like the following:

 

<object width="560" height="315">
    <param name="movie" value="http://www.youtube.com/v/-63JWVjGxYQ" />
    <param name="allowFullScreen" value="true" />
    <param name="allowscriptaccess" value="always" />
    <embed width="560" height="315" 
        allowscriptaccess="always" 
        allowfullscreen="true"
        src="http://www.youtube.com/v/-63JWVjGxYQ?version=3&amp;hl=en_US" 
        type="application/x-shockwave-flash">
     </embed>
 </object>

Once I wrapped the embed tag with the object tag the CKEditor worked as expected.

 

Content Area with Object and Embed Tag

 

Turning off Source mode shows:

 

Working Content Area with Object and Embed Tag

 

This really may be a rare thing during the upgrade process, especially if your content editors are not using the Source button on any editable text web parts. Hopefully though this post may save someone else an hour of saying not so nice things about WYSIWYG editors.

And just in case you are extra curious on what video I’m using in my embed examples above, click play below to see why Kentico CMS is the best Web Content Management System for ASP.NET.

 

You might also be interested in

[X]

Be the first to know about my latest Kentico Tips & Tricks!

Do not show again