摘要：后面两个编辑器自带，不用多带带下载，添上就可以了添加相关插件这样就完成了代码高亮效果不错在前台使用为了让用户在前台也能使用富文本编辑器，还得对代码稍加改动。对于有些不喜欢的人来说，甚至可以连博文都使用提供的富文本编辑器。
前面我们已经实现了用Markdown语法写文章了。但是文章的评论用Markdown就不太合适了，你不能强求用户也花时间去熟悉语法啊。另外评论中通常还有表情、带颜色的字体等功能，这些也是Markdown不具备的。
因此富文本编辑器Django-ckeditor就派上用场了。
在后台使用Ckeditor在虚拟环境中安装django-ckeditor：
(env) > pip install django-ckeditor
安装成功后还是老规矩，在settings.py中注册app：
my_blog/settings.py
...
INSTALLED_APPS = [
...
"ckeditor",
...
]
...
接下来需要修改模型了。用django-ckeditor库自己的富文本字段RichTextField替换普通的文本字段TextField：
comment/models.py
...
# django-ckeditor
from ckeditor.fields import RichTextField
class Comment(models.Model):
...
# 之前为 body = models.TextField()
body = RichTextField()
...
记得每次修改模型后要迁移数据：
(env) > python manage.py makemigrations (env) > python manage.py migrate
为方便测试，修改comment/admin.py文件，将评论模块注册到后台中：
comment/admin.py from django.contrib import admin from .models import Comment admin.site.register(Comment)
启动服务器，进入后台的评论页面，发现已经可以使用django-ckeditor了：
功能相当齐全，字体、字号、颜色、链接、表情应有尽有。
如果我只需要部分功能怎么办呢？比如插入flash动画基本就用不到。另外似乎也没看到插入代码块的功能。
ckeditor允许你在settings.py中进行自定义配置：
my_blog/settings.py
...
CKEDITOR_CONFIGS = {
# django-ckeditor默认使用default配置
"default": {
# 编辑器宽度自适应
"width":"auto",
"height":"250px",
# tab键转换空格数
"tabSpaces": 4,
# 工具栏风格
"toolbar": "Custom",
# 工具栏按钮
"toolbar_Custom": [
# 表情 代码块
["Smiley", "CodeSnippet"],
# 字体风格
["Bold", "Italic", "Underline", "RemoveFormat", "Blockquote"],
# 字体颜色
["TextColor", "BGColor"],
# 链接
["Link", "Unlink"],
# 列表
["NumberedList", "BulletedList"],
# 最大化
["Maximize"]
],
# 加入代码块插件
"extraPlugins": ",".join(["codesnippet"]),
}
}
在toolbar_Custom中定义需要使用的功能模块；没列出的功能就不再显示了。代码块功能是编辑器自带的插件，需要在extraPlugins中指定使用。效果如下：
编辑富文本搞定后，还需要在前台界面中展示出来。富文本是以类似html的格式进行保存的，因此还要在展示评论的代码加入|safe过滤器，防止浏览器进行转义。
修改detail.html中展示评论的部分代码：
templates/article/detail.html ...共有{{ comments.count }}条评论
{% for comment in comments %} ......{{ comment.body|safe }}{% endfor %}
进入文章详情页面看看效果：
代码高亮代码高亮需要添加额外的插件Prism。在Prism插件官方页面下载（也可以点击这里直接下载）后，将解压出来的prism放到envLibsite-packagesckeditorstaticckeditorckeditorplugins目录下。注意env是你创建的虚拟环境的目录。
之前你安装的所有库都在这个env目录中的。
然后在Prism官网选择主题：
根据喜好选择一个喜欢的主题
然后选择需要高亮的语言。不清楚就可以全选
勾选行号插件
最后点击DOWNLOAD CSS下载样式
在static目录中新建prism目录，将下载好的CSS文件放进去。
注意这里的static是项目中的静态文件目录（与前面的章节相同），而不是env文件夹中的static目录。
然后在需要代码高亮的模板文件中引用prism的静态文件，对代码进行渲染：
templates/article/detail.html ... ...
将Prism、widget、lineutils插件添加到配置文件中。后面两个编辑器自带，不用多带带下载，添上就可以了：
my_blog/settings.py
...
CKEDITOR_CONFIGS = {
"default": {
...
# 添加 Prism 相关插件
"extraPlugins": ",".join(["codesnippet", "prism", "widget", "lineutils"]),
}
}
这样就完成了：
代码高亮效果不错！
在前台使用Ckeditor为了让用户在前台也能使用富文本编辑器，还得对代码稍加改动。
首先需要把评论的表单传递到文章详情页面中。因此修改article_detail视图：
article/views.py
...
# 引入评论表单
from comment.forms import CommentForm
...
# 文章详情
def article_detail(request, id):
...
# 引入评论表单
comment_form = CommentForm()
context = {
...
"comment_form": comment_form,
}
...
然后将detail.html原来评论表单中的正文部分（即前面章节写的 -->
{{ comment_form.media }}
{{ comment_form.body }}
其中的comment_form.media是编辑器自身的渲染代码，comment_form.body则是评论正文字段。
看看效果：
不错，编辑器已经可以正常使用了，但还有一个小问题：似乎编辑器宽度没有自适应，右边大片白白的空间也太浪费了。继续努力。
宽度自适应首先在配置文件中将宽度设置为auto，这一步我们已经做好了。
Ckeditor编辑器本身有一个inline-block的样式，阻碍了自适应效果，需要用Jquery语法将其清除掉。在详情页面底部加入代码：
templates/article/detail.html
...
{% endblock content %}
$符号代表Jquery语句。这句的意思是：找到页面中class="django-ckeditor-widget"的容器，然后删除这个容器的style属性。
看似没什么问题，然而Bug藏在细节中。注意这是个Jquery语句，那么就要求运行之前先载入Jquery.js。然而在渲染页面时，包含$语句的{% block content %}会插入到base.html模板的Jquery.js标签的前面，导致语句不会生效，并且控制台会报出$ is not defined的错误。
比较容易想到的办法是将引入Jquery.js的标签提到更顶部的位置，在block模板插入前就加载。这样做的问题是JS文件加载通常较慢，它会阻塞后面的代码，从而减缓页面整体加载速度。本文不采用这种办法。
解决方案是在base.html中新增专门用于拼接JavaScript脚本的位置，命名为{% block script %}。注意它必须放置在Jquery标签的后面：
templates/base.html
...
...
...
{% block script %}{% endblock script %}
然后将detail.html中的JS代码放到这个块中：
templates/article/detail.html
...
{% block script %}
{% endblock script %}
这种方法可以灵活的定义JS脚本的运行顺序，并且代码看起来更加整洁。推荐所有的JS代码都采取这种方法插入。
刷新页面，编辑器就能够宽度自适应了：
发表含有代码块的评论，详情页面的显示如下：
总结现在，博文和其评论都可以漂亮的排版了。对于有些不喜欢Markdown的人来说，甚至可以连博文都使用django-cdeditor提供的富文本编辑器。我自己还是倾向用Markdown写文章：写作效率比好看更重要，并且主流网站几乎都支持Markdown，多平台发稿很方便。
有疑问请在杜赛的个人网站留言，我会尽快回复。
或Email私信我：dusaiphoto@foxmail.com
项目完整代码：Django_blog_tutorial
感谢Aaron Zhao 的个人博客提供了本文的参考。博主还讲解了django-ckeditor上传图片的设置，有兴趣可以前往了解。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/43417.html
摘要：现在我们的博客已经具有评论功能了。处理请求处理其他请求仅接受请求。前面写视图的时候，二级评论提交成功后会返回，回调函数接收到这个信号后，就会调用方法，刷新当前的父页面即文章所在的页面，实现了数据的更新。 现在我们的博客已经具有评论功能了。随着文章的评论者越来越多，有的时候评论者之间也需要交流，甚至部分评论还能合并成一个小的整体。因此最好是有某种方法可以将相关的评论聚集到一起，这时候多级...
摘要：一些表单界面元素文本框或复选框非常简单并内置在中，而其他会复杂些像弹出日期选择等操作控件。和标签中的属性指定了当前文本框提交的数据的名称，它必须与表单类中的字段名称对应，否则服务器无法将字段和数据正确的对应起来。 前面我们已经学会如何用Markdown语法书写文章了。 但是还有问题呀。之前写文章都是在后台中进行的，万一有别的普通用户也要发表文章怎么办？万一我想拓展些后台中没有的提交验证...
摘要：语法支持再次打开文件，在文件的最后添加指明了使用语法标记，做了两个拓展，其中表示支持语法高亮，包含的特性请参见相关文档。语法高亮支持注意这一步必须在安装完主题之后。 目前网上搭建个人博客的方案很多，虽然使用诸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齐全的高性能个人博客，但是本文将尝试一种更为小众化的方案 —— 一款基于 dj...
摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。 前言 我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...
摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。 前言 我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...
阅读 566·2021-11-11 16:54
阅读 1383·2021-08-24 10:01
阅读 1742·2019-08-30 15:54
阅读 3135·2019-08-29 14:02
阅读 3015·2019-08-28 18:22
阅读 2142·2019-08-28 18:09
阅读 3484·2019-08-26 10:26
阅读 2538·2019-08-23 18:23
