JSFiddle - React, Tailwind, and code Playground

by shamalj

HTML

<!-- Froala CSS -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css" rel="stylesheet">

<div style="max-width: 800px; margin: 20px auto; font-family: Arial;">
  <h3>Prototype: Event Handling & Autosave</h3>

  <textarea id="editor">
    <p>Start typing to trigger events...</p>
  </textarea>

  <p id="status" style="margin-top:10px; color: green;"></p>

  <h4>Event Log:</h4>
  <div id="log" style="background:#111; color:#0f0; padding:10px; height:150px; overflow:auto; font-size:12px;"></div>
</div>

<!-- Froala JS -->
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js"></script>

<script>
  const log = (msg) => {
    const logBox = document.getElementById('log');
    logBox.innerHTML += msg + "<br>";
    logBox.scrollTop = logBox.scrollHeight;
  };

  new FroalaEditor('#editor', {
    height: 250,
    events: {
      'focus': function () {
        log("Editor focused");
      },
      'blur': function () {
        log("Editor blurred");
      },
      'contentChanged': function () {
        const content = this.html.get();

        // Simulate autosave
        document.getElementById('status').innerText = "Saving...";

        log("Content changed → Triggering save");

        setTimeout(() => {
          document.getElementById('status').innerText = "All changes saved";
          log("Saved to mock DB: " + content.substring(0, 50) + "...");
        }, 800);
      }
    }
  });
</script>