Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    310
    Thanks
    23
    Thanked 0 Times in 0 Posts

    Create an HTML page using JavaScript

    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?

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,773
    Thanks
    55
    Thanked 518 Times in 515 Posts
    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>
    Last edited by xelawho; 06-03-2012 at 09:05 PM.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    310
    Thanks
    23
    Thanked 0 Times in 0 Posts
    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..

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •