HTML Formatting in Knowledge Articles imported from MS Word

[michaelrfisher]

Apparently, SN has changed the way that HTML codes are applied when Word files are imported as knowledge articles.

When I started using this functionality in May 2016, in Geneva, the Word styles Heading1, Heading2 and Heading3 translated very neatly into <h1>, <h2> and <h3> HTML styles in SN. In our Word templates, I set up those styles to resemble the way the end-result article would be displayed in SN. Yes, in the TinyMCE editor the content doesn't look the same way it does when viewed, but the source in Word and the end result when viewed were pretty similar. Acceptable solution.

In November we upgraded to Helsinki. I can't say that was when this issue started, but I've recently noticed that somewhere along the line, SN started being more "helpful" on import, and actually adds HTML codes to put in the changes to those Word styles I made to make the Word file resemble the end result. The h3 style has white text on a teal background - and now in TinyMCE any text using H3 is invisible, because SN has added color codes to turn the text white. <h3> has become <h3 style="color: #ffffff;" align="left">.

If I remove the extra formatting codes and return h3 to just <h3> instead of <h3 style="color: #ffffff;" align="left">, the error is corrected, and things behave the way they used to. But having to do this surgery on every article is a pain.

I suspect Service Now's response will be "Yeah, it does that, deal with it." But has anyone else encountered this?

[michaelrfisher]

A rock-star developer on our team (whose name I won't reveal here to avoid poachers 🙂 just came up with a very elegant little business rule to restore the imported HTML styles to their former stripped down state.

The code is like this:

        var replaceText =
        current.text;

        //strip out any code inside h tags
        replaceText = replaceText.replace(/<h1\s[^>]*/gi, '<h1');
        replaceText = replaceText.replace(/<h2\s[^>]*/gi, '<h2');
        replaceText = replaceText.replace(/<h3\s[^>]*/gi, '<h3');

        current.text = replaceText;

This turns <h3 style="color: #ffffff;" align="left">   back into just <h3>

...as well as doing the same with H1 and H2 codes.