title: Pulling edited text from summernote textarea
body: <p>I have a list of canned emails in a database. "Thanks for becoming a member", "Thank you for your purchase its on the way" - stuff like that. I am using Bootstrap modals to edit these emails. When I click the edit button, the modal drops down, and is populated with the data from the database: email name, subject, body. I am using <a href="https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal">Passing data to a bootstrap modal</a> to accomplish this. Works great. Now I am using summernote as my rich text editor.</p>
  
  <p>Here is my textarea that displays the unedited data:</p>
  
  <pre><code>&lt;textarea class="summernote input-block-level" id="content" name="content" rows="18"&gt;&lt;/textarea&gt;
  </code></pre>
  
  <p>The class summernote is how the data gets directed to the output text area so it can be edited. Once the data has been edited, I click submit, and the data should be pulled to the JavaScript with the code below.</p>
  
  <pre><code>    $(document).ready(function()
          {
            $('button[id=editEmail]').on('click', function()
            {
  
  var $email_edbody_array = $('textarea[name="content"]').html($('#summernote').code());
  var $email_edbody = $email_edbody_array.html();
  console.log("edited email" + $email_edbody);
  </code></pre>
  
  <p>The fun part is that this works fine IF the summernote text area is blank - as in if I am creating a new email instead of editing one.
  The <code>console.log</code> should output the edited email body, but it does not. It outputs the original email body. I am not sure why.</p>
  
  <p>What am I missing to get the edited email into my JavaScript. Below is the main parts of the code that I think matter for this question.</p>
  
  <p>This section is the ouput to the page, and the data redirection for the edit button.</p>
  
  <pre><code>          &lt;?php while ($datarow_emails = pg_fetch_assoc($results_emails))
            {
             echo " 
              &lt;tr&gt;
                  &lt;td&gt;".$datarow_emails['internal_name']."&lt;/td&gt; 
                  &lt;td&gt;".$datarow_emails['email_subject']."&lt;/td&gt;
                  &lt;td&gt;".$datarow_emails['type']."&lt;/td&gt;
                  &lt;td&gt;
                          &lt;span class='btn btn-info btn-small open-editEmailModal' data-toggle='modal' 
                              href='#editEmail' data-inm='".$datarow_emails['internal_name']."'
                              data-es='".$datarow_emails['email_subject']."'
                              data-bdy='".$datarow_emails['email_body']."'
                              data-ty=".$datarow_emails['type']."
                              data-ces=".$datarow_emails['canned_email_sid']."&gt;
                          &lt;i class='icon-edit icon-white'&gt;&lt;/i&gt; Edit&lt;/span&gt;
  
                          &lt;span class='btn btn-danger btn-small open-delEmailModal' data-toggle='modal'href='#deleteWarning' data-ces=".$datarow_emails['canned_email_sid']."&gt;
                          &lt;i class='icon-remove icon-white'&gt;&lt;/i&gt; Delete&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;";
            } 
            ?&gt;
  </code></pre>
  
  <p>This next part is the jQuery that redirects the data to the modal. The <code>.note-editable</code> is what redirects the email body.</p>
  
  <pre><code>&lt;script&gt;
  $(document).on("click", ".open-editEmailModal", function()
  {
    var internalName = $(this).data('inm');
    var emailSubject = $(this).data('es');
    var emailBody = $(this).data('bdy');
    var type = $(this).data('ty');
    var cannedEmSid = $(this).data('ces');
  
    $(".modal-body #canEmSid").val(cannedEmSid);
    $(".modal-body #interName").val(internalName);
    $(".modal-body #emailSub").val(emailSubject);
    $(".modal-body #emailBdy").val(emailBody);
    $(".modal-body .note-editable").html(emailBody);
    $(".modal-body #tYpe").val(type);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is the modal:</p>
  
  <pre><code>        &lt;div id="editEmail" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="emailActivityLabel" aria-hidden="true"&gt;
            &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                  &lt;h3 id="myModalLabel"&gt;Edit Canned Response&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
          &lt;form class="form-horizontal"&gt;
                      &lt;div class="control-group" style="margin-bottom:8px;"&gt;
                          &lt;label class="control-label" for="inputInternalName"&gt;Internal Name&lt;/label&gt;
                          &lt;div class="controls"&gt;
                          &lt;input type="text" id="interName" name="interName" placeholder="Internal Name" /&gt;
                          &lt;input type="hidden" id="canEmSid" name="canEmSid"/&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group" style="margin-bottom:8px;"&gt;
                          &lt;label class="control-label" for="inputInternalName"&gt;Type&lt;/label&gt;
                          &lt;div class="controls"&gt;
                    &lt;select id="tYpe" name="tYpe"&gt;
                      &lt;?php
  
                      while ($datearow_typeDD2 = pg_fetch_assoc($results_typesDD2))
                      {
                      echo "&lt;option value='".$datearow_typeDD2['buyer_seller_sid']."'&gt;".$datearow_typeDD2['buyer_seller_type']."&lt;/option&gt;\n";
                      }
                      ?&gt;
                    &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="control-group" style="margin-bottom:8px;"&gt;
                          &lt;label class="control-label" for="inputSubject"&gt;Email Subject&lt;/label&gt;
                          &lt;div class="controls"&gt;
                          &lt;input type="text" id="emailSub" name="emailSub" placeholder="Email Subject"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                &lt;/form&gt;
                          &lt;!-- &lt;div class="text-editor"&gt;&lt;/div&gt; --&gt;
                      &lt;!-- &lt;div  class="summernote"&gt;&lt;/div&gt; --&gt;
                  &lt;div id="emailEditor"&gt;
                      &lt;div class="controls"&gt;
                      &lt;textarea class="summernote input-block-level" id="content" name="content" rows="18"&gt;&lt;/textarea&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-footer"&gt;
                  &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Cancel&lt;/button&gt;
                  &lt;button class="btn btn-success" id="editEmail"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function() 
  {
    $('.summernote').summernote({  
      });
  
            $('button[id=editEmail]').on('click', function()
            {
  
  var $email_edbody_array = $('textarea[name="content"]').html($('#summernote').code());
  var $email_edbody = $email_edbody_array.html();
  </code></pre>
  
  <p>Below this is just other variables and the AJAX script.</p>