Kloojed

Dynamic content and invalid html markup

Dynamic content is one of the new features in EPiServer CMS R2 and looks like a potential way of adding dynamic content to your XHTML-editors and keep control over the rendering of the markup.

In this short article I will not show you how to create dynamic content plugins, instead I will focus on the problem that the XHTML-editor always wraps the contents in paragraph tags.

So lets assume that you we have created a new dynamic content plugin that renders an h3, one image and a paragraph, if you add this new dynamic content in your editor and hit save and plublish you will see that the editor has wrapped your markup within a paragraph which invalids your markup.

There is maybe a better way of doing this but my suggestion is to take control over the property rendering by creating a new class that inherits from PropertyLongStringControl and override the CreateDefaultControls method like I did in this article. Below is some example code that shows how to do this.

  1. public override void CreateDefaultControls() {
  2. //ignore processing if no data exists
  3. PropertyXhtmlString propertyData = PropertyData as PropertyXhtmlString;
  4. if (propertyData == null) {
  5. base.CreateDefaultControls();
  6. return;
  7. }
  8. Control target;
  9. //if we don't have any attributes we can suffice with a PlaceHolder
  10. if (AttributeSourceControl.ControlStyle.IsEmpty) {
  11. target = new PlaceHolder();
  12. } else {
  13. //else we need a panel and copy the attributes.
  14. target = new Panel();
  15. CopyWebAttributes((Panel)target);
  16. }
  17. Controls.Add(target);
  18. foreach (IStringFragment fragment in propertyData.StringFragments) {
  19. if (fragment is StaticFragment) {
  20. string content = fragment.InternalFormat;
  21. content = Regex.Replace(content, @"^\</p\>", "");
  22. content = Regex.Replace(content, @"\<p>$", "");
  23. Literal literal = new Literal { Text = content };
  24. target.Controls.Add(literal);
  25. } else {
  26. target.Controls.Add(fragment.GetControl((PageBase)Page));
  27. }
  28. }
  29. }

This code also removes the extra div tag around the the editor to make the markup cleaner but I´m not completely satisfied with this solution but at the moment I can't figure out a better way, can you?

  • Posted October 14, 2008
  • I wouldn't recommend not doing it the way you are doing. It forces the developer to make changes in the global.asax file, which isn't always possible. Especially if you are producing a plug-in or something that is to be distributed. A better way is to use PropertyDataControlAdapter and then set up the "override" in the browser capabilities file. Just an idea... If you don't like the adapter way, you could ccreate a class inheriting from PlugInAttribute and use its Start method to register your control. This will also solve the whole Global.asax problem...

    • Posted by Chris
    • October 16, 2008
  • Chris:

    I really like to use adapters for this type of problems but in this case I totally forgotten about it so thank you for reminding me.

    When is it not possible to make changes in the global.asax file?

Leave a comment


Information

About

Marcus Lindblom is a Swedish professional frontend engineer with specialities like Web standards, ASP.NET, EPiServer, accessibility and long experience in developing high end websites for the public sector and commercial companies.

Copyright

Copyright © 2008 Marcus Lindblom. Powered by StormBreaker - Standards Compliant CMS. Hosted by Meridium AB.