Pulling edited text from summernote textarea
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.
Answer
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');