Django-simditer富文本編輯器的使用

我們在博客?個人網站搭建（Day 4）— My second app：blog?中提及我們改用富文本編輯器來編輯博文，今天我們就介紹一下富文本編輯器 Django-simditer 的使用。

開始的時候，作者選擇的是使用 django-markdownx 來編寫博客，發現盡管markdown有著簡潔的語法等等有點，在頁面的排版等方面的支持不是很好，因此萌生了使用富文本編輯器來編輯博客的想法。

作者參考比較了 UEditor，KindEditor， django-ckeditor，django-simditer 等數種富文本編輯器，最后選擇的是 django-simditer 富文本編輯器，主要是配置比較簡單，基礎功能豐富且易于擴展。

參考博客：

django-simditor一個django的富文本編輯器?

Django后臺集成富文本編輯器simditor?

?

?django-simditer是一個封裝完成的庫，參考官網的資料很容易就能夠完成配置。而第二篇博文中介紹的是自己下載simditer源碼并且集成到后臺代碼，能夠更好地根據自己的需要修改。我們這里主要是介紹簡單的那種啦???? ???3??

simditer-github地址?

?

安裝步驟

1. 下載 django-simditer

pip install django-simditor

?

2. 修改 Blog 的模型

from django.db import models from simditor.fields import RichTextFieldclass Blog(models.Model):content = RichTextField()

?

3. Schnee/urls.py

urlpatterns = [url(r'^admin/', admin.site.urls),url(r'^simditor/', include('simditor.urls')) # 添加該行 ]

?

4. Schnee/settings.py

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','simditor'??# 將第三方庫simditer添加到installed_apps中 ]SIMDITOR_UPLOAD_PATH = 'uploads/' SIMDITOR_IMAGE_BACKEND = 'pillow'SIMDITOR_TOOLBAR = ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale','color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link','image', 'hr', '|', 'indent', 'outdent', 'alignment', 'fullscreen','markdown', 'emoji' ]SIMDITOR_CONFIGS = {'toolbar': SIMDITOR_TOOLBAR,'upload': {'url': '/simditor/upload/','fileKey': 'upload','image_size': 1024 * 1024 * 4 # max image size 4MB},'emoji': {'imagePath': '/static/simditor/images/emoji/'} }

?

通過以上四步就能夠完成 simditer 的配置了，效果如下，還是挺不錯滴

?

因為我們的博客是不支持前端編輯的，只能夠通過后臺管理進行編輯，因此我們不討論相關的表單顯示問題，詳細可參考 django-simditer 的 github 項目的 Readme 文檔。

?

---

?

highlight.js 實現代碼高亮

參考博客：?simditor + highlight.js實現代碼高亮

作為程序員的博客，自然是會經常插入代碼的啦，但是盡管 simditor 能夠插入代碼，但只是單純的字符，沒有代碼高亮。顯然這一點都不程序員，因此我們使用 hightlight.js 來實現代碼高亮的功能。

?highlight.js是一個用于高亮代碼的JavaScript 庫，支持176種語言和79種風格，不依賴其他框架，使用方便。使用 highlight.js 在前端實現代碼高亮，也不會給服務器增加額外的負擔。

?

?

1.基礎配置

hightlight.js 的配置相當的簡單，我們只需要在需要顯示代碼高亮的網頁html上引用 hightlight.js 和 一種代碼樣式（例如：github.min.css），然后調用?initHighlightingOnLoad()??對代碼著色。不需要下載highlight.js，bootcdn上有它的CDN，直接引用即可。

<link href="https://cdn.bootcss.com/highlight.js/9.13.1/styles/github.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js"></script> <script>hljs.initHighlightingOnLoad(); </script>

hightlight.js 會自動找到 <pre> <code> 標簽內的代碼并進行著色，而且會自動判斷代碼語言。simditor的代碼塊正是用標簽 <pre> <code> 標記的，我們在simditer中插入代碼時左下角會提示我們選擇對應的語言。

?

2. 代碼高亮

highlight.js支持79種風格，可以在這里查看所有的風格和語言：highlight.js demo。切換風格也很簡單，只要引用相應風格的css文件即可。有些風格名可能和css文件名不太一樣，引用前最好先查一下對應的CDN：highlight.js | BootCDN。

<link href="https://cdn.bootcss.com/highlight.js/9.13.1/styles/github-gist.min.css" rel="stylesheet">

總結

以上是生活随笔為你收集整理的个人网站搭建（Day 8）— Django-simditor的使用以及代码高亮的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。