如何使用ckeditore与ajax发送数据？ [英] how to send data with ajax using ckeditore?

问题描述

我有一个django的表单。它是撰写邮件形式。我将此表格从视图发送到我的模板，我应用ckeditor更改身体风格。我想要这个表单由ajax发布。当使用ckeditor时，body字段的值不会发送请求.POST。我使用这行代码来使用ckeditor：

  CKEDITOR.replace（'id_body'）; 
  

（不使用ckeditor，每件事情都可以正常使用。）

 < form id =compose_formaction =compose /method =post> 
 {％csrf_token％} 
 {{form.non_field_errors}} 
< div> 
< div class =form-field> 
< label for =id_recipient> {％trans'recipient'％}：< / label> 
 {{form.recipient}} 
 {{form.recipient.errors}} 
< / div> 
< div class =form-field> 
< label for =id_subject> {％trans'subject'％}：< / label> 
 {{form.subject}} 
 {{form.subject.errors}} 
< / div> 
< / div> 
< div class =form-field> 
 {{form.body}} 
 {{form.body.errors}} 
< / div> 
< input id =messages-submittype =submitvalue =发送/> 
< / div> 
< / form> 
  

，我使用此脚本通过ajax发送表单数据：

< pre $ < script type =text / javascript>
$（function（）{
$（'＃compose_form' {
var temp = $（＃compose_form）。serialize（）;
$ .ajax（{
type：POST，
data：temp，
url：'compose /'，
success：function（data）{
// do s.th
}
}）;
return false;
}）;
}）;
< / script>


使用这个脚本，body值不会发送到request.POST（我的意思是它在body字段中发送空字符串），当我添加下面的行对我的脚本，它发送身体场的价值，但它不再是ajax。你可以帮助我做什么吗？

解决方案

编辑器中的数据不包括在表单中的原因是因为编辑器不是表单的一部分。它需要更新与之关联的表单元素。为了实现这一点，您需要告知编辑器更新表单元素。

因此，在表单的提交功能中，您需要从编辑器中获取数据。 p>

这应该是窍门：

  $（function（）{
 $（'＃compose_form'）。submit（function（）{
 for（var instance in CKEDITOR.instances）
 CKEDITOR.instances [instance] .updateElement（）; 
 var temp = $（＃compose_form）。serialize（）; 
 etc etc ... 
  

I have a form in django. it's 'composing mail' form. I send this form from view to my template and i apply ckeditor to chang the body style. i want this form to be posted by ajax. and when ckeditor is used, value of body field isn't send with request.POST. i use this line of code to use ckeditor:

CKEDITOR.replace('id_body'); 

(without using ckeditor, every thing works fine.)

<form id="compose_form" action="compose/" method="post">
        {% csrf_token %}
        {{ form.non_field_errors }}
        <div>
            <div class="form-field">
                <label for="id_recipient">{% trans 'recipient' %}:</label>
                {{ form.recipient }}               
                {{ form.recipient.errors }}
            </div>
            <div class="form-field">
                <label for="id_subject">{% trans 'subject' %}:</label>
                {{ form.subject }}
                {{ form.subject.errors }}
            </div>
        </div>
        <div class="form-field">
            {{ form.body }}
            {{ form.body.errors }}
        </div>        
            <input id="messages-submit" type="submit" value=""Send"/>
        </div>
    </form>

and i use this script to send form data via ajax:

<script type="text/javascript">
        $(function() {
            $('#compose_form').submit(function() {
                var temp = $("#compose_form").serialize();                
                $.ajax({
                    type: "POST",
                    data: temp,
                    url: 'compose/',
                    success: function(data) {
                      // do s.th
                    }
                });
                return false;
            });
        });
    </script>

with this script, body value isn't send to request.POST(i mean it sends empty string in body field), when i add the below line to my script, it sends value of body field, but it isn't ajax any more. Can you please help me what to do?

解决方案

The reason that the data in the editor isn't included in the form is because the editor isn't a part of the form. It needs to update the form element you have associated it with. For this to happen you need to tell the editor to update the form element.

So in the submit function for your form you need to grab data from the editor.

This should do the trick:

$(function() {
        $('#compose_form').submit(function() {
            for (var instance in CKEDITOR.instances)
                CKEDITOR.instances[instance].updateElement();
            var temp = $("#compose_form").serialize();
            etc etc...

这篇关于如何使用ckeditore与ajax发送数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！