文档章节

我的网站搭建 (第22天) 改写评论框样式

代码打碟手
 代码打碟手
发布于 01/04 16:59
字数 1352
阅读 32
收藏 0

一、前言

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

二、改写评论表单文件

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

from django import forms
from django.contrib.contenttypes.models import ContentType
from django.db.models import ObjectDoesNotExist
from ckeditor.widgets import CKEditorWidget
from DjangoUeditor.widgets import UEditorWidget
from .models import Comment


class 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文件

<script type="text/javascript" charset="utf-8" src="{% static 'ueditor/ueditor.config.js' %}"></script>
<script type="text/javascript" charset="utf-8" src="https://ueditor.baidu.com/ueditor/ueditor.all.min.js"> </script>

    2.改写评论表单submit代码

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

// 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 = '<div id="root_{0}" class="comment">' +
                        '<span>{1}</span>' +
                        '<span>({2}):</span>' +
                        '<div id="comment_{0}">{3}</div>' +
                        '<div class="like" onclick="likeChange(this, \'{4}\', {0})">' +
                            '<span class="glyphicon glyphicon-thumbs-up"></span> ' +
                            '<span class="liked-num">0</span>' +
                        '</div>' +
                        '<a href="javascript:reply({0});">回复</a>' +
                        '</div>';
                    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 = '<div class="reply">' +
                                '<span>{1}</span>' +
                                '<span>({2})</span>' +
                                '<span>回复</span>' +
                                '<span>{3}:</span>' +
                                '<div id="comment_{0}">{4}</div>' +
                                '<div class="like" onclick="likeChange(this, \'{5}\', {0})">' +
                                    '<span class="glyphicon glyphicon-thumbs-up\"></span> ' +
                                    '<span class="liked-num">0</span>' +
                                '</div>' +
                                '<a href="javascript:reply({0});">回复</a>' +
                            '</div>';
                    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("<span>" + justPlainText + "</span>");
            _editor.setContent("<span style="+"color:#999;"+ ">" + justPlainText + "</span>");
        }
    });
    _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;
}

原文出处:https://jzfblog.com/detail/145,文章的更新编辑以此链接为准。欢迎关注源站文章!

© 著作权归作者所有

代码打碟手
粉丝 41
博文 68
码字总数 119776
作品 0
宁波
程序员
私信 提问
我的网站搭建 (第21天) 评论功能设计

一、前言 为什么一直拖着评论功能到现在才开始准备写,确实因为最近较忙,而且评论功能确实也不好写。之前,我上网查了很久,大概的方法总结起来有下面三个。 方法一:第三方社会化评论插件,...

代码打碟手
01/04
108
0
为 Pelican 博客添加 GitTalk 评论系统 - 知乎

我的个人站点的本文链接:https://blog.cycleuser.org/wei-pelicanjia-gittalkping-lun-xi-tong.html 我一直在使用 Pelican 来写博客,而没有使用 Hexo。 一来 Pelican 是 Python 的,我还是...

Python学习之路
昨天
0
0
蝉知企业门户系统 5.3.3 正式版发布

蝉知企业门户系统 5.3.3 正式版发布了。 蝉知企业门户系统是由业内资深开发团队开发的一款专向企业营销使用的企业门户系统,企业使用蝉知系统可以非常方便地搭建一个专业的企业营销网站,进行...

it1000001001
2016/06/27
2.3K
14
用ISSO自建静态博客的评论系统

自从多说倒闭之后,静态博客的博主们就比较难受了——没有评论的博客,如死水一潭,了无生机。 有人迅速切换到了网易云跟帖,结果不久就传来也要关门的消息;倒是友言还在苟延残喘,我前段时...

weishu
2017/08/30
0
0
用户自定义多选框checkbox

在实际项目开发中,浏览器自带的checkbox样式以及选择项是远远无法满足需求的,在实际项目中,需求往往可能是这样:被设计好样式的checkbox以及多选项只能保持两个或其他不超过某个固定数。那...

会写代码的husky
2016/12/13
90
0

没有更多内容

加载失败,请刷新页面

加载更多

一起来学Java8(三)——方法引用

在一起来学Java8(一)——函数式编程中有一个简单的函数式编程的例子: import java.util.function.Consumer;class Person { public static void sayHello(String name) { S...

猿敲月下码
19分钟前
9
0
读书笔记:深入理解ES6(十一)

第十一章 Promise与异步编程   Promise可以实现其他语言中类似Future和Deferred一样的功能,是另一种异步编程的选择,它既可以像事件和回调函数一样指定稍后执行的代码,也可以明确指示代码...

张森ZS
43分钟前
16
0
面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
51分钟前
28
0
Elasticsearch 实战(一) - 简介

官腔 Elasticsearch,分布式,高性能,高可用,可伸缩的搜索和分析系统 基本等于没说,咱们慢慢看 1 概述 百度:我们比如说想找寻任何的信息的时候,就会上百度去搜索一下,比如说找一部自己喜...

JavaEdge
55分钟前
22
0
【jQuery基础学习】11 jQuery性能简单优化

本文转载于:专业的前端网站➦【jQuery基础学习】11 jQuery性能简单优化 关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继...

前端老手
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部