Join us this Friday for AI in Action at the Virtual Happy Hour! This free virtual event is open to all—enroll now on Academy and don’t miss out.

 

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.