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.

Était-ce utile?

La 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>

Autres conseils

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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top