Html content with class=''MsoNormal'' or class=“MsoListParagraph” not rendering in WYSIWYG editor (angular js)

Question

The text entered in the WYSIWYG editor is saved in the below format

<p class="MsoListParagraph" style="text-indent: -18pt; margin-left: 18pt; mso-list: l0 level1 lfo1;"><!--[if !supportLists]--><span lang="EN-US" style="font-family: Symbol; font-size: 10pt; mso-fareast-font-family: Symbol; mso-bidi-font-family: Symbol; mso-ansi-language: EN-US;">·<span style="line-height: normal; font-family:; font-size: 7pt; font-stretch: normal;" roman";"="" new="" times="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span><!--[endif]-->
<span lang="EN-US" style="font-family:; font-size: 10pt;" tahoma",sans-serif;mso-ansi-language:en-us"="">Some<span lang="EN-US" style='color: rgb(31, 73, 125); font-family: "Arial",sans-serif; font-size: 10pt; mso-fareast-font-family: Gulim; mso-ansi-language: EN-US; mso-fareast-language: KO; mso-bidi-language: AR-SA;'>Text</span>
<span lang="EN-US" style='color: black; font-family: "Arial",sans-serif; font-size: 10pt; mso-fareast-font-family: Gulim; mso-ansi-language: EN-US; mso-fareast-language: KO; mso-bidi-language: AR-SA;'> to</span><span lang="EN-US" style='color: rgb(31, 73, 125); font-family: "Arial",sans-serif; font-size: 10pt; mso-fareast-font-family: Gulim; mso-ansi-language: EN-US; mso-fareast-language: KO; mso-bidi-language: AR-SA;'> be in </span>entered by user</span><span style="line-height: 1.4;">&nbsp;</span></p>
<p class="MsoListParagraph" style="margin-left: 18pt;"><span lang="EN-GB" style="font-family:; font-size: 10pt;" tahoma",sans-serif;mso-ansi-language:en-gb"="">Comments entered by user.</span><span lang="EN-US" style="font-family:; font-size: 10pt;" tahoma",sans-serif;mso-ansi-language:en-us"=""><o:p></o:p></span></p>

The text which should be displayed in the textarea of the editor is "Some Text entered by user"

But the textarea is showing blank and no text is displayed as expected.

On 'Inspect element', the whole p element is not getting appended and instead a < br > is present. If i run the above HTML in a html file, it is rendered and displays as expected.

Below is the code snippet in the View

<div text-angular id="texteditor1" class="texteditorharmonize" ng-model="Comments"></div>

@Html.TextAreaFor(model => model.Comments, new { @id = "Comments1", @type = "hidden", @style = "display:none;", Value = "texted" })

The code in app.js file is as below

 $scope.Comments = $("#Comments1").val();

Also, the angular js seems to be auto generating the following code when checked in the DOM.

 <div class="popover fade bottom" style="max-width: none; width: 305px;"><div class="arrow"></div><div class="popover-content"></div></div>
 <div class="ta-resizer-handle-overlay"><div class="ta-resizer-handle-background"></div><div class="ta-resizer-handle-corner ta-resizer-handle-corner-tl"></div><div class="ta-resizer-handle-corner ta-resizer-handle-corner-tr"></div><div class="ta-resizer-handle-corner ta-resizer-handle-corner-bl"></div><div class="ta-resizer-handle-corner ta-resizer-handle-corner-br"></div><div class="ta-resizer-handle-info"></div></div>
 <div id="taTextElement7118600111813864" contenteditable="true" ta-bind="ta-bind" ng-model="html" class="ng-pristine ng-untouched ng-valid ta-bind">
 <p><br></p></div> <!--the <p class="MsoListParagraph" etc...should be present in place of <br> in this line-->

Answer 1

TextAngular attempts to strip MS Word HTML classes (ie MSNormal).

The relevant code is located at textAngular taBind.js starting at line 535.

I'm not aware of any way to turn this feature off, though.