Quill - simple

by pedro_g_s

HTML

<!-- Create the editor container -->
<div id="editor">
  <p>Edit this placeholder.</p>
  <p><br></p>
</div>

<canvas id="canvas"/>

<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/rasterizeHTML.allinone.js"></script>


<script>

  const renderEditor = () => {
  	  setTimeout(() => {
        const innerHtml = quill.root.innerHTML;
        const htmlToDraw = wrapHtmlIntoBody(innerHtml, 400, 200);
        console.log("===> HTML TO DRAW", htmlToDraw)
        canvas.getContext("2d").reset();
        rasterizeHTML.drawHTML(htmlToDraw, canvas, {zoom: window.devicePixelRatio});
  });
  };
  
  var quill = new Quill('#editor', {

  });
  quill.on("text-change", (delta, oldDelta, source) => {
  	renderEditor();
  });
  const canvas = document.getElementById("canvas");
  canvas.width = 400 * window.devicePixelRatio;
  canvas.height = 100 * window.devicePixelRatio;
  canvas.style.width = "400px";
  canvas.style.height = "100px";
  
  const wrapHtmlIntoBody = (html, width, height) => {
    return `
            <html>
            <head>
                <meta charset="UTF-8"/>
                <style>
                    * { 
                        margin: 0; 
                        padding: 0; 
                        box-sizing: border-box;
                        border-width: 0px;
                        -webkit-font-smoothing: auto;
                        word-break: break-word;
                        font-family: monospace;
                    }
                    #container {
                        width: ${width}px;
                        height: ${height}px;
                        font-size: 13px;
                    }
                    
                </style>
                </head>
            <body>
                <div id="container">
                ${html ?? ""}
                </div>
            </body>
            `;
};

	renderEditor();

</script>

CSS

canvas {
  background: red;
  margin-top: -20px;
}
.ql-editor {
  padding: 0 !important;
  font-family: monospace;
  font-size: 13px;
}
body {
  text-size-adjust: 100%;
}