Try our conversational search powered by Generative AI!

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.