Pulling edited text from summernote textarea

Question

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 Passing data to a bootstrap modal to accomplish this. Works great. Now I am using summernote as my rich text editor.

Here is my textarea that displays the unedited data:

<textarea class="summernote input-block-level" id="content" name="content" rows="18"></textarea>

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.

    $(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);

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 console.log should output the edited email body, but it does not. It outputs the original email body. I am not sure why.

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.

This section is the ouput to the page, and the data redirection for the edit button.

          <?php while ($datarow_emails = pg_fetch_assoc($results_emails))
          {
           echo " 
            <tr>
                <td>".$datarow_emails['internal_name']."</td> 
                <td>".$datarow_emails['email_subject']."</td>
                <td>".$datarow_emails['type']."</td>
                <td>
                        <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'].">
                        <i class='icon-edit icon-white'></i> Edit</span>

                        <span class='btn btn-danger btn-small open-delEmailModal' data-toggle='modal'href='#deleteWarning' data-ces=".$datarow_emails['canned_email_sid'].">
                        <i class='icon-remove icon-white'></i> Delete</span>
                </td>
            </tr>";
          } 
          ?>

This next part is the jQuery that redirects the data to the modal. The .note-editable is what redirects the email body.

<script>
$(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);
});
</script>

And here is the modal:

        <div id="editEmail" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="emailActivityLabel" aria-hidden="true">
          <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Edit Canned Response</h3>
            </div>
            <div class="modal-body">
        <form class="form-horizontal">
                    <div class="control-group" style="margin-bottom:8px;">
                        <label class="control-label" for="inputInternalName">Internal Name</label>
                        <div class="controls">
                        <input type="text" id="interName" name="interName" placeholder="Internal Name" />
                        <input type="hidden" id="canEmSid" name="canEmSid"/>
                      </div>
                    </div>
                    <div class="control-group" style="margin-bottom:8px;">
                        <label class="control-label" for="inputInternalName">Type</label>
                        <div class="controls">
                  <select id="tYpe" name="tYpe">
                    <?php

                    while ($datearow_typeDD2 = pg_fetch_assoc($results_typesDD2))
                    {
                    echo "<option value='".$datearow_typeDD2['buyer_seller_sid']."'>".$datearow_typeDD2['buyer_seller_type']."</option>\n";
                    }
                    ?>
                  </select>
                        </div>
                    </div>
                    <div class="control-group" style="margin-bottom:8px;">
                        <label class="control-label" for="inputSubject">Email Subject</label>
                        <div class="controls">
                        <input type="text" id="emailSub" name="emailSub" placeholder="Email Subject">
                        </div>
                    </div>
              </form>
                        <!-- <div class="text-editor"></div> -->
                    <!-- <div  class="summernote"></div> -->
                <div id="emailEditor">
                    <div class="controls">
                    <textarea class="summernote input-block-level" id="content" name="content" rows="18"></textarea>

                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                <button class="btn btn-success" id="editEmail">Save</button>
            </div>
        </div>

<script type="text/javascript">

$(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();

Below this is just other variables and the AJAX script.

Emancipator

Did you find the answer? I'm looking for a way to send Summernote's edited text via ajax but I don't know how to find the text. – Verditer

Answer 1

TomPHP solution does not work with the newer version of summernote. In case anyone stumbles upon this post here is a current solution.

var textareaValue = $('#summernote').summernote('code');

Killigrew

Thank you for posting this! – Incumbent

Answer 2

Instead of Getting the value of the Field You can use the summernote code() Function.

var textareaValue = $("#summernote").code();

For Your Code:

var textareaValue = $("#content").code();

Medardas

Answer 3

• Before version 0.7.0:

$('#summernote').code()

• Version 0.7.0 and above:

$('#summernote').summernote('code')

Emendation

Thanks - could not understand WHY it would not work until I ran across this little post. – Hyla

Answer 4

If you have a lot of Summernote objects, then you can use this script to auto-create "hidden" input elements in a form and update summernote value to each of them. This works great for my needs.

$(function(){

        // Reference each summernote object
        var summernoteObjects = [
            'summernote_id1',
            'summernote_id2',
            'summernote_id3',
            'summernote_id4',
            'summernote_id5',
            'summernote_id6',
            'summernote_id7',
            'summernote_id8',
        ];

        // Create hidden values for each summernote
        for(var i=0; i<summernoteObjects.length; i++){
            var objectPointerName = summernoteObjects[i];

            $("#" + objectPointerName).summernote();
            $("#formId").append("<input type='hidden' name='"+objectPointerName+"'>");
        }

        // Update hidden values on form submit
        $("#formId").submit(function(){
            for(var i=0; i<summernoteObjects.length; i++){
                var objectPointerName = summernoteObjects[i];
                var summernoteValue = $("#" + objectPointerName).summernote('code');

                $("#formId input[name='"+objectPointerName+"']").val(summernoteValue);
            }
        });

    });

Isia

Why are you creating elements? Summernote, if initialized correctly will hide the associated input. A class selector or summernote would work a treat – Indenture

Answer 5

Use like this $('.summernote').summernote('code')

Aloft

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Unwearied

Hello, please don't just submit code in your answer(s), add some details as to why you think this is the optimal solution. – Karyolysis

Answer 6

In case anyone struggles to set data from Ajax in summernote like I did.

Please note that note from 'data.note' below is the column from the DB

$.ajax({success: function(replied){data = JSON.parse(replied);$('#yourSummerID').summernote('code', data.note);}});

Ewaewald