ajax提交富文本编辑,富文本编辑和ajax提交评论

我们在后台admin已经用过富文本编辑来编辑我们的博客，这次我们用它提供的这个Widget类，给我们去渲染出一个富文本编辑器在前端的末班页面。

这个Widget可以去给DjangoForm表单去使用。

1、django-ckeditor富文本编辑表单

每个字段类型都有一个适当的默认Widget类

django-ckeditor提供widget

from ckeditor.widgets import CKEditorWidget

首先在评论app中创建forms.py文件，写一个评论表单取代原来前端的Html，和评论的views中的处理数据逻辑。

from django importformsfrom django.contrib.contenttypes.models importContentTypefrom django.db.models importObjectDoesNotExistclassCommentForm(forms.Form):

content_type= forms.CharField(widget=forms.HiddenInput)

object_id= forms.IntegerField(widget=forms.HiddenInput)

text= forms.CharField(widget=forms.Textarea)def __init__(self, *args, **kwargs):if ‘user‘ inkwargs:

self.user= kwargs.pop(‘user‘)

super(CommentForm, self).__init__(*args, **kwargs)defclean(self):#判断用户是否登录

ifself.user.is_authenticated:

self.cleaned_data[‘user‘] =self.userelse:raise forms.ValidationError(‘用户尚未登录‘)#评论对象验证

content_type = self.cleaned_data[‘content_type‘]

object_id= self.cleaned_data[‘object_id‘]try:

model_class= ContentType.objects.get(model=content_type).model_class()

model_obj= model_class.objects.get(pk=object_id)

self.cleaned_data[‘content_object‘] =model_objexceptObjectDoesNotExist:raise forms.ValidationError(‘评论对象不存在‘)return self.cleaned_data

前端

{{ user.username }},欢迎评论~{% csrf_token %}

{{ comment_form }}

博客views

context[‘comment_form‘] = CommentForm(initial={‘content_type‘:blog_content_type.model, ‘object_id‘:blog_pk})

评论views

from django.shortcuts importrender, redirectfrom django.contrib.contenttypes.models importContentTypefrom django.urls importreversefrom .models importCommentfrom .forms importCommentFormdefupdate_comment(request):‘‘‘referer = request.META.get(‘HTTP_REFERER‘, reverse(‘home‘))

#数据检查

user = request.user

if not user.is_authenticated:

return render(request,‘error.html‘,{‘message‘:‘用户未登录‘,‘redirect_to‘:referer })

text = request.POST.get(‘text‘,‘‘).strip()

if text == ‘‘:

return render(request,‘error.html‘,{‘message‘:‘评论内容为空‘,‘redirect_to‘:referer })

try:

content_type = request.POST.get(‘content_type‘,‘‘)

object_id = int(request.POST.get(‘object_id‘,‘‘))

model_class = ContentType.objects.get(model=content_type).model_class()

model_obj = model_class.objects.get(pk=object_id)

except Exception as e:

return render(request, ‘error.html‘, {‘message‘: ‘评论对象不存在‘,‘redirect_to‘:referer })

#检查通过，保存数据

comment = Comment()

comment.user = user

comment.text = text

comment.content_object = model_obj

comment.save()

return redirect(referer)‘‘‘referer= request.META.get(‘HTTP_REFERER‘, reverse(‘home‘))

comment_form= CommentForm(request.POST, user=request.user)ifcomment_form.is_valid():#检查通过，保存数据

comment =Comment()

comment.user= comment_form.cleaned_data[‘user‘]

comment.text= comment_form.cleaned_data[‘text‘]

comment.content_object= comment_form.cleaned_data[‘content_object‘]

comment.save()returnredirect(referer)else:return render(request, ‘error.html‘, {‘message‘: comment_form.errors, ‘redirect_to‘: referer})

评论views

from django.urls importpathfrom . importviews

urlpatterns=[

path(‘update_comment‘,views.update_comment,name=‘update_comment‘),

]

把前端评论框改成富文本编辑使用django-ckeditor

在评论forms中导入

from ckeditor.widgets import CKEditorWidget

把text修改

text = forms.CharField(widget=CKEditorWidget(config_name=‘comment_ckeditor‘))

之后给博客页面加入js链接

如果要对富文本编辑框进行修改，可以参考github里的django-ckeditor，在settins中

