Create HTML Text Area contents with preview Button using jQuery

lis12cfa

SOLVED CLOSED ACTIVE ANSWERED
User: lis12cfa
Posted: on Mar 31, 2023 10:44 PM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2167
Sample Code: Download

I would like to create just a plain text area that accepts HTML contents and then add preview button.

When Preview button is pressed, it displays the contents from edit box into DIV so they can see the style they have created.

What are the steps in ASP.NET (C#) with coding, JavaScript (jQuery), HTML, etc. for doing email template plain text area html contents and after done to preview it.

I have a name & input, subject & input and I will need plain text area that accepts html contents, and pressing preview button to display the content into DIV so the clients can see the style they have created in preview window

Template

Name: input (Name Company)

Subject: Input (any)

Here should be:

Plain Text Area (accepts HTML contents)

Example:

<div style=”color: blue;”> Hello </div>
<br>
<div class="col-12 container body" id="windowVO" style="width: 100vw; margin: 0!important;">
<div class="main_container">
    <div id="confirmCustomOverlay" hidden="">
        <div id="confirmCustom">
            <span id="confirmCustomMessage"></span>
        </div>
    </div>
</div>

Preview button

After click Preview button below display Preview html contents displays from edit box (plain text area) to view it.

Your help is much appreciated. Thanks.

Download FREE API for Word, Excel and PDF in ASP.Net

AjayV

0 5

Reply
ANSWER
User: AjayV
Replied: on Apr 05, 2023 01:14 AM
Modified: on Apr 05, 2023 01:16 AM
Report

Hi lis12cfa,

Please refer below sample for Writing code inside the text area and setting default code content inside the textarea.

HTML

<html>
<head runat="server">
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnPreview").click(function () {
                var code = $("#txtArea").val();
                $("#dvPreview").html(code);
                return false;
            });
        });
    </script>
</head>
<body>
    <textarea id="txtArea" style="height:200px;width:300px">
        <span style='color:red'>
            Sample code.
        </span>
    </textarea> 
    <br /> 
    <button id="btnPreview">Preview</button> 
     <div id="dvPreview"></div> 
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Create HTML Text Area contents with preview Button using jQuery

Company

Explore

Follow us

Contact Us