Textarea value change when summernote div is changed

前端 未结 6 1549
独厮守ぢ
独厮守ぢ 2021-02-05 09:37

I have setup a div for the summernote to alter text pulled from a database.

相关标签:
6条回答
  • 2021-02-05 10:07

    I think it is better to handle the onChange event.

    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

    As of this version, callback only works with camel case string.

    $('#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>

    0 讨论(0)
  • 2021-02-05 10:07

    Use This Example:

    <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>
    
    0 讨论(0)
  • 2021-02-05 10:11

    $('textarea').summernote({
      callbacks: {
        onChange: function(contents, $editable) {
          console.log('onChange:', contents, $editable);
        }
      }
    })
    
    
    <form>
    <textarea name="content" onChange></textarea>
    </form>
    
    0 讨论(0)
  • 2021-02-05 10:17

    Using the summernote API

    I came up with this solution:

    $(document).ready(function() {
        $('#summernote').summernote({
          onKeyup: function(e) {
            $("#lawsContent").val($("#summernote").code());
          },
          height: 300,
        });
    });
    
    0 讨论(0)
  • 2021-02-05 10:23

    Inspired by @user3367639, this is a more generic way to do it

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

    And with this method :

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

    You could do in your JS controller something like this to get the text value of your textarea

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

    Hope this will help  

    0 讨论(0)
  • 2021-02-05 10:28
    <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());
            }
          });
    });
    

    This worked for me

    0 讨论(0)
提交回复
热议问题