Forum Discussion
Migrating HTML to Modern Pages - Looks great until page is edited, then content is lost
The easiest way to understand what's valid HTML is to create a piece of text using all the layout and formatting options you need. Once you've that you can grab the page list item and look at the canvascontent1 field to obtain the generated HTML. You'll see that only a limited number of styles are supported and fixed set of classes for color and size information. Anything else you use can be initially displayed but will be lost during edit.
Thanks, BertJansen. I was unable to @ mention you before for some reason...
I had found the HtmlTransformator.cs so it's good to know I was moving along the right path. Do you have a list of gotchas that the text editor does not handle. I can infer this from the code, but some of it does not seem to be a problem for me. For example, I don't appear to need a <P> just before an image. The biggest one so far has been <table> elements. That and the fact that a bunch of inline css is just plain stripped which I can't do much about other than find workarounds using the techniques the current editor uses.
You clearly have a lot of knowledge here so I'll take any other information you can provide.
Thanks!
Kirk
MicrosoftThe easiest way to understand what's valid HTML is to create a piece of text using all the layout and formatting options you need. Once you've that you can grab the page list item and look at the canvascontent1 field to obtain the generated HTML. You'll see that only a limited number of styles are supported and fixed set of classes for color and size information. Anything else you use can be initially displayed but will be lost during edit.
BertJansen
It might be too late for you but anyone who's still facing the issue, this is how I solved it.
For images$@" <div class=""imagePlugin"" style=""background-color:transparent;position:relative;"" data-alignment=""Center"" data-imageurl=""<Full Image Url>"" data-uploading=""0"" data-widthpercentage=""100""> <div style=""display: flex; flex-direction: column; position: relative; margin: 0px auto; width: 100%; align-items: center;""> <div class="""" style=""position: relative; outline: none;""> <div class="""" data-automation-id=""imageRead""> <figure tabindex=""0"" role=""button"" class="""" > <div class=""> <div style="" class=""> <img style='width:100%' alt='<alt-text>' data-sp-originalimgsrc=""<Full Image Url>"" src='<Full Image Url>' /> </div> </div> </figure> </div> </div> </div> </div>");For tables
// using HtmlAgilityPack here // idea again is the same, wrap table in a few other html nodes as SP itself does. var htmlDoc = new HtmlDocument(); ListDictionary tableNodes = new ListDictionary(); if (tables != null) { foreach (var tag in tables) { HtmlNode figureNode = HtmlNode.CreateNode("<figure class=\"table canvasRteResponsiveTable tableLeftAlign\" title=\"Table\">"); var clonedTableNode = tag.Clone(); clonedTableNode.AddClass("ck-table-resized"); figureNode.AppendChild(clonedTableNode); tableNodes.Add(tag.OuterHtml, figureNode.OuterHtml); Console.WriteLine(figureNode.OuterHtml); } } foreach (DictionaryEntry tableNodeDict in tableNodes) { htmlDoc.DocumentNode.InnerHtml = htmlDoc.DocumentNode.InnerHtml.Replace(tableNodeDict.Key.ToString(), tableNodeDict.Value.ToString()); } return htmlDoc.DocumentNode.InnerHtml;Thanks, that helps. This will be tedious.
This is an older thread, but if anyone is still here, there seems to be a bug in SharePoint Modern Pages where table content is added through the UI. We added a small table of content to a page, saved it, published it, then when we went back to edit the content disappeared.
In other words, it might not just be a valid/invalid HTML thing. There might be a bigger issue here.
If you are using a "<table>" element, then you need to add wrap it with additional divs that have "canvasRteResponsiveTable" and "tableWrapper" classes. See my comment further above for more details.
