Automatically HTML Editor for Websites and Blogs

HTML Editor tool is very important for us because it give us very easiness to play with HTML or CSS codes and it also very important for us because it makes enable us to save our time, and give the fastest result. Website and Blog owners also can embed it in their site and can easily get the more and more visitors get improve their rank. See our Offical HTML Editor which is made from collaboration of Mohamad.

Codes for HTML Editor

<!DOCTYPE html>

<html>

<head>

<title>HTML Editor by Face Blog</title>

<script type="text/javascript">

<body>

<a href="http://www.fblatest.in"><img style=" -moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px; border:5px solid #666666; float:left; padding:5px; box-shadow: 5px 5px 5px #CCCCCC; " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLZgoldNvRurpBwOden8AXVIlBxgiaVHzJHuKuoJu36HHuDoMsbCp_so74toheU6sRg6_XIIUrZ5pn5nvfF1SKTpxLIYPXRQuXX3NhnDBEgtNFE5qZBnCNzHVHLoN6IuhhL4Rkeo2cjbe5/s1600/FaceBlog%2527s+Header.png" width="941" height="150" alt="HTML Edtior" /></a>

</body>

var editboxHTML =

'<html class="expand close">' +

'<head>' +

'<style type="text/css">' +

'.expand { width: 100%; height: 100%; }' +

'.close { border: none; margin: 0px; padding: 0px; }' +

'html,body { overflow: hidden; }' +

'<\/style>' +

'<\/head>' +

'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +

'<form class="expand close" name="f">' +

'<textarea class="expand close" style="background: #def;" name="ta" wrap="hard" spellcheck="false">' +

'<\/textarea>' +

'<\/form>' +

'<\/body>' +

'<\/html>';

var defaultStuff = '<h3>Welcome To Face Blog HTML Editor!<\/h3>\n' +

'<p>Type HTML in the textarea above, and it will magically appear in the frame below.<\/p>';

// I don't want this stuff to appear in the box at the top because I feel it's likely to be distracting.

var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n Created by <a href="http://www.fblatest.in" target="_top">Face Blog<\/a> and Hosted on <a href="http://www.dropbox.com" target="_top">Drop Boxx<\/a>.\n<\/small><\/div>';

var old = '';



function init()

{

window.editbox.document.write(editboxHTML);

window.editbox.document.close();

window.editbox.document.f.ta.value = defaultStuff;

update();

}

function update()

{

var textarea = window.editbox.document.f.ta;

var d = dynamicframe.document;

if (old != textarea.value) {

    old = textarea.value;

    d.open();

    d.write(old);

    if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))

      d.write(extraStuff);

    d.close();

}

window.setTimeout(update, 150);

}

</script>

</head>

<frameset resizable="yes" rows="50%,*" onload="init();">



<frame name="editbox" src="javascript:'';">

<frame name="dynamicframe" src="javascript:'';">

</frameset>

</html>

Warning :- Don't Change Anything from codes otherwise output could be wrong.

How to Use these codes....????

Copy codes and paste in the notepad.
Save that notepad file with any name but remember after name write .html like HTML-Editor.html
Save it on desktop.
Go to Desktop a Internet file will show, open it and write your HTML OR CSS coding in blue background.
Your output will be comes automatically in white background area.

Thanks for Visit Here Like Us on Facebook.

If Any Problem, Ask in Comments Follow US on Twitter.