jQuery 从summernote textarea中提取编辑过的文本

Pulling edited text from summernote textarea

提问by Jeff Kyzer

I have a list of canned emails in a database. "Thanks for becoming a member", "Thank you for your purchase its on the way" - stuff like that. I am using Bootstrap modals to edit these emails. When I click the edit button, the modal drops down, and is populated with the data from the database: email name, subject, body. I am using Passing data to a bootstrap modalto accomplish this. Works great. Now I am using summernote as my rich text editor.

我在数据库中有一个罐头电子邮件列表。“感谢您成为会员”、“感谢您在途中购买”——诸如此类。我正在使用 Bootstrap 模式来编辑这些电子邮件。当我单击编辑按钮时，模态下拉，并填充数据库中的数据：电子邮件名称、主题、正文。我正在使用将数据传递到引导模式来完成此操作。效果很好。现在我使用summernote 作为我的富文本编辑器。

Here is my textarea that displays the unedited data:

这是我的 textarea 显示未编辑的数据：

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

The class summernote is how the data gets directed to the output text area so it can be edited. Once the data has been edited, I click submit, and the data should be pulled to the JavaScript with the code below.

Summernote 类是将数据定向到输出文本区域以便对其进行编辑的方式。一旦数据被编辑，我点击提交，数据应该被拉到 JavaScript 和下面的代码。

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

The fun part is that this works fine IF the summernote text area is blank - as in if I am creating a new email instead of editing one. The console.logshould output the edited email body, but it does not. It outputs the original email body. I am not sure why.

有趣的部分是，如果summernote 文本区域是空白的，这可以正常工作 - 就像我正在创建新电子邮件而不是编辑电子邮件一样。本console.log应该输出编辑的电子邮件正文中，但事实并非如此。它输出原始电子邮件正文。我不知道为什么。

What am I missing to get the edited email into my JavaScript. Below is the main parts of the code that I think matter for this question.

将编辑后的电子邮件放入我的 JavaScript 中我缺少什么。以下是我认为对这个问题很重要的代码的主要部分。

This section is the ouput to the page, and the data redirection for the edit button.

此部分是页面的输出，以及编辑按钮的数据重定向。

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

This next part is the jQuery that redirects the data to the modal. The .note-editableis what redirects the email body.

下一部分是将数据重定向到模态的 jQuery。这.note-editable是重定向电子邮件正文的内容。

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

And here is the 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();

Below this is just other variables and the AJAX script.

下面是其他变量和 AJAX 脚本。

回答by guyfromfargo

TomPHP solution does not work with the newer version of summernote. In case anyone stumbles upon this post here is a current solution.

TomPHP 解决方案不适用于较新版本的 summernote。如果有人偶然发现这篇文章，这里是一个当前的解决方案。

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

回答by DonOfDen

Instead of Getting the value of the Field You can use the summernote code()Function.

您可以使用 summernotecode()函数，而不是获取字段的值。

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

For Your Code:

对于您的代码：

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

回答by yaya

• Before version 0.7.0:

• 0.7.0 版本之前：

$('#summernote').code()

• Version 0.7.0 and above:

• 0.7.0 及以上版本：

$('#summernote').summernote('code')

回答by Robert Kehoe

If you have a lot of Summernote objects, then you can use this script to auto-create "hidden" input elements in a form and update summernote value to each of them. This works great for my needs.

如果您有很多 Summernote 对象，那么您可以使用此脚本在表单中自动创建“隐藏”输入元素，并更新每个元素的 summernote 值。这非常适合我的需求。

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

    });