CODEWITHSUNDEEP
javascriptphpjquery
Steven K7FAQ
Steven K7FAQ

Reputation: 978

How to retrieve contents of Summernote?

I am looking for a smaller Javascript "editor" to use on my web projects. I found https://github.com/summernote/summernote/ and it looks nice and seems to hold some promise.

I tried using it by creating the following code:

<!DOCTYPE>
<html lang="en">

<head>
    <!-- include libraries(jQuery, bootstrap) -->
    <script type="text/javascript"     src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- include summernote css/js-->
    <link href="assets/plugins/summernote-master/summernote.css" rel="stylesheet">
    <script src="assets/plugins/summernote-master/summernote.js"></script>
</head>
<body>
<div id="summernote">Hello Summernote</div>
<button onclick="getCode();return false;">Get the code!</button>
<script>
    function getCode()
    {
        var html = $("#summernote").summernote("code");
        console.log(html);
    }

    $(document).ready(function() {
        $("#summernote").summernote();
    });
</script>
</body>
</html>

According to the documentation all you need to use is the .summernote("code") to gather the contents of the text editor window. However my Console.log results:

Object { length: 1, context: HTMLDocument → info.php, selector: "#summernote", 1 more… }  info.php:21:9

Does anyone have experience with this editor that could help me understand what I need to do differently? My goal is to gather the contents of the window as created by the user in a manner that I can POST to my application.

Thank you for your thoughts!

Upvotes: 1

Views: 6561

Answers (1)

Vamshi
Vamshi

Reputation: 349

Change your HTML to the below. 

<div class="summernote" id="summernote">Hello Summernote</div>

Get the code!

and script to

<script>   

$(document).ready(function() {
    $(".summernote").summernote();
});

function getCode()
{
    var html = $("#summernote").summernote("code");
    console.log(html);
}
</script>

Upvotes: 3

Related Questions