JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.0.6/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.0.6/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/3.0.6/js/froala_editor.pkgd.min.js"></script>

<div id="froala-editor"></div>

<script>
let editor = new FroalaEditor('div#froala-editor', {}, function() {
  // This data could be loaded from a potentially untrusted source, e.g. from an API via an XMLHttpRequest
    data = "<object data='data:text/html,<svg onload=console.log(document.domain)>'>";

 // Inserting untrusted data into the editor
  editor.html.set(data);

  // Show how the untrusted data is embedded into the DOM
  console.log(editor.html.get());
})
</script>