jquery - disable - summernote italic

Tirando texto editado desde summernote textarea

Question

Tengo una lista de correos electrónicos enlatados en una base de datos. "Gracias por ser miembro", "Gracias por su compra, está en camino", cosas así. Estoy usando los modales de Bootstrap para editar estos correos electrónicos. Cuando hago clic en el botón Editar, el modal se despliega y se llena con los datos de la base de datos: nombre del correo electrónico, asunto, cuerpo. Estoy usando Pasar datos a un modo de arranque para lograr esto. Funciona genial. Ahora estoy usando summernote como mi editor de texto enriquecido.

Aquí está mi área de texto que muestra los datos sin editar:

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

La clase de resumen es cómo los datos se dirigen al área de texto de salida para que puedan editarse. Una vez que se han editado los datos, hago clic en enviar, y los datos deben enviarse al código JavaScript a continuación.

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

La parte divertida es que esto funciona bien SI el área de texto del resumen está en blanco, como si estuviera creando un nuevo correo electrónico en lugar de editar uno. El console.log debería generar el cuerpo del correo electrónico editado, pero no lo hace. Da salida al cuerpo original del correo electrónico. No estoy seguro por qué.

¿Qué me falta para obtener el correo electrónico editado en mi JavaScript. A continuación se muestran las partes principales del código que creo que son importantes para esta pregunta.

Esta sección es la salida a la página y la redirección de datos para el botón de edición.

 <?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>";
}
?>

La siguiente parte es la jQuery que redirige los datos al modal. El .note-editable es lo que redirige el cuerpo del correo electrónico.

<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>

Y aquí está el 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();

Debajo de esto hay otras variables y el script AJAX.

Answer 1

En lugar de obtener el valor del campo, puede usar la función summernote code() .

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

Para su código:

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

Answer 2

La solución TomPHP no funciona con la versión más reciente de Summernote. En caso de que alguien se tope con este post aquí es una solución actual.

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

Answer 3

Si tiene muchos objetos de Summernote, puede usar este script para crear automáticamente elementos de entrada "ocultos" en un formulario y actualizar el valor de summernote en cada uno de ellos. Esto funciona muy bien para mis necesidades.

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