web-dev-qa-db-fra.com

Modification de la valeur de Textarea lors de la modification de summernote div

J'ai configuré un div pour le summernote pour modifier le texte extrait d'une base de données. 

<div id="summernote" class="form-control"><?php echo $laws['content']; ?></div> 

$(document).ready(function() {
   $('#summernote').summernote({
     height: 300,
   });
});

directement après le div, j'ai une zone de texte avec un identifiant. 

<textarea id="lawsContent"></textarea>

Je veux que le contenu de textarea change au fur et à mesure que je tape dans le summernote div. Tout comme ce qui se passe pendant que je tape cette question. 

javascriptjqueryhtmlcsssummernote
14
user3367639

Utilisation de l’API summernote

Je suis venu avec cette solution: 

$(document).ready(function() {
    $('#summernote').summernote({
      onKeyup: function(e) {
        $("#lawsContent").val($("#summernote").code());
      },
      height: 300,
    });
});
16
user3367639

Je pense qu'il est préférable de gérer l'événement onChange .

v0.7.0

$('#summernote').summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
    }
  }
});


$(document).ready(function(){

    $("#summernote").summernote(
        {
            height: "10em",
            callbacks: {
              onChange: function (contents, $editable) {
                var code = $(this).summernote("code");
                $("#lawsContent").val(code);
              }
            }
        }
    );

});
#lawsContent
{
    width: 100%;
    height: 10em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.min.js"></script>
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.min.css" rel="stylesheet"/>


Editor:
<div id="summernote" class="form-control"></div>

Output:
<textarea id="lawsContent" class="form-control"></textarea>

v0.6.5

À partir de cette version, callback ne fonctionne qu'avec la chaîne de casse-chameau . 

$('#summernote').summernote({
  onChange: function(contents, $editable) {
    console.log('onChange:', contents, $editable);
  }
});


$(document).ready(function(){

    $("#summernote").summernote(
        {
            height: "10em",
            onChange: function (contents, $editable) {
                $("#lawsContent").val(contents);
            }
        }
    );

});
#lawsContent
{
    width: 100%;
    height: 10em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.7/summernote.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.7/summernote.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


Editor:
<div id="summernote" class="form-control"></div>

Output:
<textarea id="lawsContent" class="form-control"></textarea>

9
Bjørn-Roger Kringsjå

Inspiré par @ user3367639, voici une façon plus générique de le faire.

$('.summernote').each(function () {
    var $textArea = $(this);

    $textArea.summernote({
        onKeyup: function (e) {
            $textArea.val($(this).code());
            $textArea.change(); //To update any action binded on the control
        }
    });
});

Et avec cette méthode: 

String.prototype.strip = function()
{
   var tmpDiv = document.createElement("div");
   tmpDiv.innerHTML = this;
   return tmpDiv.textContent || tmpDiv.innerText || "";
}

Vous pouvez faire quelque chose comme ceci dans votre contrôleur JS pour obtenir la valeur textuelle de votre textarea 

$myTextArea.val().strip(); //Where val() returns the html and strip() returns the text

J'espère que cela aidera

6
RPDeshaies

Utilisez cet exemple:

<form id="form_id" action="/summernote.php" onsubmit="return postForm()">
    <textarea id="summernote" rows="6" name="textarea_name" ></textarea>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        var postForm = function() {
            var content = $('textarea[name="textarea_name"]').html($('#summernote').code());
        }
    });
</script>
2
Hardik Panseriya
<div role="tabpanel" class="tab-pane" id="product_desc_l">
    <p>
        First impressions are everything. <br> <br>
    </p>
    <strong>Features:</strong>
</div>

<textarea id="product_desc_long" name="product_desc_long"  class="summernote form-control" rows="10" placeholder="Enter the product long description..."></textarea>


$(document).ready(function() {
      $('.summernote').summernote({
        height: 300,
        onKeyup: function(e) {
           $("#product_desc_l").html($(this).code());
        }
      });
});

Cela a fonctionné pour moi

0
Cutting Edge Hobbies

$('textarea').summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
    }
  }
})


<form>
<textarea name="content" onChange></textarea>
</form>
0
Raghavendra Kulkarni