Migrating HTML to Modern Pages - Looks great until page is edited, then content is lost

Brass Contributor

Aug 02, 2018

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

BertJansen

Microsoft

Aug 02, 2018

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.

faraz77

Copper Contributor

Jan 14, 2024

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;

Forum Discussion

Migrating HTML to Modern Pages - Looks great until page is edited, then content is lost

Resources