How to take user-entered html string and render on page

StackOverflow https://stackoverflow.com/questions/19161758

  •  30-06-2022
  •  | 
  •  

Question

I'm trying to build an HTML tester that allows a user to check how his/her page content will be rendered later. All they have to do is enter text with html formatting - they do not need to build an entire web page. Here's where I'm up to... I've simplified this so it's just the bare essentials of my entire page:

<html>
<head>
    <style type="text/css">
    .mockup {
    position:absolute;
    left:1px;
    top:350px;
    width:530px;
    height:272px;
    z-index:250;
    overflow:hidden;
    background-color:#b2d0e3;
    font-family:"Times New Roman";
    font-size:16px;
    }
    </style>

    <SCRIPT language="VBScript">
    Sub sumChar
        'removed code
    End Sub

    Sub sendData() 
        Document.body.myDiv.InnerHTML = editableText.Value
    End Sub 
    </script>
</head>
<body>
    <p align="left"><font face="arial" size="2">Edit text here:</font></p>

    <textarea name="editableText" rows="11" cols="74" onchange="sumChar" onkeydown="sumChar" onkeyup="sumChar" onpaste="sumChar" oninput="vbscript:sumChar" tabIndex=4 language="VBscript"><b>Here</b> is some sample text with tags.<br />This needs to be rendered with formatting.</textarea>

    <p align="left"><input name="Button1" type="button" value="Send Data" style="height: 40px; width: 263px; font-size: larger" tabIndex=5 OnClick="vbscript:sendData" language="VBscript"></p>

    <div id="myDiv" class="mockup">
    </div>
</body>

You can see I am trying to pass the html so that it renders in the div at the bottom of the page. Is it possible? It doesn't work as it is, clearly I am going wrong. Does anyone have any advice... and feel free to tell me I should be doing this in javascript (in order to remove the Internet Explorer restriction). Although unfortunately I am even more of a novice with javascript. Thank you to anyone who can help.

Was it helpful?

Solution

You could also use jQuery to simplify things (javascript library). Just include the jQuery library in the of your document and add the following code to the bottom

<script>
    $('#textareaId').keyup(function(){
        $('#myDiv').empty().html($(this).val());
    });
</script>

OTHER TIPS

Horay, got it, thank you for your code, Bob. I'll slowly figure out the extra twiddly bits now. Here's the finished page in distilled form:

<html>
<head>
    <style type="text/css">
    .mockup {
    position:absolute;
    left:1px;
    top:250px;
    width:530px;
    height:272px;
    z-index:250;
    overflow:hidden;
    background-color:#b2d0e3;
    font-family:"Times New Roman";
    font-size:16px;
    }
    </style>
</head>

<body>
    <textarea id="textareaId" rows="11" cols="74"><b>Here</b> is some sample text with tags.<br />This needs to be rendered with formatting.</textarea>
    <div id="myDiv" class="mockup">
    </div>
</body>

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $('#textareaId').keyup(function(){
        $('#myDiv').empty().html($(this).val());
    });
</script>

</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top