Minimalist HTML Editor With Live Preview

Category: Image | January 14, 2021
Author: no-gravity
Views Total: 77 views
Official Page: Go to website
Last Update: January 14, 2021
License: MIT

Preview:

Minimalist HTML Editor With Live Preview

Description:

A minimalist HTML/CSS editor with live preview, built with textarea, iframe, and vanilla JavaScript.

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();

You Might Be Interested In:


Leave a Reply