Minimalist HTML Editor With Live Preview

Authorno-gravity

Last UpdateJanuary 14, 2021

LicenseMIT

How to use it:

1. Create a textarea element for the HTML editor.

<textarea id=data>
<!doctype html>
<html>
 <body>
  ... 
 </body>
</html>
</textarea>

2. Create an iframe element for the preview.

<iframe name="output"></iframe>

3. The core function to enable the HTML editor.

let outty = window.output.document;
outty.open();
let inny=document.getElementById("data");
outty.write(inny.value);
outty.close();

4. Enable the fullscreen mode.

if (newWin) outWin= window.open()
else        outWin= window.open("about:blank","html_editor");
outWin.focus();
let outty = outWin.document;
outty.open();
let inny=document.getElementById("data");
outty.write(inny.value);
outty.close();

Minimalist HTML Editor With Live Preview

How to use it:

See Also:

You Might Be Interested In:

Leave a ReplyCancel reply