django添加富文本编辑器ckediotr的方法

以Mxonline3代码为例 下载地址

项目启动

::新建虚拟环境
virtualenv env  

::激活虚拟环境
cd env
cd Scripts
activate
cd ..
cd ..

::安装依赖包
pip install -r requirement.txt  

::创建数据库
python manage.py  makemigratios   
python manage.py migrate
python manage.py runserver

• 添加课程信息 –> 评论 查看效果展示

添加ckeditor的方法

pip install django-ckeditor

• settings.py配置

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'users',
    'courses',
    'operation',
    'organization',
    'xadmin',
    'crispy_forms',
    'captcha',
    'pure_pagination',
    'DjangoUeditor',
    'ckeditor',           # add
    'ckeditor_uploader',  # add
]

#ckeditor

CKEDITOR_UPLOAD_SLUGIFY_FILENAME = False
CKEDITOR_JQUERY_URL = 'http://libs.baidu.com/jquery/2.0.3/jquery.min.js'
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_UPLOAD_SLUGIFY_FILENAME = True
CKEDITOR_UPLOAD_PATH = "image_upload/"


# config ckeditor
CKEDITOR_CONFIGS = {
    'default': {
        'skin':'moono',
        'language': 'zh-cn',
        'toolbar': (
            ['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
            ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
            ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
            ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
            ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
            ['Link', 'Unlink', 'Anchor'],
            ['Image','Update',  'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', ],
            ['Styles', 'Format', 'Font', 'FontSize'],
            ['TextColor', 'BGColor'],
            ['Maximize', 'ShowBlocks', '-', 'About', 'pbckcode'],
        ),

        'height': 700,
        'width': 800,
        'filebrowserWindowWidth': 940,
        'filebrowserWindowHeight': 725,
        'tabSpaces': 4,
        'extraPlugins': ','.join(
            [
                # your extra plugins here
                'div',
                'autolink',
                'autoembed',
                'embedsemantic',
                'autogrow',
                # 'devtools',
                'widget',
                'lineutils',
                'clipboard',
                'dialog',
                'dialogui',
                'elementspath'
            ]),
    }
}

• urls.py

from django.conf.urls import include, url  #add
# 富文本相关url
url(r'^ckeditor/', include('ckeditor_uploader.urls')), #add

• operatios.py 后台引入model数据类型

from ckeditor_uploader.fields import RichTextUploadingField

# 用户对于课程评论
class CourseComments(models.Model):

    # 会涉及两个外键: 1. 用户， 2. 课程。import进来
    course = models.ForeignKey(Course, on_delete=models.CASCADE, verbose_name=u"课程")
    user = models.ForeignKey(UserProfile, on_delete=models.CASCADE, verbose_name=u"用户")
    comments =  RichTextUploadingField("评论")
    add_time = models.DateTimeField(default=datetime.now, verbose_name=u"评论时间")

    class Meta:
        verbose_name = u"课程评论"
        verbose_name_plural = verbose_name

    def __str__(self):
        return '用户({0})对于《{1}》 评论 :'.format(self.user, self.course)

更新数据库
python manage.py  makemigratios   
python manage.py migrate

修改评论的方法

1. 前端
   
   • 从官网上选择所需的js样式添加到要显示的前端页面，并加上一些js逻辑代码

{% block ckeditor_custom_js %}
        <script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
{% endblock %}

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
    </head>  
    <textarea cols="80" id="Text" name="Text" rows="20">这里是默认值，修改文本的内容是放在这里。html需要进行HTMLEncode编码</textarea>   
     <script type="text/javascript">   
     var editor = CKEDITOR.replace('Text');   

    function OnSave(){  
            if(CKEDITOR.instances.Text.getData()==""){  
            alert("内容不能为空！");  
            return false;  
            }else {  
            alert (CKEDITOR.instances.Text.getData());  
            }  
        }  
</script>  


<div class="wgt-ipt-wrap pub-editor-wrap " id="js-pl-input-fake">
    <textarea  name="Text"  id="Text" class="" placeholder="扯淡、吐槽、表扬、鼓励……想说啥就说啥！" ></textarea>
</div>


<script>
        CKEDITOR.replace( 'Text' );
</script>



<script type="text/javascript">
    //添加评论
    $('#js-pl-submit').on('click', function(){
        var comments = CKEDITOR.instances.Text.getData()
        if(comments == ""){
            alert("评论不能为空")
            return
        }
        $.ajax({
            cache: false,
            type: "POST",
            url:"{% url 'course:add_comment' %}",
            data:{'course_id':{{ course.id }}, 'comments':comments},
            async: true,
            beforeSend:function(xhr, settings){
                xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
            },
            success: function(data) {
                if(data.status == 'fail'){
                    if(data.msg == '用户未登录'){
                        window.location.href="{% url 'login' %}";
                    }else{
                        alert(data.msg)
                    }

                }else if(data.status == 'success'){
                    window.location.reload();//刷新当前页面.
                }
            },
        });
    });

</script>
{% endblock %}

function OnSave()及需要进行获取的函数,正常页面元素取值方式，本文不适应，要通过CKEDITOR的api

CKEDITOR.instances.Text.getData（）      

Text是指textarea的name

1. 后端

ajax方式添加评论,view函数

class AddCommentsView(View):
    def post(self, request):
        if not request.user.is_authenticated:
            # 未登录时返回json提示未登录，跳转到登录页面是在ajax中做的
            return HttpResponse('{"status":"fail", "msg":"用户未登录"}', content_type='application/json')
        course_id = request.POST.get("course_id", 0)
        comments = request.POST.get("comments", "")
        if int(course_id) > 0 and comments:
            course_comments = CourseComments()
            # get只能取出一条数据，如果有多条抛出异常。没有数据也抛异常
            # filter取一个列表出来，queryset。没有数据返回空的queryset不会抛异常
            course = Course.objects.get(id = int(course_id))
            # 外键存入要存入对象
            course_comments.course = course
            course_comments.comments = comments
            course_comments.user = request.user
            course_comments.save()
            return HttpResponse('{"status":"success", "msg":"评论成功"}', content_type='application/json')
        else:
            return HttpResponse('{"status":"fail", "msg":"评论失败"}', content_type='application/json')

发现的问题：
评论格式由纯文本变为富文本而富文本在显示的时候会由于渲染html标签导致页面排版失败。

<div> <p class="cnt">{{ comment.comments |safe  }} </p> </div>

按如下格式更改即可，当然pre格式要微调一下，改改边距

<div> <pre class="cnt">{{ comment.comments |safe  }} </pre> </div>