一、前言

　　在上一篇内容，已经将评论的模型使用，ajax的加载以及ckeditor评论样式大致都介绍了一遍。其实不管是ckeditor还是ueditor都非常的好用，在学会了如何配置ckeditor编辑框和评论框以后，我开始转向了ueditor的学习，个人觉得ueditor在外观上来看，要比ckeditor好一点点，作为编辑框或者评论框都是非常的适合。在这次改写评论框样式，代码层面需要修改的并不多，只需要对上篇内容的代码进行两处修改，一处是定义评论表单的form.py文件，需要对text字段的widget稍作修改，另一处则是表单提交的代码部分。此外，在了解这部分内容，还需要对ueditor有一个了解，不懂的朋友可以先看看我之前将ueditor应用到django后台的文章—。

二、改写评论表单文件

　　主要区别就是widget属性的部分，重新定义了ueditor的评论框样式，其他地方几乎没有作任何修改。

from django import formsfrom django.contrib.contenttypes.models import ContentTypefrom django.db.models import ObjectDoesNotExistfrom ckeditor.widgets import CKEditorWidgetfrom DjangoUeditor.widgets import UEditorWidgetfrom .models import Commentclass CommentForm(forms.Form):    """    提交评论表单    """    content_type = forms.CharField(widget=forms.HiddenInput)    object_id = forms.IntegerField(widget=forms.HiddenInput)    text = forms.CharField(widget=UEditorWidget(        attrs={"width": 'auto', "height": 180,               "toolbars": [['fullscreen', 'source', 'undo', 'redo', 'bold', 'italic',                             'underline', 'fontborder', 'strikethrough', 'superscript',                             'subscript', 'removeformat', 'formatmatch', 'autotypeset',                             'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor',                             'insertorderedlist', 'insertunorderedlist','selectall',                            'cleardoc', 'emotion']]}),        error_messages={'required': '评论内容不能为空'})    # text = forms.CharField(widget=CKEditorWidget(config_name='comment_ckeditor'),    #                        error_messages={'required': '您尚未写任何评论内容'})    reply_comment_id = forms.IntegerField(widget=forms.HiddenInput(attrs={'id': 'reply_comment_id'}))    def __init__(self, *args,  **kwargs):        if 'user' in kwargs:            self.user = kwargs.pop('user')        super(CommentForm, self).__init__(*args, **kwargs)    def clean(self):        # 验证用户是否处在登录状态        if self.user.is_authenticated:            self.cleaned_data['user'] = self.user        else:            raise forms.ValidationError('您尚未登录，请先登录才能评论')        # 评论对象验证        content_type = self.cleaned_data['content_type']        object_id = self.cleaned_data['object_id']        # 找到post对象        try:            models_class = ContentType.objects.get(model=content_type).model_class()            models_obj = models_class.objects.get(pk=object_id)            self.cleaned_data['content_object'] = models_obj        except ObjectDoesNotExist:            raise forms.ValidationError('评论对象不存在')        return self.cleaned_data    def clean_reply_comment_id(self):        reply_comment_id = self.cleaned_data['reply_comment_id']        if reply_comment_id < 0:            raise forms.ValidationError('回复出错')        elif reply_comment_id == 0:            self.cleaned_data['parent'] = None        elif Comment.objects.filter(pk=reply_comment_id).exists():            self.cleaned_data['parent'] = Comment.objects.get(pk=reply_comment_id)        else:            raise forms.ValidationError('回复出错')        return reply_comment_id

三、改写ajax加载评论

1.引用ueditor的js文件

2.改写评论表单submit代码

　　同样地，在submit中，也需要对ueditor的API作一个基本了解，如getContent函数，指的是获取评论框编辑的内容，与setContent意义相反，ueditor的文档可以参考到：。

// ueditor编辑框提交$("#comment_form").submit(function(){    // 判断是否为空    if(id_text.getContent() == '' ){        $("#comment_error").text('您尚未写任何评论内容');        return false;    }    if(id_text.getContent().includes("让评论多一点真诚，少一点套路~") ){        $("#comment_error").text('您尚未写任何评论内容');        return false;    }    // 更新数据到textarea    // id_text.updateElement();    // 异步提交    $.ajax({        url: "{% url 'comment:update_comment' %}",        type: 'POST',        data: $(this).serialize(),        cache: false,        success: function(data){            console.log(data);            if(data['status']=="SUCCESS"){                if($('#reply_comment_id').val()=='0'){                    // 插入评论                    var comment_html = '
     
      ' +                        '
      {1}' +                        '
      ({2})：' +                        '
      
       {3}
      
' +                        '
      
       ' +                            '
        ' +                            '
       0' +                        '
      
' +                        '
      回复' +                        '
     
';                    comment_html = comment_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['text'], data['content_type']);                    $("#comment_list").prepend(comment_html);                }else{                    // 插入回复                    var reply_html = '
     
      ' +                                '
      {1}' +                                '
      ({2})' +                                '
      回复' +                                '
      {3}：' +                                '
      
       {4}
      
' +                                '
      
       ' +                                    '
        ' +                                    '
       0' +                                '
      
' +                                '
      回复' +                            '
     
';                    reply_html = reply_html.format(data['pk'], data['username'], timeFormat(data['comment_time']), data['reply_to'], data['text'], data['content_type']);                    $("#root_" + data['root_pk']).append(reply_html);                }                // 清空编辑框的内容                id_text.setContent('');                $('#reply_content_container').hide();                $('#reply_comment_id').val('0');                $('#no_comment').remove();                window.location.reload();                $("#comment_error").text('评论成功');            }else{                // 显示错误信息                $("#comment_error").text(data['message']);            }        },        error: function(xhr){            console.log(xhr);        }    });    return false;});

3.增加评论框的placeholder效果

　　其实ueditor在配置好评论框后，是没有类似input框的placeholder效果的，要实现这一功能可能需要自己实现，原理上也是使用ueditor的API来进行编写的。当用户没有点击评论框，此时进入失焦效果，此时评论框内的内容就是自己编写好的文字，只要用户点击评论框，进入focus效果，此时的内容则为空。

UE.Editor.prototype.placeholder = function (justPlainText) {    var _editor = this;    _editor.addListener("focus", function () {        var localHtml = _editor.getPlainTxt();        if ($.trim(localHtml) === $.trim(justPlainText)) {            _editor.setContent(" ");        }    });    _editor.addListener("blur", function () {        var localHtml = _editor.getContent();        if (!localHtml) {            //_editor.setContent("" + justPlainText + "");            _editor.setContent("" + justPlainText + "");        }    });    _editor.ready(function () {        _editor.fireEvent("blur");    });};$(window).load(function () {    id_text.placeholder("让评论多一点真诚，少一点套路~");});

　　当然如果仅仅是这样子，可能还会出现bug，因为这里的placeholder并不是真正与input的placeholder效果一样，只是失焦时自动填写了确定的内容而已。所以我在submit提交代码中添加了这么一个判断语句。

if(id_text.getContent().includes("让评论多一点真诚，少一点套路~") ){    $("#comment_error").text('您尚未写任何评论内容');    return false;}

　　原文出处：，文章的更新编辑以此链接为准。欢迎关注源站文章！