How To fetch the value of a DIV

I have integrated froala editor on my HTML page. I need to fetch the data I have written inside the div with its HTML properties.

Below is my code:

html

<button>
  click
</button>

<div id="froala-editor-br">
  The editor can use <code>BR</code> tags. When ENTER key is hit, a <code>BR</code> tag is inserted.
</div>

js code

$('div#froala-editor-br').froalaEditor({
  enter: $.FroalaEditor.ENTER_BR
});


    $("button").click(function(){
        var chk = $('#froala-editor-br').html();
alert(chk);
    });

And here is the working jsfiddle

If you press the click button, it is fetching the froala code, not the code I am entering.

The froala editor adds its own divs dynamically and wraps many elements. If you want only the text inside the resulting editor, you need to change your selector.

So, your selector should be $('#froala-editor-br .fr-view') instead.

As in:

$("button").click(function() {
  var chk = $('#froala-editor-br .fr-view').text();
  alert(chk);
});

As mentioned in the comments, @Smit Raval's answer uses the API for the froala editor and it seems like a better option to use that instead.