个人网站搭建(Day 8)— Django-simditor的使用以及代码高亮

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源码并且集成到后台代码,能够更好地根据自己的需要修改。我们这里主要是介绍简单的那种啦 ٩꒰⍢ ꒱۶⁼³₌₃

simditer-github地址 

 

安装步骤

1. 下载 django-simditer

pip install django-simditor

 

2. 修改 Blog 的模型

from django.db import models
from simditor.fields import RichTextField


class 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 的配置了,效果如下,还是挺不错滴

个人网站搭建(Day 8)— Django-simditor的使用以及代码高亮_第1张图片

 

因为我们的博客是不支持前端编辑的,只能够通过后台管理进行编辑,因此我们不讨论相关的表单显示问题,详细可参考 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,直接引用即可。




hightlight.js 会自动找到

  标签内的代码并进行着色,而且会自动判断代码语言。simditor的代码块正是用标签 
  标记的,我们在simditer中插入代码时左下角会提示我们选择对应的语言。

 

2. 代码高亮

highlight.js支持79种风格,可以在这里查看所有的风格和语言:highlight.js demo。切换风格也很简单,只要引用相应风格的css文件即可。有些风格名可能和css文件名不太一样,引用前最好先查一下对应的CDN:highlight.js | BootCDN。


你可能感兴趣的:(个人网站搭建)