Interesting question!
Can you solve it with JavaScript instead? Say, add three different classses in edit mode, called edit1, edit2 and edit3, then replace class="edit1" with class="view1 view2 view3"?
BR,
Marija
Thank you for the feedback!
JavaScript is an interesting way of solving it. Something like $('table:not([class])').addClass('view1 view2 view3') would do the trick on the client side (adding the classes to any table that has no class set).
Unfortunately the site I'm working on requires non-JavaScript compability, which sadly makes a client side rewrite not a viable option. But it was a great idea!
Then could you use HtmlAgilityPack to parse the XHtmlString, select all tables without any classes and add these classes (you could cache this too)? Then instead of using Html.PropertyFor(m => m.CurrentPage.Text), you would use Html.PropertyFor(m => m.ReplacedText).
You would also add a connection for edit mode between Text and ReplacedText.
It would look something like this (untested):
private static XhtmlString AddClassesToTables(XhtmlString xhtmlString) { var doc = new HtmlDocument(); doc.LoadHtml(xhtmlString.ToHtmlString()); var tablesWithoutClasses = doc.DocumentNode.SelectNodes("//table[not(@class)]"); if (tablesWithoutClasses != null && tablesWithoutClasses.Any()) { foreach (var table in tablesWithoutClasses) { table.Attributes.Add("class", "one two three"); } } var outerHtml = doc.DocumentNode.OuterHtml; return new XhtmlString(outerHtml); }
You would need this: https://www.nuget.org/packages/HtmlAgilityPack
In controller, you would add:
var editHints = ViewData.GetEditHints<TextPageViewModel, TextPage>(); editHints.AddConnection(m => m.ReplacedText, page => page.Text);
What would be the best practise to ensure that every table added by an editor in any HTML property got decorated with a couple of CSS classes?
From what I understand there's no way to get editor.css to expose more than one class name to a selectable style, and in my case I need three different classes.
Is this even possible to handle by code without to much work or should the approach instead be to try to adjust the CSS-framework used in order to combine the different classes in one?