資訊專欄INFORMATION COLUMN
摘要：后面兩個編輯器自帶，不用多帶帶下載，添上就可以了添加相關(guān)插件這樣就完成了代碼高亮效果不錯在前臺使用為了讓用戶在前臺也能使用富文本編輯器，還得對代碼稍加改動。對于有些不喜歡的人來說，甚至可以連博文都使用提供的富文本編輯器。
前面我們已經(jīng)實現(xiàn)了用Markdown語法寫文章了。但是文章的評論用Markdown就不太合適了，你不能強求用戶也花時間去熟悉語法啊。另外評論中通常還有表情、帶顏色的字體等功能，這些也是Markdown不具備的。
因此富文本編輯器Django-ckeditor就派上用場了。
在后臺使用Ckeditor在虛擬環(huán)境中安裝django-ckeditor：
(env) > pip install django-ckeditor
安裝成功后還是老規(guī)矩，在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()
...
記得每次修改模型后要遷移數(shù)據(jù)：
(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)
啟動服務(wù)器，進入后臺的評論頁面，發(fā)現(xiàn)已經(jīng)可以使用django-ckeditor了：
功能相當齊全，字體、字號、顏色、鏈接、表情應(yīng)有盡有。
如果我只需要部分功能怎么辦呢？比如插入flash動畫基本就用不到。另外似乎也沒看到插入代碼塊的功能。
ckeditor允許你在settings.py中進行自定義配置：
my_blog/settings.py
...
CKEDITOR_CONFIGS = {
# django-ckeditor默認使用default配置
"default": {
# 編輯器寬度自適應(yīng)
"width":"auto",
"height":"250px",
# tab鍵轉(zhuǎn)換空格數(shù)
"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過濾器，防止瀏覽器進行轉(zhuǎn)義。
修改detail.html中展示評論的部分代碼：
templates/article/detail.html ...共有{{ comments.count }}條評論
{% for comment in comments %} ......{{ comment.body|safe }}{% endfor %}
進入文章詳情頁面看看效果：
代碼高亮代碼高亮需要添加額外的插件Prism。在Prism插件官方頁面下載（也可以點擊這里直接下載）后，將解壓出來的prism放到envLibsite-packagesckeditorstaticckeditorckeditorplugins目錄下。注意env是你創(chuàng)建的虛擬環(huán)境的目錄。
之前你安裝的所有庫都在這個env目錄中的。
然后在Prism官網(wǎng)選擇主題：
根據(jù)喜好選擇一個喜歡的主題
然后選擇需要高亮的語言。不清楚就可以全選
勾選行號插件
最后點擊DOWNLOAD CSS下載樣式
在static目錄中新建prism目錄，將下載好的CSS文件放進去。
注意這里的static是項目中的靜態(tài)文件目錄（與前面的章節(jié)相同），而不是env文件夾中的static目錄。
然后在需要代碼高亮的模板文件中引用prism的靜態(tài)文件，對代碼進行渲染：
templates/article/detail.html ... ...
將Prism、widget、lineutils插件添加到配置文件中。后面兩個編輯器自帶，不用多帶帶下載，添上就可以了：
my_blog/settings.py
...
CKEDITOR_CONFIGS = {
"default": {
...
# 添加 Prism 相關(guān)插件
"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原來評論表單中的正文部分（即前面章節(jié)寫的 -->
{{ comment_form.media }}
{{ comment_form.body }}
其中的comment_form.media是編輯器自身的渲染代碼，comment_form.body則是評論正文字段。
看看效果：
不錯，編輯器已經(jīng)可以正常使用了，但還有一個小問題：似乎編輯器寬度沒有自適應(yīng)，右邊大片白白的空間也太浪費了。繼續(xù)努力。
寬度自適應(yīng)首先在配置文件中將寬度設(shè)置為auto，這一步我們已經(jīng)做好了。
Ckeditor編輯器本身有一個inline-block的樣式，阻礙了自適應(yīng)效果，需要用Jquery語法將其清除掉。在詳情頁面底部加入代碼：
templates/article/detail.html
...
{% endblock content %}
$符號代表Jquery語句。這句的意思是：找到頁面中class="django-ckeditor-widget"的容器，然后刪除這個容器的style屬性。
看似沒什么問題，然而Bug藏在細節(jié)中。注意這是個Jquery語句，那么就要求運行之前先載入Jquery.js。然而在渲染頁面時，包含$語句的{% block content %}會插入到base.html模板的Jquery.js標簽的前面，導(dǎo)致語句不會生效，并且控制臺會報出$ 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代碼都采取這種方法插入。
刷新頁面，編輯器就能夠?qū)挾茸赃m應(yīng)了：
發(fā)表含有代碼塊的評論，詳情頁面的顯示如下：
總結(jié)現(xiàn)在，博文和其評論都可以漂亮的排版了。對于有些不喜歡Markdown的人來說，甚至可以連博文都使用django-cdeditor提供的富文本編輯器。我自己還是傾向用Markdown寫文章：寫作效率比好看更重要，并且主流網(wǎng)站幾乎都支持Markdown，多平臺發(fā)稿很方便。
有疑問請在杜賽的個人網(wǎng)站留言，我會盡快回復(fù)。
或Email私信我：dusaiphoto@foxmail.com
項目完整代碼：Django_blog_tutorial
感謝Aaron Zhao 的個人博客提供了本文的參考。博主還講解了django-ckeditor上傳圖片的設(shè)置，有興趣可以前往了解。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/43417.html
摘要：現(xiàn)在我們的博客已經(jīng)具有評論功能了。處理請求處理其他請求僅接受請求。前面寫視圖的時候，二級評論提交成功后會返回，回調(diào)函數(shù)接收到這個信號后，就會調(diào)用方法，刷新當前的父頁面即文章所在的頁面，實現(xiàn)了數(shù)據(jù)的更新。 現(xiàn)在我們的博客已經(jīng)具有評論功能了。隨著文章的評論者越來越多，有的時候評論者之間也需要交流，甚至部分評論還能合并成一個小的整體。因此最好是有某種方法可以將相關(guān)的評論聚集到一起，這時候多級...
摘要：一些表單界面元素文本框或復(fù)選框非常簡單并內(nèi)置在中，而其他會復(fù)雜些像彈出日期選擇等操作控件。和標簽中的屬性指定了當前文本框提交的數(shù)據(jù)的名稱，它必須與表單類中的字段名稱對應(yīng)，否則服務(wù)器無法將字段和數(shù)據(jù)正確的對應(yīng)起來。 前面我們已經(jīng)學會如何用Markdown語法書寫文章了。 但是還有問題呀。之前寫文章都是在后臺中進行的，萬一有別的普通用戶也要發(fā)表文章怎么辦？萬一我想拓展些后臺中沒有的提交驗證...
摘要：語法支持再次打開文件，在文件的最后添加指明了使用語法標記，做了兩個拓展，其中表示支持語法高亮，包含的特性請參見相關(guān)文檔。語法高亮支持注意這一步必須在安裝完主題之后。 目前網(wǎng)上搭建個人博客的方案很多，雖然使用諸如 Wordpress ( PHP )、Hexo ( Node.js ) 等可以方便快速地搭建一款功能齊全的高性能個人博客，但是本文將嘗試一種更為小眾化的方案 —— 一款基于 dj...
摘要：選擇該頁面綁定的標簽指定圖片上傳處理目錄注其中為了顯示為中文，標明了中文，同時需要下載語言包放到對應(yīng)的文件夾下。 前言 我們常因為django的自帶admin后臺功能而選擇該框架，但也因為其自動生成的特殊性而在做出特別的更改的時候束手束腳，鑒于項目已經(jīng)采用了django，而后臺要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...
摘要：選擇該頁面綁定的標簽指定圖片上傳處理目錄注其中為了顯示為中文，標明了中文，同時需要下載語言包放到對應(yīng)的文件夾下。 前言 我們常因為django的自帶admin后臺功能而選擇該框架，但也因為其自動生成的特殊性而在做出特別的更改的時候束手束腳，鑒于項目已經(jīng)采用了django，而后臺要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...
閱讀 793·2021-11-11 16:54
閱讀 1529·2021-08-24 10:01
閱讀 1916·2019-08-30 15:54
閱讀 3302·2019-08-29 14:02
閱讀 3137·2019-08-28 18:22
閱讀 2250·2019-08-28 18:09
閱讀 3710·2019-08-26 10:26
閱讀 2674·2019-08-23 18:23
