learn programming and many more : Summernote Editor

Showing posts with label Summernote Editor. Show all posts

Tuesday, March 7, 2017

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.

Tuesday, February 28, 2017

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.

Monday, February 27, 2017

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: