How to validate Summernote using javascript/jquery and reset the value

In this article I am going to show you how to validate and reset Summernote (To know more about summernote click on link). 

So, for this firstly we get the value of editor and store in a variable just like (Editor is id of summernote) :

   1:  var code = $('#Editor').summernote('code');

After this we replace symbols like <, >, /  with space ' ', because of the default value of summernote is '<p> <br/> &lt/;p>'
 Final code is :

   1:   var code = $('#Editor').summernote('code');

   2:          var filteredContent = (code).replace(/\s+/g, '');

   3:   

   4:          if (filteredContent.length == 0) {

   5:              $('.note-editable').css({ 'border': 'solid 1px red' }).focus();

   6:              //  if summernote is empty          

   7:              isValid = false;

   8:          }

   9:   

Now, for reset the summernote value :

   1:   $('#Editor').summernote('code', '');

I hope ,it will help you.

How to fix header of table or gridview or datatable without using any plugin and without scroll in table

In this article I am going to tell how fix make table header freeze using javascript and CSS.

You can see live demo below

Name	Phone	Address
table1 data1	table1 data1	table1 data1
table1 data2	table1 data2	table1 data1
table1 data3	table1 data3	table1 data1
table1 data4	table1 data4	table1 data1
table1 data5	table1 data5	table1 data1
table1 data6	table1 data6	table1 data1
table1 data7	table1 data7	table1 data1
table1 data8	table1 data8	table1 data1
table1 data9	table1 data9	table1 data1
table1 data10	table1 data10	table1 data1

You can see above table header is freezed while we scroll down to the page. For this you have to set the header class 'floatingHeader' and gridview class 'persist-area"' of gridview/datagrid or any other table like :

   1:   <asp:GridView runat="server" HeaderStyle-CssClass="persist-header" CssClass="persist-area" ID="grdView">

   2:          <Columns>

   3:              <asp:TemplateField>

   4:                  <ItemTemplate></ItemTemplate>

   5:              </asp:TemplateField>

   6:              <asp:TemplateField>

   7:                  <ItemTemplate></ItemTemplate>

   8:              </asp:TemplateField>

   9:          </Columns>

  10:      </asp:GridView>

Then define floatHeader style like :

   1:   .floatingHeader {

   2:        position: fixed;

   3:        top: 0;

   4:        visibility: hidden;

   5:      }

Finally wirte javasctip code as below: In the below javascript code we are creating a clone of table header and show/hide on the event of scroll.

   1:  <script>

   2:   function UpdateTableHeaders() {

   3:         $(".persist-area").each(function() {

   4:   

   5:             var el             = $(this),

   6:                 offset         = el.offset(),

   7:                 scrollTop      = $(window).scrollTop(),

   8:                 floatingHeader = $(".floatingHeader", this)

   9:   

  10:             if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {

  11:                 floatingHeader.css({

  12:                  "visibility": "visible"

  13:                 });

  14:             } else {

  15:                 floatingHeader.css({

  16:                  "visibility": "hidden"

  17:                 });

  18:             };

  19:         });

  20:      }

  21:   

  22:      // DOM Ready

  23:      $(function() {

  24:   

  25:         var clonedHeaderRow;

  26:   

  27:         $(".persist-area").each(function() {

  28:             clonedHeaderRow = $(".persist-header", this);

  29:             clonedHeaderRow

  30:               .before(clonedHeaderRow.clone())

  31:               .css("width", clonedHeaderRow.width())

  32:               .addClass("floatingHeader");

  33:   

  34:         });

  35:   

  36:         $(window)

  37:          .scroll(UpdateTableHeaders)

  38:          .trigger("scroll");

  39:   

  40:      });

  41:  </script>

That's it finally you will get a table with freeze header:-).

Summernote not working or Icon not fully renderedd or css not working (Missing Editor Icons)

In my last article I have shown you how to use summernote using CDN. But when you download and use JS and css file to your local project folder then icon not display in editor something like :

This is because of the summernote css file is using font from CDN url  and not able to find path of that.So, to use summernote please make sure you are added all folder content to your project. you can download link from below :

http://summernote.org/getting-started/

OR

https://github.com/summernote/summernote/releases/download/v0.8.2/summernote-0.8.2-dist.zip

It would help you.

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.

<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 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"></link> <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet"></link> <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>

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:

<httpruntime requestValidationMode="2.0" />