I want to access the text written in summer-note editor to save it into the database.

I am using summer note for my blog site, but I am not able to access the data of the div with class name note-editable..

This is the code of the div I'd like to access:

<div class="note-editable" contenteditable="true" style="height: 510px;">
    hi...Write an amazing Post....
</div>

anyone knows how to achieve it ..thanks in advance....

I want to access the text written in summer-note editor to save it into the database.

I am using summer note for my blog site, but I am not able to access the data of the div with class name note-editable..

This is the code of the div I'd like to access:

<div class="note-editable" contenteditable="true" style="height: 510px;">
    hi...Write an amazing Post....
</div>

anyone knows how to achieve it ..thanks in advance....

• javascript
• html

Share Improve this question Follow edited Jul 13, 2015 at 9:00 cнŝdk 32.2k77 gold badges6060 silver badges8080 bronze badges asked Jul 13, 2015 at 8:26 Venkatesh AchintalwarVenkatesh Achintalwar 1311 silver badge44 bronze badges 2

• 2 This is very simple thing, but have you tried ? write some code here and we will give you answer – Bharat Ranpariya Commented Jul 13, 2015 at 8:30
• Yes I tried by giving the id to div and then ...accessing it with ajax ...but that didn't work... – Venkatesh Achintalwar Commented Jul 13, 2015 at 8:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Just see what the developers have set in place for this task: (from summernote):

get & set Code

Get the HTML contents of the first summernote in the set of matched elements.

var sHTML = $('.summernote').code();

Get the HTML content of the second summernote with jQuery eq.

var sHTML = $('.summernote').eq(1).code();

A string of HTML to set as the content of each matched element.

$('.summernote').code(sHTML);

for more detail api: deep dive with api

What is wrong with this code? What you can obtain?

Just grab the element and then the text inside of it.

Like this:

var content = document.getElementsByClassName('note-editable')[0];

console.log(content.innerHTML)

<div class="note-editable" contenteditable="true" style="height: 510px;">hi...Write an amazing Post....</div>

You can simply use innerText or .textContent properties to get the text inside your div:

var text = document.getElementsByClassName('note-editable')[0].innerText;

alert(text);

<div class="note-editable" contenteditable="true" style="height: 510px;">Hi...Write an amazing Post....</div>

Note:

Avoid using innerHTML because it will return the sub-elements HTML code also and referring to the innerHTML documentation:

If a <div>, <span>, or <noembed> node has a child text node that includes the characters (&), (<), or (>), innerHTML returns these characters as &amp, &lt and &gt respectively. Use Node.textContent to get a correct copy of these text nodes' contents.