Try our conversational search powered by Generative AI!

Multiple default CSS classes for tables

Vote:
 

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?

#132728
Aug 18, 2015 11:58
Vote:
 

*bump* due to massive spam in older threads

#132822
Aug 19, 2015 8:49
Vote:
 

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

#132833
Aug 19, 2015 10:25
Vote:
 

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!

#132852
Aug 19, 2015 14:05
Vote:
 

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.

#132853
Aug 19, 2015 14:08
Vote:
 

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

#132854
Aug 19, 2015 14:16
Vote:
 

In controller, you would add:

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

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

#132859
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.