ckeditor是一個老牌的編輯器，GitHub上有一個第三方模塊django-ckeditor封裝了所有功能晚岭，把import到我們的項目里插掂，然后設置一下參數(shù)，就可輕松使用了

github地址： https://github.com/django-ckeditor/django-ckeditor

開發(fā)環(huán)境： Python 3.5腥例、Django 1.10

安裝

使用pip安裝 django-ckeditor 和 pillow辅甥，pillow用于生成縮略圖，用來在編輯器里瀏覽上傳的圖片

pip install django-ckeditor
pip install pillow

QUICK START

在 project/settings.py 里進行如下設置：

INSTALLED_APPS = [
    'ckeditor',
    'ckeditor_uploader',
]

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = 'upload/'
CKEDITOR_IMAGE_BACKEND = 'pillow'

1. 首先將 'ckeditor' 和 'ckeditor_uploader'加入到INSTALLED_APPS中
2. 設置 MEDIA_ROOT 和 MEDIA_URL燎竖，CKEDITOR_UPLOAD_PATH = 'upload/'璃弄，圖片將上傳到項目下的media/upload路徑下，圖片的url是/media/upload/
3. 設置CKEDITOR_IMAGE_BACKEND = 'pillow', 用于生成圖片縮略圖构回，在編輯器里瀏覽上傳的圖片

Paste_Image.png

4. 在project/urls.py里夏块，加入 ckeditor_uploader.url

from django.conf.urls import url,include
from django.conf.urls.static import static
from django.conf import settings
from django.contrib import admin

urlpatterns = [
    url(r'', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) #沒有這一句無法顯示上傳的圖片

NOTICE：在開發(fā)環(huán)境里debug模式下疏咐，static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
這句是必不可少了，沒有的話脐供，你上傳的圖片將無法顯示浑塞。將這段代碼Python shell里運行一下，會發(fā)現(xiàn)其實就是解析了media_url

location /media {
                alias /path-to/media;
        }

5. 在blog/models.py的Post類，讓正文字段使用 RichTextUploadingField()

from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content = RichTextUploadingField(verbose_name='正文')

6. 最后還是不要忘了遷移數(shù)據(jù)庫

pyhton manage.py makemigrations
python manage.py migrate

進入admin后臺去添加文章歇由，就會發(fā)現(xiàn)編輯器已經(jīng)在那里了卵牍，是不是很開心啊

其他可選配置

CKEDITOR_ALLOW_NONIMAGE_FILES = False 不允許非圖片文件上傳，默認為True
CKEDITOR_BROWSE_SHOW_DIRS = True 在編輯器里瀏覽上傳的圖片時沦泌，圖片會以路徑分組糊昙，日期排序
CKEDITOR_RESTRICT_BY_USER = True 限制用戶瀏覽圖片的權(quán)限，只能瀏覽自己上傳的圖片谢谦，圖片會傳到以用戶名命名的文件夾下释牺，超級管理員依舊可以看所有圖片

NOTICE：django-ckeditor默認的只允許管理員（staff member）上傳圖片，當普通用戶使用編輯器時（比如評論區(qū)回挽、留言板船侧、發(fā)帖子），如果要使他們上傳圖片的話厅各，需要對django-ckeditor的源碼進行修改

在ckeditor_uploader/urls.py里镜撩，它的upload 和 browse方法用了staff_member_required裝飾器，把它換成login_required裝飾器即可

if django.VERSION >= (1, 8):
    urlpatterns = [
        url(r'^upload/', login_required(views.upload), name='ckeditor_upload'),
        url(r'^browse/', never_cache(login_required(views.browse)), name='ckeditor_browse'),
    ]

自定義編輯器

如果想要自定義編輯器队塘，添加或刪除一些按鈕的話袁梗，需要在settings.py里設置 CKEDITOR_CONFIGS

CKEDITOR_CONFIGS = {
    # 配置名是default時，django-ckeditor默認使用這個配置
    'default': {
        # 使用簡體中文
        'language':'zh-cn',
        # 編輯器的寬高請根據(jù)你的頁面自行設置
        'width':'730px',
        'height':'150px',
        'image_previewText':' ',
        'tabSpaces': 4,
        'toolbar': 'Custom',
        # 添加按鈕在這里
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],
            ['NumberedList', 'BulletedList'],
            ['Blockquote', 'CodeSnippet'],
            ['Image', 'Link', 'Unlink'],
            ['Maximize']
        ],
        # 插件
        'extraPlugins': ','.join(['codesnippet','uploadimage','widget','lineutils',]),
    }
}

