How to Insert an Editable HTML Code Box

Discussion in 'HTML & Website Design' started by Zirkon Kalti, Jan 14, 2010.

0
  1. #1
    Hi,
    I want to know how to insert an editable HTML code box with a preview button. For example, the visitor can edit the code the box and then preview it on the website.
     
    Zirkon Kalti, Jan 14, 2010 IP
  2. harrierdh

    harrierdh Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This what you mean? Or did you want to go to another page or have a popup window?

    
<head>
<script>
    function populateBox() {
	    document.getElementById("details").innerHTML = document.getElementById("mytextbox").value;
	}
</script>	
</head>
<body>
<div id="details">&nbsp;</div><br />
<textarea id="mytextbox" rows="10" cols="80"></textarea><br />
<input type="button" id="button" value="Preview" onClick="populateBox()" />
</body>
    Code (markup):
     
    harrierdh, Jan 14, 2010 IP
  3. Zirkon Kalti

    Zirkon Kalti Well-Known Member

    Messages:
    1,132
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    150
    #3
    The above code previews on the page. I want it to be able to preview in a small popup window and have a preview button, print button and copy button. I want the button to have color.
     
    Last edited: Jan 15, 2010
    Zirkon Kalti, Jan 15, 2010 IP
  4. harrierdh

    harrierdh Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Copying to a clipboard is easy in IE. However in FF it takes a hack with a swf object. You google it, but the information is difficult to understand. You could try posting a new thread about this. Post it in the Programming/Javscript forum.

    
<head>

<style>
#button { background-color: yellow; }
</style>
<script>
function preview() {
   var myvar = '<style>#printButton { background-color: yellow; } #closeButton { background-color: yellow; }</style>'
   myvar += '<br /><p>' + document.getElementById("mytextbox").value + '</p>';
   myvar += '<br /><input type="button" value="Print" id="printButton" onClick="window.print()" />';
   myvar += ' <input type="button" value="Close" id="closeButton" onClick="window.close()" />';
   my_window= window.open ("","mywindow1","status=1,width=450,height=350");
   my_window.document.write(myvar); 
}
</script>
</head>
<body>
<textarea rows="20" cols="80" id="mytextbox"></textarea><br />
<input type="button" id="button" value="Preview" onClick="preview()" />
</body>
    Code (markup):
     
    harrierdh, Jan 15, 2010 IP