JSFiddle - React, Tailwind, and code Playground

by rgullhaug

HTML

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

CSS

#editor {
  height: 375px;
}

JavaScript

var quill = new Quill('#editor', {
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow'  // or 'bubble'
});

var data = JSON.parse('{ "content":[ { "type":"template", "uuid":"0644A840-65F5-11EB-8EED-FF2797159319", "attributes":{ "templateId":"477FA620-342F-11E9-9B6A-59A618C895DB", "fitToPage":0.5 }, "content":[ { "type":"row", "uuid":"0644C950-65F5-11EB-86B1-AB89C8159C89", "internalUuid":"AF56DC20-9F4F-11EA-96F2-07FAB86477C3", "attributes":{ "paddingBottom":"0" }, "content":[ { "type":"column", "uuid":"0644CA10-65F5-11EB-B274-37AEE4E99F1A", "internalUuid":"AF56E760-9F4F-11EA-9FDA-E75A3BC3685B", "attributes":{ "columnClass":"col-xs-5" }, "content":[ { "type":"row", "uuid":"0644CA60-65F5-11EB-B1FB-C9B56765F8EB", "internalUuid":"AF56F250-9F4F-11EA-A407-DFFE9F6F477C", "content":[ { "type":"column", "uuid":"0644CAA0-65F5-11EB-A6DF-5988A1258B47", "internalUuid":"AF56FBB0-9F4F-11EA-B262-114B03B709B7", "attributes":{ "columnClass":"col-xs-12" }, "content":[ { "type":"mediaOrModel", "uuid":"0644CAE0-65F5-11EB-977C-AF695BD64889", "internalUuid":"AF570680-9F4F-11EA-BA7B-3B0141E087C0", "attributes":{ "height":"329px", "embedded":{ "type":"model", "value":"7FA9FA70-54CF-49C7-A1BA-F346E7FC4F13" } }, "content":[ ] } ] } ] }, { "type":"row", "uuid":"0644CB30-65F5-11EB-A27B-35B912830304", "internalUuid":"AF5715C0-9F4F-11EA-83E9-C11AB459CD03", "content":[ { "type":"column", "uuid":"0644CB70-65F5-11EB-921B-BD74AF869451", "internalUuid":"AF571F20-9F4F-11EA-9149-056D1216E4DC", "attributes":{ "columnClass":"col-xs-12" }, "content":[ { "type":"mediaOrModel", "uuid":"0644CBB0-65F5-11EB-88B3-ABFBE7BF95C0", "internalUuid":"AF5729C0-9F4F-11EA-A750-EF97B5303C9F", "attributes":{ "height":"329px", "embedded":{ "type":"image", "value":"CEFA9BF4-6BC3-40D1-8AC4-609CA309E345" } }, "content":[ ] } ] } ] } ] }, { "type":"column",...