CKEDITOR_CONFIGS ={‘default‘:{},‘comment_ckeditor‘: {‘toolbar‘: ‘custom‘,‘toolbar_custom‘: [

[‘Bold‘, ‘Italic‘, ‘Underline‘, ‘Strike‘, ‘Subscript‘, ‘Superscript‘],

["TextColor", "BGColor", ‘RemoveFormat‘],

[‘NumberedList‘, ‘BulletedList‘],

[‘Link‘, ‘Unlink‘],

["Smiley", "SpecialChar", ‘Blockquote‘],

],‘width‘: ‘auto‘,‘height‘: ‘180‘,‘tabSpaces‘: 4,‘removePlugins‘: ‘elementspath‘,‘resize_enabled‘: False,

}

}

此时提交信息后页面会进行刷新，需要使用ajax。

2.ajax提交

正常提交会刷新页面，可以ajax提交数据

ajax提交是一种不刷新页面的异步提交方式

在博客页面为评论表单、评论错误、评论列表表单分别设置id值，方便查找。comment_form,comment_error,comment_list

之后写jquery ajax进行异步提交数据。

{% block script_extends %}

$(‘#comment_error‘).text(‘‘);if(CKEDITOR.instances["id_text"].document.getBody().getText().trim()==‘‘){

$(‘#comment_error‘).text(‘评论内容不能为空‘);returnfalse

}//更新数据到textarea里边

CKEDITOR.instances["id_text"].updateElement();//异步提交，标签选择器选中form表单，当表单提交的时候会触发submit()方法，触发事件的时候回调一个function//这个function作为一个参数写到这里 returnfalse 会阻止它点完按钮直接提交这个操作,这里我们需要一个异步提交

$.ajax({

url:"{% url ‘update_comment‘ %}",

type:‘POST‘,

data: $(this).serialize(),

cache: false,

success: function (data) {

console.log(data);//判断是否处理成功if(data[‘status‘]==‘SUCCESS‘){//插入数据

var comment_html= ‘

‘ + data[‘username‘] +

‘(‘ + data[‘comment_time‘] + ‘):‘ +data[‘text‘] + ‘

‘;

$(‘#comment_list‘).prepend(comment_html);//清空编辑框的内容

CKEDITOR.instances[‘id_text‘].setData(‘‘)

}else{//显示错误信息

$(‘#comment_error‘).text(data[‘message‘]);

}

},

error: function (xhr) {

console.log(xhr);

}

});returnfalse;

});{% endblock %}

在views处理方法中，处理数据后返回信息

from django.shortcuts importrender, redirectfrom django.contrib.contenttypes.models importContentTypefrom django.urls importreversefrom django.http importJsonResponsefrom .models importCommentfrom .forms importCommentFormdefupdate_comment(request):‘‘‘referer = request.META.get(‘HTTP_REFERER‘, reverse(‘home‘))

#数据检查

user = request.user

if not user.is_authenticated:

return render(request,‘error.html‘,{‘message‘:‘用户未登录‘,‘redirect_to‘:referer })

text = request.POST.get(‘text‘,‘‘).strip()

if text == ‘‘:

return render(request,‘error.html‘,{‘message‘:‘评论内容为空‘,‘redirect_to‘:referer })

try:

content_type = request.POST.get(‘content_type‘,‘‘)

object_id = int(request.POST.get(‘object_id‘,‘‘))

model_class = ContentType.objects.get(model=content_type).model_class()

model_obj = model_class.objects.get(pk=object_id)

except Exception as e:

return render(request, ‘error.html‘, {‘message‘: ‘评论对象不存在‘,‘redirect_to‘:referer })

#检查通过，保存数据

comment = Comment()

comment.user = user

comment.text = text

comment.content_object = model_obj

comment.save()

return redirect(referer)‘‘‘referer= request.META.get(‘HTTP_REFERER‘, reverse(‘home‘))

comment_form= CommentForm(request.POST, user=request.user)

data={}ifcomment_form.is_valid():#检查通过，保存数据

comment =Comment()

comment.user= comment_form.cleaned_data[‘user‘]

comment.text= comment_form.cleaned_data[‘text‘]

comment.content_object= comment_form.cleaned_data[‘content_object‘]

comment.save()#返回数据

data[‘status‘] = ‘SUCCESS‘data[‘username‘] =comment.user.username

data[‘comment_time‘] = comment.comment_time.strftime(‘%Y-%m-%d %H:%M:%S‘)

data[‘text‘] =comment.textelse:

data[‘status‘] = ‘ERROR‘data[‘message‘] =list(comment_form.errors.values())[0][0]returnJsonResponse(data)#return render(request, ‘error.html‘, {‘message‘: comment_form.errors, ‘redirect_to‘: referer})

原文：https://www.cnblogs.com/lag1/p/13882250.html