THEMETRIAL

Minimalist HTML Editor With Live Preview

Author:no-gravity
Views Total:0 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();


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.