資訊專欄INFORMATION COLUMN
摘要：后面兩個(gè)編輯器自帶，不用多帶帶下載，添上就可以了添加相關(guān)插件這樣就完成了代碼高亮效果不錯(cuò)在前臺(tái)使用為了讓用戶在前臺(tái)也能使用富文本編輯器，還得對(duì)代碼稍加改動(dòng)。對(duì)于有些不喜歡的人來(lái)說(shuō)，甚至可以連博文都使用提供的富文本編輯器。
前面我們已經(jīng)實(shí)現(xiàn)了用Markdown語(yǔ)法寫文章了。但是文章的評(píng)論用Markdown就不太合適了，你不能強(qiáng)求用戶也花時(shí)間去熟悉語(yǔ)法啊。另外評(píng)論中通常還有表情、帶顏色的字體等功能，這些也是Markdown不具備的。
因此富文本編輯器Django-ckeditor就派上用場(chǎng)了。
在后臺(tái)使用Ckeditor在虛擬環(huán)境中安裝django-ckeditor：
(env) > pip install django-ckeditor
安裝成功后還是老規(guī)矩，在settings.py中注冊(cè)app：
my_blog/settings.py
...
INSTALLED_APPS = [
...
"ckeditor",
...
]
...
接下來(lái)需要修改模型了。用django-ckeditor庫(kù)自己的富文本字段RichTextField替換普通的文本字段TextField：
comment/models.py
...
# django-ckeditor
from ckeditor.fields import RichTextField
class Comment(models.Model):
...
# 之前為 body = models.TextField()
body = RichTextField()
...
記得每次修改模型后要遷移數(shù)據(jù)：
(env) > python manage.py makemigrations (env) > python manage.py migrate
為方便測(cè)試，修改comment/admin.py文件，將評(píng)論模塊注冊(cè)到后臺(tái)中：
comment/admin.py from django.contrib import admin from .models import Comment admin.site.register(Comment)
啟動(dòng)服務(wù)器，進(jìn)入后臺(tái)的評(píng)論頁(yè)面，發(fā)現(xiàn)已經(jīng)可以使用django-ckeditor了：
功能相當(dāng)齊全，字體、字號(hào)、顏色、鏈接、表情應(yīng)有盡有。
如果我只需要部分功能怎么辦呢？比如插入flash動(dòng)畫基本就用不到。另外似乎也沒(méi)看到插入代碼塊的功能。
ckeditor允許你在settings.py中進(jìn)行自定義配置：
my_blog/settings.py
...
CKEDITOR_CONFIGS = {
# django-ckeditor默認(rèn)使用default配置
"default": {
# 編輯器寬度自適應(yīng)
"width":"auto",
"height":"250px",
# tab鍵轉(zhuǎn)換空格數(shù)
"tabSpaces": 4,
# 工具欄風(fēng)格
"toolbar": "Custom",
# 工具欄按鈕
"toolbar_Custom": [
# 表情 代碼塊
["Smiley", "CodeSnippet"],
# 字體風(fēng)格
["Bold", "Italic", "Underline", "RemoveFormat", "Blockquote"],
# 字體顏色
["TextColor", "BGColor"],
# 鏈接
["Link", "Unlink"],
# 列表
["NumberedList", "BulletedList"],
# 最大化
["Maximize"]
],
# 加入代碼塊插件
"extraPlugins": ",".join(["codesnippet"]),
}
}
在toolbar_Custom中定義需要使用的功能模塊；沒(méi)列出的功能就不再顯示了。代碼塊功能是編輯器自帶的插件，需要在extraPlugins中指定使用。效果如下：
編輯富文本搞定后，還需要在前臺(tái)界面中展示出來(lái)。富文本是以類似html的格式進(jìn)行保存的，因此還要在展示評(píng)論的代碼加入|safe過(guò)濾器，防止瀏覽器進(jìn)行轉(zhuǎn)義。
修改detail.html中展示評(píng)論的部分代碼：
templates/article/detail.html ...共有{{ comments.count }}條評(píng)論
{% for comment in comments %} ......{{ comment.body|safe }}{% endfor %}
進(jìn)入文章詳情頁(yè)面看看效果：
代碼高亮代碼高亮需要添加額外的插件Prism。在Prism插件官方頁(yè)面下載（也可以點(diǎn)擊這里直接下載）后，將解壓出來(lái)的prism放到envLibsite-packagesckeditorstaticckeditorckeditorplugins目錄下。注意env是你創(chuàng)建的虛擬環(huán)境的目錄。
之前你安裝的所有庫(kù)都在這個(gè)env目錄中的。
然后在Prism官網(wǎng)選擇主題：
根據(jù)喜好選擇一個(gè)喜歡的主題
然后選擇需要高亮的語(yǔ)言。不清楚就可以全選
勾選行號(hào)插件
最后點(diǎn)擊DOWNLOAD CSS下載樣式
在static目錄中新建prism目錄，將下載好的CSS文件放進(jìn)去。
注意這里的static是項(xiàng)目中的靜態(tài)文件目錄（與前面的章節(jié)相同），而不是env文件夾中的static目錄。
然后在需要代碼高亮的模板文件中引用prism的靜態(tài)文件，對(duì)代碼進(jìn)行渲染：
templates/article/detail.html ... ...
將Prism、widget、lineutils插件添加到配置文件中。后面兩個(gè)編輯器自帶，不用多帶帶下載，添上就可以了：
my_blog/settings.py
...
CKEDITOR_CONFIGS = {
"default": {
...
# 添加 Prism 相關(guān)插件
"extraPlugins": ",".join(["codesnippet", "prism", "widget", "lineutils"]),
}
}
這樣就完成了：
代碼高亮效果不錯(cuò)！
在前臺(tái)使用Ckeditor為了讓用戶在前臺(tái)也能使用富文本編輯器，還得對(duì)代碼稍加改動(dòng)。
首先需要把評(píng)論的表單傳遞到文章詳情頁(yè)面中。因此修改article_detail視圖：
article/views.py
...
# 引入評(píng)論表單
from comment.forms import CommentForm
...
# 文章詳情
def article_detail(request, id):
...
# 引入評(píng)論表單
comment_form = CommentForm()
context = {
...
"comment_form": comment_form,
}
...
然后將detail.html原來(lái)評(píng)論表單中的正文部分（即前面章節(jié)寫的 -->
{{ comment_form.media }}
{{ comment_form.body }}
其中的comment_form.media是編輯器自身的渲染代碼，comment_form.body則是評(píng)論正文字段。
看看效果：
不錯(cuò)，編輯器已經(jīng)可以正常使用了，但還有一個(gè)小問(wèn)題：似乎編輯器寬度沒(méi)有自適應(yīng)，右邊大片白白的空間也太浪費(fèi)了。繼續(xù)努力。
寬度自適應(yīng)首先在配置文件中將寬度設(shè)置為auto，這一步我們已經(jīng)做好了。
Ckeditor編輯器本身有一個(gè)inline-block的樣式，阻礙了自適應(yīng)效果，需要用Jquery語(yǔ)法將其清除掉。在詳情頁(yè)面底部加入代碼：
templates/article/detail.html
...
{% endblock content %}
$符號(hào)代表Jquery語(yǔ)句。這句的意思是：找到頁(yè)面中class="django-ckeditor-widget"的容器，然后刪除這個(gè)容器的style屬性。
看似沒(méi)什么問(wèn)題，然而Bug藏在細(xì)節(jié)中。注意這是個(gè)Jquery語(yǔ)句，那么就要求運(yùn)行之前先載入Jquery.js。然而在渲染頁(yè)面時(shí)，包含$語(yǔ)句的{% block content %}會(huì)插入到base.html模板的Jquery.js標(biāo)簽的前面，導(dǎo)致語(yǔ)句不會(huì)生效，并且控制臺(tái)會(huì)報(bào)出$ is not defined的錯(cuò)誤。
比較容易想到的辦法是將引入Jquery.js的標(biāo)簽提到更頂部的位置，在block模板插入前就加載。這樣做的問(wèn)題是JS文件加載通常較慢，它會(huì)阻塞后面的代碼，從而減緩頁(yè)面整體加載速度。本文不采用這種辦法。
解決方案是在base.html中新增專門用于拼接JavaScript腳本的位置，命名為{% block script %}。注意它必須放置在Jquery標(biāo)簽的后面：
templates/base.html
...
...
...
{% block script %}{% endblock script %}
然后將detail.html中的JS代碼放到這個(gè)塊中：
templates/article/detail.html
...
{% block script %}
{% endblock script %}
這種方法可以靈活的定義JS腳本的運(yùn)行順序，并且代碼看起來(lái)更加整潔。推薦所有的JS代碼都采取這種方法插入。
刷新頁(yè)面，編輯器就能夠?qū)挾茸赃m應(yīng)了：
發(fā)表含有代碼塊的評(píng)論，詳情頁(yè)面的顯示如下：
總結(jié)現(xiàn)在，博文和其評(píng)論都可以漂亮的排版了。對(duì)于有些不喜歡Markdown的人來(lái)說(shuō)，甚至可以連博文都使用django-cdeditor提供的富文本編輯器。我自己還是傾向用Markdown寫文章：寫作效率比好看更重要，并且主流網(wǎng)站幾乎都支持Markdown，多平臺(tái)發(fā)稿很方便。
有疑問(wèn)請(qǐng)?jiān)诙刨惖膫€(gè)人網(wǎng)站留言，我會(huì)盡快回復(fù)。
或Email私信我：[email protected]
項(xiàng)目完整代碼：Django_blog_tutorial
感謝Aaron Zhao 的個(gè)人博客提供了本文的參考。博主還講解了django-ckeditor上傳圖片的設(shè)置，有興趣可以前往了解。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/43417.html
摘要：現(xiàn)在我們的博客已經(jīng)具有評(píng)論功能了。處理請(qǐng)求處理其他請(qǐng)求僅接受請(qǐng)求。前面寫視圖的時(shí)候，二級(jí)評(píng)論提交成功后會(huì)返回，回調(diào)函數(shù)接收到這個(gè)信號(hào)后，就會(huì)調(diào)用方法，刷新當(dāng)前的父頁(yè)面即文章所在的頁(yè)面，實(shí)現(xiàn)了數(shù)據(jù)的更新。 現(xiàn)在我們的博客已經(jīng)具有評(píng)論功能了。隨著文章的評(píng)論者越來(lái)越多，有的時(shí)候評(píng)論者之間也需要交流，甚至部分評(píng)論還能合并成一個(gè)小的整體。因此最好是有某種方法可以將相關(guān)的評(píng)論聚集到一起，這時(shí)候多級(jí)...
摘要：一些表單界面元素文本框或復(fù)選框非常簡(jiǎn)單并內(nèi)置在中，而其他會(huì)復(fù)雜些像彈出日期選擇等操作控件。和標(biāo)簽中的屬性指定了當(dāng)前文本框提交的數(shù)據(jù)的名稱，它必須與表單類中的字段名稱對(duì)應(yīng)，否則服務(wù)器無(wú)法將字段和數(shù)據(jù)正確的對(duì)應(yīng)起來(lái)。 前面我們已經(jīng)學(xué)會(huì)如何用Markdown語(yǔ)法書寫文章了。 但是還有問(wèn)題呀。之前寫文章都是在后臺(tái)中進(jìn)行的，萬(wàn)一有別的普通用戶也要發(fā)表文章怎么辦？萬(wàn)一我想拓展些后臺(tái)中沒(méi)有的提交驗(yàn)證...
摘要：語(yǔ)法支持再次打開(kāi)文件，在文件的最后添加指明了使用語(yǔ)法標(biāo)記，做了兩個(gè)拓展，其中表示支持語(yǔ)法高亮，包含的特性請(qǐng)參見(jiàn)相關(guān)文檔。語(yǔ)法高亮支持注意這一步必須在安裝完主題之后。 目前網(wǎng)上搭建個(gè)人博客的方案很多，雖然使用諸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齊全的高性能個(gè)人博客，但是本文將嘗試一種更為小眾化的方案 —— 一款基于 dj...
摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...
摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...
閱讀 814·2021-11-11 16:54
閱讀 1557·2021-08-24 10:01
閱讀 1941·2019-08-30 15:54
閱讀 3324·2019-08-29 14:02
閱讀 3162·2019-08-28 18:22
閱讀 2273·2019-08-28 18:09
閱讀 3749·2019-08-26 10:26
閱讀 2688·2019-08-23 18:23
