在最新學習python中，使用django搭建博客系統，管理后臺直接使用django自帶的admin模塊，所以遇到富文本編輯的問題，經過查閱資料，發(fā)現了django-ckeditor這個小插件，下面小威就分享一點點來自小白的經驗吧~
首先安裝django-ckeditor
pip install django-ckeditor
其次，需要安裝pillow（pillow是python的一個圖形處理庫，此次用到的django-ckeditor需要依賴此庫）
pip install pillow
安裝好后，就是要進行django的配置，大致配置步驟如下：
- 在settings.py文件中，將“ckeditor”和“ckeditor_uploader”加入到“INSTALLED_APPS”中
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog.apps.BlogConfig',
'ckeditor',
'ckeditor_uploader'
]
- 在settings.py中配置“CKEDITOR_UPLOAD_PATH
MEDIA_URL = '/'
CKEDITOR_UPLOAD_PATH = 'static/upload/article_images'
CKEDITOR_IMAGE_BACKEND = 'pillow'
- 如果在富文本編輯框里有代碼高亮等其他自定義的功能，還需要在settings.py里配置“CKEDITOR_CONFIGS”的配置項
CKEDITOR_CONFIGS = {
'default': {
'toolbar': (['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat', '-', 'Maximize',
'ShowBlocks', '-', "CodeSnippet", 'Subscript', 'Superscript'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
'HiddenField'],
['Bold', 'Italic', 'Underline', 'Strike', '-'],
['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'],
),
'extraPlugins': 'codesnippet',
}
}
- 在urs.py中增加ckeditor的url配置
from django.urls import path,include,re_path
urlpatterns = [
url(r'^ckeditor/',include('ckeditor_uploader.urls'))
]
這里的話，我所有上傳的圖片文件保存路徑都是在static目錄下的，附帶再貼下我靜態(tài)資源加載的目錄配置吧，大概修改了兩個文件：
修改settings.py：
STATIC_URL = '/static/'
STATIC_ROOT = 'static'
在urls.py中的“urlpatterns”添加配置：
from django.views import static
from django.conf import settings
urlpatterns = [
url(r'^static/(?P<path>.*)$',static.serve,
{'document_root':settings.STATIC_ROOT},name='static'),
]
以上配置中，“CKEDITOR_UPLOAD_PATH”主要是設置通過ckeditor上傳的圖片所存放的目錄，這里的路徑是一個相對路徑喲，相對于設置的“MEDIA_URL”。這塊有啥具體問題建議還是可以前往django官方文檔查看喲~
至此，我們的配置已經完成了，那接下來我們是不是可以愉快的是用了呢？恭喜你，打錯了~~~
在我們配置完成后，需要在于manage.py的目錄下使用命令運行“manage.py collectstatic”，將ckeditor的靜態(tài)資源下載到項目工程下。
ok~做完以上，就可以愉快的玩耍了。
- 首先在模型里先引入：from ckeditor_uploader.fields import RichTextUploadingField（此處需要注意的是，ckeditor.fields.RichTextUploadingField是不能上傳圖片的）
- 然后把你需要是富文本的字段修改下即可，如：content = RichTextUploadingField(verbose_name='內容')
from ckeditor_uploader.fields import RichTextUploadingField
class Article(models.Model):
#content = models.TextField(verbose_name='內容')
content = RichTextUploadingField(verbose_name='內容')
至此，啟動應用，就可以看到原本內容的文本輸入框變成了富文本編輯框，腫么樣，雞不雞凍~~
寫在最后，使用ckeditor編輯的內容在前端顯示的時候，需要再頁面頭部引入js文件
<script src="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js' %}"></script>
如果需要代碼高亮的樣式，還需首先引入css樣式文件
<link rel="stylesheet" href="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css' %}">
然后再引入js文件：
<script src="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js' %}"></script>
最后在script標簽寫入如下js代碼
hljs.initHighlightingOnLoad();
但是僅此你還會發(fā)現前端顯示的是原始的html標簽，我們在變量中加入safe過濾就闊以啦~比如
{{content|safe}}
emmm到這里，小威的分享就結束了，還有神馬疑問的，歡迎給我留言喲，一起交流，共同進步喵，就是醬紫~
