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