web-dev-qa-db-fra.com

Extraire le texte modifié de la zone de texte de la sommation

J'ai une liste d'e-mails en conserve dans une base de données. "Merci d'être devenu membre", "Merci pour votre achat, c'est en route" - des trucs comme ça. J'utilise des modaux Bootstrap pour modifier ces courriels. Lorsque je clique sur le bouton Modifier, le modal descend et est rempli avec les données de la base de données: nom du courriel, sujet, corps. Je suis utiliser Passer des données à un bootstrap modal pour accomplir cela. Fonctionne très bien. Maintenant, j'utilise summernote comme mon éditeur de texte enrichi.

Voici ma zone de texte qui affiche les données non modifiées:

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

Le résumé de classe est la façon dont les données sont dirigées vers la zone de texte de sortie afin qu'elles puissent être modifiées. Une fois les données modifiées, je clique sur soumettre, et les données doivent être transférées vers JavaScript avec le code ci-dessous.

    $(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 partie amusante est que cela fonctionne bien SI la zone de texte de la sommation est vide - comme si je créais un nouvel e-mail au lieu d'en modifier un. Le console.log devrait afficher le corps de l'e-mail modifié, mais ce n'est pas le cas. Il affiche le corps de l'e-mail d'origine. Je ne suis pas sûr pourquoi.

Que manque-t-il pour obtenir l'e-mail modifié dans mon JavaScript. Voici les principales parties du code qui, je pense, sont importantes pour cette question.

Cette section est la sortie de la page et la redirection des données pour le bouton d'édition.

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

Cette partie suivante est le jQuery qui redirige les données vers le modal. Le .note-editable est ce qui redirige le corps de l'e-mail.

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

Et voici le 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();

En dessous, il y a juste d'autres variables et le script AJAX.

jqueryhtmltwitter-bootstrapsummernote
24
Jeff Kyzer

La solution TomPHP ne fonctionne pas avec la nouvelle version de summernote. Au cas où quelqu'un tomberait sur ce message, voici une solution actuelle.

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

Au lieu d'obtenir la valeur du champ, vous pouvez utiliser la fonction summernote code().

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

Pour votre code:

var textareaValue = $("#content").code();
24
DonOfDen
  • Avant la version 0.7.0:
$('#summernote').code()
  • Version 0.7.0 et supérieure:
$('#summernote').summernote('code')
1
yaya

Si vous avez beaucoup d'objets Summernote, vous pouvez utiliser ce script pour créer automatiquement des éléments d'entrée "masqués" dans un formulaire et mettre à jour la valeur summernote pour chacun d'eux. Cela fonctionne très bien pour mes besoins.

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

    });
1
Robert Kehoe