Bootstrap 从summernote textarea中提取已编辑的文本

mzillmmw  于 2023-05-27  发布在  Bootstrap
关注(0)|答案(6)|浏览(282)

我在数据库里有一份封存邮件的清单。“谢谢你成为会员”,“谢谢你的购买它的方式”-诸如此类的东西。我正在使用Bootstrap modals来编辑这些电子邮件。当我单击编辑按钮时,模态下拉,并填充数据库中的数据:电子邮件名称、主题、正文。我使用Passing data to a bootstrap modal来实现这一点。效果很好。现在我使用summernote作为我的富文本编辑器。
以下是我的文本区域,显示未编辑的数据:

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

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

有趣的是,如果summernote文本区域是空白的,这会很好地工作-就像我正在创建一封新的电子邮件而不是编辑一封。console.log应该输出编辑后的电子邮件正文,但它没有。它输出原始电子邮件正文。我不知道为什么。
我错过了什么,以获得编辑的电子邮件到我的JavaScript。下面是我认为对这个问题很重要的代码的主要部分。
此部分是页面的输出,以及编辑按钮的数据重定向。

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

下一部分是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>

这里是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();

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

yeotifhr

yeotifhr1#

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

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

xurqigkl2#

你可以使用summernote code()函数来代替获取Field的值。

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

对于您的代码:

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

w9apscun3#

  • 版本0.7.0之前:
$('#summernote').code()
  • 版本0.7.0及以上:
$('#summernote').summernote('code')
e0uiprwp

e0uiprwp4#

如果你有很多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);
            }
        });

    });
puruo6ea

puruo6ea5#

以防有人像我一样在summernote中从 AJAX 设置数据。
请注意,下面'data.note'中的note是来自DB的列

$.ajax({success: function(replied){data = JSON.parse(replied);$('#yourSummerID').summernote('code', data.note);}});
hgb9j2n6

hgb9j2n66#

像这样使用$('. summernote').summernote('code')

相关问题