當配置名稱是 'default'憔古，django-ckeditor會默認使用這個配置遮怜，CKEDITOR_CONFIGS里可以添加多個配置，比如

CKEDITOR_CONFIGS = {
    # 配置名是default時鸿市，django-ckeditor默認使用這個配置
    'default': {

    }  
    # 名為custom的配置  
    'custom': {

    }
}

當需要使用非默認配置是锯梁，需要在 RichTextUploadingField() 里指定該配置名稱

class Post(models.Model):
    content = RichTextUploadingField(config_name='custom')

添加代碼功能

寫技術(shù)博客的話，我們的編輯器自然需要添加代碼塊的功能焰情。需要用到插件codesnippet陌凳，ckeditor的插件放在了ckeditor/static/ckeditor/ckeditor/plugins/路徑下。
當我們添加一個功能插件時内舟，需要在CKEDITOR_CONFIGS里的extraPlugins對應的value里添加該插件的名字（名字字母小寫）合敦，如果該插件還有相對應的按鈕，則在toolbar對應的value里添加名字（首字母大寫）验游，以codesnippet為例充岛，在下面代碼的第16行和21行分別添加了 'CodeSnippet' 和 'codesnippet'
NOTICE：在21行的extraPlugins里還添加了 'uploadimage'保檐，這個插件的作用是允許用戶直接在編輯器里粘貼（ctrl + v）圖片

CKEDITOR_CONFIGS = {
    # 配置名是default時，django-ckeditor默認使用這個配置
    'default': {
        # 使用簡體中文
        'language':'zh-cn',
        # 編輯器的寬高請根據(jù)你的頁面自行設置
        'width':'730px',
        'height':'150px',
        'image_previewText':' ',
        'tabSpaces': 4,
        'toolbar': 'Custom',
        # 添加按鈕在這里
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline', 'Format', 'RemoveFormat'],
            ['NumberedList', 'BulletedList'],
            ['Blockquote', 'CodeSnippet'],
            ['Image', 'Link', 'Unlink'],
            ['Maximize']
        ],
        # 插件
        'extraPlugins': ','.join(['codesnippet','uploadimage','widget','lineutils',]),
    }
}

代碼高亮崔梗、代碼行數(shù)

從ckeditor官網(wǎng)下載 插件prism（點這里直接下載）夜只，然后將其解壓到ckeditor/static/ckeditor/ckeditor/plugins路徑下，同樣的我們需要在CKEDITOR_CONFIGS里將extraPlugins對應的value里加入插件 'prism' 和另外兩個插件'lineutils'蒜魄，'widget'扔亥，這兩個插件無須下載，在django-ckeditor中已經(jīng)有了

'extraPlugins': ','.join(['codesnippet','uploadimage','prism','widget','lineutils',]),

去prismjs官網(wǎng)下載css文件http://prismjs.com/download.html权悟，選擇你喜歡的主題，勾選支持的語言推盛，以及別忘選擇line-numbers功能峦阁，下載后把他解壓到static/blog/css下

<script src="{% static 'ckeditor/ckeditor/plugins/prism/lib/prism/prism_patched.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'blog/css/prism.css' %}">

在admin以外的地方使用django-ckeditor

如果在admin以外的地方使用django-ckeditor，比如添加評論功能耘成，在渲染表單的那個頁面需要引入ckeditor-init.js 和 ckeditor.js兩個文件榔昔，否則編輯器無法顯示

{% load static %}
<script type="text/javascript" src="{% static "ckeditor/ckeditor-init.js" %}"></script>
<script type="text/javascript" src="{% static "ckeditor/ckeditor/ckeditor.js" %}"></script>

原文鏈接：http://www.aaron-zhao.com/post/1/