【小白实战】利用django2.0,搭建属于自己的博客(18)


发布时间:2019-02-15 13:08    作者: Uncle Hui   已过去:1 年,5 月   阅读总量:361 已被赞:0


评论框改为富文本编辑器:

前面我们已经顺利实现了后端文章编辑使用富文本功能了,效果很不错的!,那么前端评论框可以使用富文本?答案是肯定的,先来看看效果吧:

实现过程:

修改评论表单,前端评论框不能再有html直接生成了,需要使用form来渲染:

from django import forms
from ckeditor.widgets import CKEditorWidget

class CommentForm(forms.Form):
    text = forms.CharField(label='评论',min_length=3,max_length=200,widget=CKEditorWidget(config_name='qianduan_ckeditor',attrs={'class':'form-control'}))
    post_title = forms.CharField(widget=forms.HiddenInput())
    comment_author=forms.CharField(widget=forms.HiddenInput())

HiddenInput()  隐藏输入框!

 

config_name='qianduan_ckeditor'  为了区别后台的编辑器配置,给前端编辑器另外取一个名字

settings.py

#富文本选项(非必要)
CKEDITOR_CONFIGS = {
    'default': {
        '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','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
         ['Styles','Format','Font','FontSize'],
         ['TextColor','BGColor'],
         ['Maximize','ShowBlocks','-','About', 'pbckcode'],
      ),
   },
    'qianduan_ckeditor':{}  #空大括号就是默认经典配置,前端足够了
}

post_read.html 

 <form method="post" action="{% url 'comment_post' %}">
  {% csrf_token %}
  <div class="form-group" >
    <label for="exampleInputText">欢迎你:{{ user.username }}</label>
{{ content_form }}
  </div>
  <button type="submit" class="btn btn-default"> 提交评论</button>
  </form>

前端开头引入:

{% block head %}
 <script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
 <script type="text/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js'%}"></script>
{% endblock %}

 

Ok 了!更多请参考 http://www.hui2017.top/p/10

点赞

0




登陆后方可评论