从summernote textarea中提取已编辑的文本
Posted
技术标签:
【中文标题】从summernote textarea中提取已编辑的文本【英文标题】：Pulling edited text from summernote textarea 【发布时间】：2014-03-22 05:34:45 【问题描述】：我有一个数据库中的预设电子邮件列表。 “感谢您成为会员”、“感谢您在途中购买它”——诸如此类。我正在使用 Bootstrap 模式来编辑这些电子邮件。当我单击编辑按钮时，模式下拉，并填充数据库中的数据：电子邮件名称、主题、正文。我正在使用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>
这里是模态：
<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 脚本。
【问题讨论】：
你找到答案了吗？我正在寻找一种通过 ajax 发送 Summernote 编辑文本的方法，但我不知道如何找到文本。 【参考方案1】：TomPHP 解决方案不适用于更新版本的 Summernote。 如果有人偶然发现这篇文章，这里是一个当前的解决方案。
var textareaValue = $('#summernote').summernote('code');
【讨论】：
感谢您发布此消息！【参考方案2】：你可以使用summernotecode()函数来代替获取字段的值。
var textareaValue = $("#summernote").code();
对于您的代码：
var textareaValue = $("#content").code();
【讨论】：
【参考方案3】： 0.7.0 版之前：$('#summernote').code()
$('#summernote').summernote('code')
【讨论】：
谢谢 - 直到我遇到这个小帖子才明白为什么它不起作用。【参考方案4】：如果您有很多 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);
);
);
【讨论】：
【参考方案5】：以防有人像我一样在 Summernote 中努力从 Ajax 设置数据。
请注意，下面“data.note”中的note是数据库中的列
$.ajax(success: function(replied)data = JSON.parse(replied);$('#yourSummerID').summernote('code', data.note););
【讨论】：
以上是关于从summernote textarea中提取已编辑的文本的主要内容，如果未能解决你的问题，请参考以下文章
无法使用 Javascript AJAX 从 Summernote textarea 获取价值发送帖子数据
在 Textarea 中，一些单词会自动变成超链接（summernote）
如何使用 jquery/javascript 在summernote 编辑器中为 textarea 限制第一个位置的空间