HTML not rendered #1414
Description
I am trying to implement HTML editor based on AztecEditor, but each time I set HTML with setHTML(newValue) method, I have errors in my log and HTML not rendered:
Message: Unexpected end tag : html
Message: Tag aztec.htmltag.rootnode invalid
Message: Tag aztec.htmltag.rootnode invalid
To confirm it is not my issue, I tried the same with AztecExample project with changing only one line to load my html:
DemoRow(title: "Standard Demo", action: { self.showEditorDemo(filename: "myhtml") }),
In the result the same errors and content doesn't look correct:
The same HTML file opened in Safari browser:
HTML example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<meta name="Generator" content="Cocoa HTML Writer">
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 16.0px; font: 16.0px 'Times New Roman'; color: #000000; -webkit-text-stroke: #000000}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 16.0px; font: 24.0px 'Times New Roman'; color: #0000ff; -webkit-text-stroke: #0000ff}
p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 16.0px; font: 16.0px 'Times New Roman'; color: #ff0000; -webkit-text-stroke: #ff0000}
p.p4 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 16.0px; font: 24.0px 'Times New Roman'; color: #000000; -webkit-text-stroke: #000000}
p.p5 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 16.0px; font: 20.0px 'Times New Roman'; color: #000000; -webkit-text-stroke: #000000}
p.p6 {margin: 0.0px 0.0px 0.0px 36.0px; line-height: 16.0px; font: 16.0px 'Times New Roman'; color: #000000; -webkit-text-stroke: #000000}
p.p7 {margin: 0.0px 0.0px 0.0px 72.0px; line-height: 16.0px; font: 16.0px 'Times New Roman'; color: #000000; -webkit-text-stroke: #000000}
p.p8 {margin: 0.0px 0.0px 0.0px 108.0px; line-height: 16.0px; font: 16.0px 'Times New Roman'; color: #000000; -webkit-text-stroke: #000000}
span.s1 {font-family: 'Times New Roman'; font-weight: normal; font-style: normal; font-size: 16.00px; font-kerning: none}
span.s2 {font-family: 'Times New Roman'; font-weight: normal; font-style: normal; font-size: 24.00px; font-kerning: none}
span.s3 {font-family: 'TimesNewRomanPS-BoldItalicMT'; font-weight: bold; font-style: italic; font-size: 16.00px; font-kerning: none}
span.s4 {font-family: 'Times New Roman'; font-weight: normal; font-style: normal; font-size: 20.00px; font-kerning: none}
span.s5 {font-family: 'TimesNewRomanPS-BoldMT'; font-weight: bold; font-style: normal; font-size: 16.00px; font-kerning: none}
span.s6 {font-family: 'TimesNewRomanPS-BoldMT'; font-weight: bold; font-style: normal; font-size: 16.00px; text-decoration: underline ; font-kerning: none; color: #0000ee; -webkit-text-stroke: 0px #0000ee}
span.s7 {font-family: 'TimesNewRomanPS-ItalicMT'; font-weight: normal; font-style: italic; font-size: 16.00px; font-kerning: none}
</style>
</head>
<body>
<div class="dynamoDefaultStyleWrapper" style="white-space: normal;">
<style> body { overflow-wrap: break-word; line-height: 16px; color: #404040; font-size: 12px; font-weight: normal; font-family: "Open Sans", sans-serif; } .dynamoDefaultStyleWrapper p:not(.Normal) { margin-top: auto; margin-bottom: auto; margin-block-start: auto; margin-block-end: auto; } .dynamoDefaultStyleWrapper .MsoListParagraphCxSpFirst { margin-left: 25px; } .dynamoDefaultStyleWrapper .MsoListParagraphCxSpMiddle { margin-left: 25px; } .dynamoDefaultStyleWrapper .MsoListParagraphCxSpLast { margin-left: 25px; } .dynamoDefaultStyleWrapper .MsoNormal { margin-bottom: auto; padding-bottom: auto; } .dynamoDefaultStyleWrapper pre {white-space: pre-wrap; }</style>
<p class="p1"><span class="s1"><br>
</span>
</p>
<p class="p2"><span class="s2">A Blue Heading</span></p>
<p class="p3"><span class="s1">A red </span><span class="s3">paragraph</span><span class="s1">.</span></p>
<p class="p1"><span class="s1"><br>
</span>
</p>
<p class="p1"><span class="s1"><br>
</span>
</p>
<p class="p4"><span class="s2">The quick brown fox jumps over quick brown fox jumps over quick brown fox jumps over<br>
</span>
</p>
<p class="p5"><span class="s4">Architecture</span></p>
<p class="p6"><span class="s5">Aztec.TextView [ <a href="https://github.com/wordpress-mobile/AztecEditor-iOS/blob/develop/Aztec/Classes/TextKit/TextView.swift"><span class="s6">GitHub</span></a> ]</span></p>
<p class="p7"><span class="s1">Interacts with HTML using the new </span><span class="s7">setHTML() </span><span class="s1">and </span><span class="s7">getHTML()</span><span class="s1"> methods.</span></p>
<p class="p7"><span class="s1">Allows the client App to set the HTML contents, and not have to worry about the parsing.</span></p>
<p class="p7"><span class="s1">Inherits from </span><span class="s7">UITextView</span><span class="s1"> so:</span></p>
<p class="p8"><span class="s1">It supports RTL text orientation, unicode (and emojis!), dictation.</span></p>
<p class="p8"><span class="s1">Editing can be switched ON and OFF</span></p>
<p class="p8"><span class="s1">Can be placed anywhere in your app.</span></p>
<p class="p6"><span class="s5">Aztec.FormatBar [ <a href="https://github.com/wordpress-mobile/AztecEditor-iOS/blob/develop/Aztec/Classes/GUI/FormatBar/FormatBar.swift"><span class="s6">GitHub</span></a> ]</span></p>
<p class="p7"><span class="s1">Native UI component inheriting from </span><span class="s7">UIView</span></p>
<p class="p7"><span class="s1">Aesthetically customizable through </span><span class="s7">Aztec.FormatBarItem</span></p>
<p class="p7"><span class="s1">Logically customizable through </span><span class="s7">Aztec.FormatBarDelegate</span></p>
<p class="p6"><span class="s5">Aztec.TextViewAttachmentImageProvider [ <a href="https://github.com/wordpress-mobile/AztecEditor-iOS/blob/develop/Aztec/Classes/TextKit/TextView.swift"><span class="s6">GitHub</span></a> ]</span></p>
<p class="p7"><span class="s1">Allows rendering custom </span><span class="s7">NSTextAttachment</span><span class="s1"> subclasses.</span></p>
<p class="p7"><span class="s1">Used in the example App for custom HTML-comment rendering.</span></p>
<p class="p6"><span class="s5">Aztec.TextViewMediaDelegate [ <a href="https://github.com/wordpress-mobile/AztecEditor-iOS/blob/develop/Aztec/Classes/TextKit/TextView.swift"><span class="s6">GitHub</span></a> ]</span></p>
<p class="p7"><span class="s1">Aztec relies on your App’s own networking stack.</span></p>
<p class="p7"><span class="s1">Does not have network library dependencies of its own.</span></p>
<p class="p5"><span class="s4">Technologies</span></p>
<p class="p6"><span class="s1">Written entirely in Swift 3.</span></p>
<p class="p6"><span class="s1">Currently targeted at iOS 9+ but will most likely be 10+ when fully shipped.</span></p>
<p class="p6"><span class="s1">Available through both CocoaPods and Carthage.</span></p>
<p class="p6"><span class="s1">Currently includes 326 unit tests and 16 UI tests.</span></p>
<p class="p5"><span class="s4">Third-Party Dependencies</span></p>
<p class="p4"><span class="s2"><br>
</span>
</p>
<p class="p4"><span class="s2"><br>
</span>
</p>
<p class="p4"><span class="s2"><br>
</span>
</p>
<p class="p4"><span class="s2">Ghgfhg</span></p>
<p class="p4"><span class="s2"><br>
</span>
</p>
<p class="p4"><span class="s2">Dfgdfg</span></p>
<p class="p4"><span class="s2"><br>
</span>
</p>
<p class="p4"><span class="s2"><br>
</span>
</p>
</div>
</body>
</html>