個人網站搭建 (第六天) Ckeditor編輯器

    富文本編輯器，Rich Text Editor, 簡稱 RTE, 是一種可內嵌於瀏覽器，所見即所得的文本編輯器，這是百度百科的對富文本編輯器的解釋。咱們能夠藉助富文本編輯器，編輯出來一個包含html的頁面，從而頁面的顯示效果，能夠由網站管理員定義，而不用徹底依賴於開發的人員。我以前使用的是一個叫tinymce的富文本編輯，它比較精簡，功能不是很豐富。在使用了一段tinymce後，就轉用了django-ckeditor，後來發現是真的好用，固然還有一個叫作Ueditor的編輯器，據說也還不錯，但我這裏就用ckeditor來佈置了。

    在這裏，我會將步驟大體記錄下來，但仍是要推薦給你們一篇很是棒的關於ckeditor配置的文章，也是我以前參考學習的。Django博客開發：添加富文本編輯器ckeditor，網上大部分教程與此相似，但我的感受都沒有這篇寫的詳細，寫的易懂。

安裝環境

    1.使用pip安裝 django-ckeditor 和 pillow，pillow用於生成縮略圖，用來在編輯器裏瀏覽上傳的圖片

pip install django-ckeditor
pip install pillow

    2.在 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'

    3.在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) #沒有這一句沒法顯示上傳的圖片

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

from ckeditor_uploader.fields import RichTextUploadingField

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

    5.遷移數據庫，作完這一步就能夠在後臺編輯文章時發現編輯器已經添加成功了

pyhton manage.py makemigrations
python manage.py migrate

自定義編輯器

    若是想要自定義編輯器，添加或刪除一些按鈕的話，須要在settings.py裏設置 CKEDITOR_CONFIGS

CKEDITOR_CONFIGS = {
    # 配置名是default時，django-ckeditor默認使用這個配置
    'default': {
        # 使用簡體中文
        'language':'zh-cn',
        # 編輯器的寬高請根據你的頁面自行設置
        'width':'auto',
        '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')

添加代碼功能

    爲何從tinymce編輯器傳到ckeditor很大緣由就是爲平時都會用編輯器寫一些代碼，因此編輯器天然須要添加代碼塊的功能，tinymce彷佛沒有這個功能，至少我目前沒有找到。而ckeditor只須要用到插件codesnippet，而且ckeditor的插件放在了ckeditor/static/ckeditor/ckeditor/plugins/路徑下。以codesnippet爲例，在下面代碼的第16行和21行分別添加了 'CodeSnippet' 和 'codesnippet'

CKEDITOR_CONFIGS = {
    # 配置名是default時，django-ckeditor默認使用這個配置
    'default': {
        # 使用簡體中文
        'language':'zh-cn',
        # 編輯器的寬高請根據你的頁面自行設置
        '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',]),
    }
}

代碼高亮、代碼行數  

    從ckeditor官網下載 插件prism（點這裏直接下載），而後將其解壓到ckeditor/static/ckeditor/ckeditor/plugins路徑下，一樣的還須要在CKEDITOR_CONFIGS裏將extraPlugins對應的value里加入插件 'prism' 和另外兩個插件"lineutils"、"widget" ，這兩個插件無須下載，在django-ckeditor中已經有了

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

    去prismjs官網下載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>

編輯框響應式

1. 須要CKEDITOR_CONFIGS裏設置 'width': 'auto'

2.

<script>
    $(".django-ckeditor-widget").removeAttr('style');
</script>