Create an HTML page using JavaScript

angelali · 06-03-2012, 08:34 PM

Well, I am making a simple online text editor. The user will write their HTML codes in a text-area, after that, they will click on a button preview the HTML codes in a html page. My questions are:

1/ How to make JavaScript preview everything in the textarea, I mean the HTML codes in a new Window in an HTML page? Well, I know how open a page in new window, but I mean, how preview the HTML codes written in an HTML format?

For example, in the text area, I write: <b>This text is bold</b>, when I click on the preview button, it open a new windows showing me: This text is bold

2/ How to save also the preview page in .html format?

xelawho · 06-03-2012, 08:55 PM

a basic example to get you started:

Code:

<body>
<textarea id="input"></textarea>
<input type="button" id="thebutt" value="show preview"/>
<div id="preview"></div>

<script type="text/javascript">
if (window.addEventListener)
addEvent = function(ob, type, fn ) {
ob.addEventListener(type, fn, false );
};
else if (document.attachEvent)
addEvent = function(ob, type, fn ) {
var eProp = type + fn;
ob['e'+eProp] = fn;
ob[eProp] = function(){ob['e'+eProp]( window.event );};
ob.attachEvent( 'on'+type, ob[eProp]);
};



function preview(){
document.getElementById("preview").innerHTML=document.getElementById("input").value;
}

addEvent(document.getElementById('thebutt'),'click',preview);
            </script>
</body>

angelali · 06-03-2012, 09:16 PM

well notI am creating one for learning purpose.. I dont want to use any plugin... mine will be simple but good.. just like Notepad but will have buttons for quick stuffs like Bold, Italic etc...even image upload..

DrDOS · 06-04-2012, 12:32 AM

If you're going to have image upload you will need something server side like PHP, it's very easy to upload with PHP. No, I've actually written a little page editor that used javascript, but it only made one page with different images and different text. You couldn't change anything out the heading, the text and the images. And it was a pain to write because of all escaping of characters. So it you are going to use PHP anyway, it would be easier to use it for the editing too. It's hard to write a program that works in it's own language because of all the escaping needed.