JSFiddle - React, Tailwind, and code Playground

by jonahe

HTML

<head>
    <meta charset="UTF-8" />
    <!-- Include Quill stylesheet -->
    <link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet" />
  </head>
  <body>
    <!-- Create the editor container -->
    <div id="quill_editor_container_1"></div>
    <button onClick="window.handleQuillSave()">Save</button>

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

    <!-- Initialize Quill editor -->
    <script>
      // insert data from FileMaker
      window.FileMakerData = "";
      // end of FileMaker data insert

      window.handleQuillSave = function() {
        const newHtmlContent = document.querySelector(".ql-editor").innerHTML;
        window.FileMakerData = newHtmlContent;
        populateQuillWithPreviousData();

        const FILEMAKER_BASE_URL = "fmp://$/Funkis CMT?script=GrabDashboardData&param=";
        var newURL = FILEMAKER_BASE_URL + JSON.stringify(newHtmlContent); // TODO. May need equivalent JSON.parse() when FileMaker gets the value.

        window.location = newURL;
      };

      window.quill = new Quill("#quill_editor_container_1", {
        modules: {
          toolbar: [
            [{ header: [1, 2, 3, 4, false] }],
            ["bold", "italic", "underline"],
            ["image", "code-block"],
            [{ list: "ordered" }, { list: "bullet" }],
          ],
        },
        placeholder: "Nothing here yet..",
        theme: "snow", // or 'bubble'
      });

      function populateQuillWithPreviousData() {
        window.quill.pasteHTML(FileMakerData);
      }
      populateQuillWithPreviousData();


      function createAndPopulateQuill()
    </script>
  </body>