当summernote div改变时Textarea值改变

Posted 2023-03-22

【中文标题】当summernote div改变时Textarea值改变

【英文标题】：Textarea value change when summernote div is changed

【发布时间】：2014-04-03 21:07:22

【问题描述】：

我已经为 Summernote 设置了一个 div 来更改从数据库中提取的文本。

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

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

直接在 div 之后我有一个带有 ID 的文本区域。

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

我希望 textarea 的内容在我输入summernote div 时发生变化。就像我输入这个问题时发生的事情一样。

【问题讨论】：

你试过什么？ Summernote API 文档 (hackerwins.github.io/summernote/features.html#api-summernote) 显示了一种方法。提示：尝试组合使用 keyup 事件处理程序和 .code() 函数。

【参考方案1】：

使用summernote API

我想出了这个解决方案：

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

【讨论】：

您不必自己执行此操作。 v0.7.0 之后 textarea 会自动同步。 github.com/summernote/summernote/blob/develop/src/js/base/…

.code() 方法对我不起作用 - 我认为它已更改为 $('#summernote').summernote('code')。

【参考方案2】：

我认为最好处理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

截至此版本，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>

【参考方案3】：

受@user3367639 启发，这是一种更通用的方法

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

用这个方法：

String.prototype.strip = function()

   var tmpDiv = document.createElement("div");
   tmpDiv.innerHTML = this;
   return tmpDiv.textContent || tmpDiv.innerText || "";

你可以在你的 JS 控制器中做这样的事情来获取你的 textarea 的文本值

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

希望这会有所帮助

【参考方案4】：

使用这个例子：

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

【参考方案5】：

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


<form>
<textarea name="content" onChange></textarea>
</form>

【参考方案6】：

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

这对我有用