javascript - Froala v2 editor mangles my code upon retrieval -
i'm using froala editor v2 , i'm running frustrating , intermittent problem. i'm embedding custom html widget (a rich preview when user enters url on own line). when retrieve final html saved our database, seems froala decides "clean up" html before giving me. when inspect editor instance while i'm editing content, markup in shape. when call $('.froala-editor').froalaeditor('html.get') retrieve html, html url preview widget mangled.
my suspicion that, since entire preview wrapped in <a> tag make whole thing linked (and don't have nested <a> tags in because that's bad html), froala taking other structural elements divs, h# tags, p tags, etc , placing copies of wrapping <a> tag inside of them (as you'll see in code samples) because doesn't think you're allowed have <a> wrapping stuff. that's guess.
and top off, froala give me html intact , other times won't.
i don't think makes difference, i'm using react generate widget , injecting resulting html editor. i've removed data-reactid attributes reduce clutter.
original injected html (the outermost <p> tags there because froala seems wrap in semantic block level tags):
<p> <a href="http://www.google.com" target="_blank" class="embedly-preview" title="http://www.google.com" data-source-url="http://www.google.com"> <span class="ui media content-item-wrapper content-summary post-body"> <span class="media-left content-summary-image post-image"> <img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3a%2f%2fwww.google.com%2fimages%2fbranding%2fgooglelogo%2f1x%2fgooglelogo_white_background_color_272x92dp.png"> </span> <span class="media-body content-summary-body"> <h2 class="content-summary-title content-title post-title">google</h2> <p class="content-summary-content post-content">search world's information, including webpages, images, videos , more. google has many special features find you're looking for.</p> <p class="content-summary-link">http://www.google.com</p> </span> </span> </a> </p> what froala gives me:
<p> <a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com"> <span class="ui media content-item-wrapper content-summary post-body"> <span class="media-left content-summary-image post-image"> <img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3a%2f%2fwww.google.com…randing%2fgooglelogo%2f1x%2fgooglelogo_white_background_color_272x92dp.png"> </span> <span class="media-body content-summary-body"></span> </span> </a> </p> <h2 class="content-summary-title content-title post-title"> <a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">google</a> </h2> <p class="content-summary-content post-content"> <a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">search world's information, including webpages, images, videos , more. google has many special features find you're looking for.</a> </p> <p class="content-summary-link"> <a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">http://www.google.com</a> </p>
the problem not editor, html structure have. have used h2 tag inside p tag browsers not allow (see https://stackoverflow.com/a/8696078/1806855 more details) check in basic jsfiddle: https://jsfiddle.net/0jlzm2b0/.
instead should work fine if you'd use div tag instead: https://jsfiddle.net/0jlzm2b0/1/. can see output no longer changed.
Comments
Post a Comment