learn programming and many more : How to use HTML Editor (Summernote) in asp.net c#

In this article I am going to tell how to use HTMl editor in simple and easy way using Summernote super easy editor.

So, for this we need five plug-ins, I am giving CDN link below you can download from it.

After this,

First create a new project or website in Visual studio.

And add following code:

<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head runat="server">
    <title></title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
    <script type="text/javascript">
        $(function () {
            // Set up your summernote instance
            $("#<%= txtSummernote.ClientID %>").summernote();
          
            // When the summernote instance loses focus, update the content of your <textarea>
            $("#<%= txtSummernote.ClientID %>").on('summernote.blur', function () {
                $('#<%= txtSummernote.ClientID %>').html($('#<%= txtSummernote.ClientID %>').summernote('code'));
                });
        });

</script>
</head>
<body>
    <form id="form1" runat="server">
<div id="summernote">
Copy some text, click here, control+A, delete content, write 'hello', press enter, control+v</div>
        <div>
            <asp:TextBox ID="txtSummernote" runat="server" TextMode="MultiLine" Rows="2"></asp:TextBox>
            <asp:Button runat="server" Text="save" ID="save1" OnClick="save1_Click" />
        </div>
</form>
</body>
</html>

This will give the output some like :

Most important line to add in your page directive is :

ValidateRequest="false"

So, when you run this code and click on the save button you might be getting this error something like:

To remove this error Add this in you web.config inside system.web tag:

Monday, February 27, 2017

How to use HTML Editor (Summernote) in asp.net c#

No comments:

Post a Comment