Multiple default CSS classes for tables


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?

Aug 18, 2015 11:58

*bump* due to massive spam in older threads

Aug 19, 2015 8:49

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"?



Aug 19, 2015 10:25

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!

Aug 19, 2015 14:05

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.

Aug 19, 2015 14:08

It would look something like this (untested):

        private static XhtmlString AddClassesToTables(XhtmlString xhtmlString)
            var doc = new HtmlDocument();

            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:

Aug 19, 2015 14:16

In controller, you would add:

            var editHints = ViewData.GetEditHints<TextPageViewModel, TextPage>();
            editHints.AddConnection(m => m.ReplacedText, page => page.Text);
Aug 19, 2015 14:23

I will give it a try. Thank you very much! :)

Aug 19, 2015 14:26
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.