How can I get content of a contenteditable div with jQuery?

Question

<!doctype html>
<html>
    <head>
        <title>My test</title>
        <link rel="stylesheet"  type="text/css" href="editor/style.css">           
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>           
    </head>
   <body>
        <div contenteditable="true" class="doc">
            <p contenteditable="true" class="letters" >My editor</p>
        </div>
        <button id="but">Done Editing</button> 

        <script>
            $(document).ready(function() 
            {
                $('#but').on('click',function(){
                    //want to obtain all the text within the contenteditable div on clicking the button
                });
            });
        </script>
    </body>
</html>

On clicking the "Done Editing" button I want to get all the text which is entered in my contenteditable div. Apparently,commands such as

var content = $('.doc').text();

Possible duplicate of [Get html content of a selector ( .html() ) with jquery from a javascript variable that contains HTML](http://stackoverflow.com/questions/21622412/get-html-content-of-a-selector-html-with-jquery-from-a-javascript-variabl) — Sagar V, Mar 27 '17 at 14:30

score 1 · Answer 1 · edited May 23 '17 at 11:55

Your div does not have id="my-contenteditable-div", that is why it does not work.

You can access it this way using jQuery:

$(document).ready(function() {
  $('#but').on('click', function() {
    console.log($('#myDiv').html());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myDiv" contenteditable="true">DIV CONTENT</div>
<button id="but">Done Editing</button>

Other alternatives here

score 1 · Accepted Answer · edited Sep 26 '17 at 04:00

You should use a valid selector. As the div has a class, use the class selector $('.doc')

To know more about selectors, refer to the api docs

<!doctype html>
<html>

<head>
  <title>My test</title>
  <link rel="stylesheet" type="text/css" href="editor/style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

<body style="overflow: hidden; margin-top: 50px">
  <div contenteditable="true" class="doc">
    <p contenteditable="true" class="letters">My editor</p>
  </div>
  <button id="but">Done Editing</button>

  <script>
    $(document).ready(function() {
      $('#but').on('click', function() {
        console.log($('.doc').text());
      });
    });
  </script>
</body>

</html>

score 1 · Answer 3 · answered Mar 27 '17 at 14:08

1

Use the appropriate selector .letters

$(document).ready(function() {
      $('#but').on('click', function() {
          var content = $('.letters').html();
            console.log(content);
            // do the process here
          });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <title>My test</title>
  <link rel="stylesheet" type="text/css" href="editor/style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</head>

<body style="overflow: hidden; margin-top: 50px">
  <div contenteditable="true" class="doc">
    <p contenteditable="true" class="letters">My editor</p>
  </div>
  <button id="but">Done Editing</button>
</body>

</html>

answered Mar 27 '17 at 14:08

Sagar V

12,158
7
41
68

`$('p.letters').html()` or `$('.letters').html()` or both are fine to use? I think that `$('p.letters').html()` is more specific. – NightKn8 Mar 27 '17 at 14:16
BY using this text if I want to extract the text between anchor tags,anything between these? – Kaustubh Mar 27 '17 at 14:20
yes @Kaustubh you can the `text` will return the `textContent` whereas the `html` will return the `innerHTML`. FYI, `text()` on an HTML node will give many unwanted space, which you want to trim then. – Sagar V Mar 27 '17 at 14:22

How can I get content of a contenteditable div with jQuery?

3 Answers3