从 textarea 获取文本并将其附加到隐藏的输入

Question

我在这方面真的很难受。 我有一个使用 bootstrap wysiwyg 的模板并具有以下结构（在加载模板时动态添加）：

<div class="col-sm-10">
  <div class="summernote" style="display: none;"></div>
  <div class="note-editor">
    <div class="note-dropzone">//content</div>
    <div class="note-dialog">//content</div>
    <div class="note-handle">//content</div>
    <div class="note-popover">//content</div>
    <div class="note-toolbar btn-toolbar">//content</div>
    <textarea class="note-codable"></textarea>
    <div class="note-editable" contenteditable="true">  
       <p></p>
    </div>  
</div>

我注意到在检查代码时，我在编辑器中编写的内容被添加到 p 标签中。

我的问题是，如何“捕捉”用户在所见即所得文本区域上写的内容并在通过 $_POST 在 php 中发送时接收它？

到目前为止，我的方法是：

• 获取 p 并添加一个 id

• 添加到 pa 模糊功能，因此当用户停止书写并在外部单击时，可以将内容复制到隐藏的输入中

  window.onload = function(){ var paragraph = $('.note-editable').find('div').find('p:first'); paragraph.id = 'pr'; $("#pr").blur(function(){ alert("This input field has lost its focus."); }); }

当然，我没有成功，现在我的头有点烧。 任何帮助表示赞赏。

Answer 1

只需使用summernote的内置方法获取代码，然后使用jQuery将其转换为文本。

var html = $('.summernote').code();
$('#hiddenField').val($(html).text());

Answer 2

尝试使用input事件，处理程序中的this.textContent来检索.note-editable元素中的文本

 $(".note-editable").on("input", function(e) { console.log(this.textContent) })

 .note-editable { border:1px solid #000; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="col-sm-10"> <div class="summernote" style="display: none;"></div> <div class="note-editor"> <div class="note-dropzone">//content</div> <div class="note-dialog">//content</div> <div class="note-handle">//content</div> <div class="note-popover">//content</div> <div class="note-toolbar btn-toolbar">//content</div> <textarea class="note-codable"></textarea> <div class="note-editable" contentEditable="true"> <p></p> </div> </div>