使用django-ckeditor進行富文本編輯

一、簡介

Django-CKEditor是一個免費和開源的項目，它提供了一個基於Web的富文本編輯器，可以方便地進行長文本的編輯。它是基於在CKEditor之上的Django的一個應用程序，需要Django 2.2及以上版本的支持。

二、安裝和配置

安裝Django-CKEditor很簡單，可以通過pip進行安裝：

pip install django-ckeditor

然後，將Django-CKEditor添加到INSTALLED_APPS中：

INSTALLED_APPS = [
    ...
    'ckeditor',
    ...
]

接下來，在urls.py文件中添加以下行，以便CKEditor自動生成適當的URL和JavaScript：

from django.conf.urls import url
from ckeditor_uploader.views import upload

urlpatterns = [
    ...
    url(r'^ckeditor/upload/', upload, name='ckeditor_upload'),
    url(r'^ckeditor/', include('ckeditor.urls')),
    ...
]

最後，定義CKEDITOR_UPLOAD_PATH和CKEDITOR_IMAGE_BACKEND變數的值，可以在settings.py文件中定義這些變數：

CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_IMAGE_BACKEND = 'pillow'

三、使用CKEditor

3.1 修改Admin

修改Admin模型，使其實現使用CKEditor。在models.py文件中為需要富文本編輯的欄位指定CKEditorWidget：

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

class MyModel(models.Model):
    content = RichTextField()

修改Admin界面，引入CKEditor的JavaScript和CSS文件，並將CKEditorWidget分配給要使用的欄位：

from django.contrib import admin
from .models import MyModel
from ckeditor.widgets import CKEditorWidget

class MyModelAdmin(admin.ModelAdmin):
    formfield_overrides = {
        models.TextField: {'widget': CKEditorWidget},
    }

admin.site.register(MyModel, MyModelAdmin)

3.2 集成CKEditor到前端

集成CKEditor到前端非常簡單，只需將以下兩個標籤添加到HTML文件中即可：

{% load static %}
<link href="{% static 'ckeditor/ckeditor/skins/moono/theme.css' %}" rel="stylesheet">
<script src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>

接下來，將CKEditor Widget添加到需要編輯的欄位中：

  {% csrf_token %}
  {{ form.content }}
  <script>
    CKEDITOR.replace( 'content' );
  </script>

3.3 高級用法

CKEditor還支持許多其他功能，例如插件管理，上傳文件，媒體管理等，這些都可以通過使用CKEditor的JavaScript API輕鬆實現。可以在CKEditor的文檔中找到更多信息。

四、總結

Django-CKEditor是一個集成到Django的富文本編輯器框架，它可以方便地處理長文本的編輯。在本文中，我們闡述了Django-CKEditor的基本安裝和使用，以及一些高級用法，使您可以更好地使用CKEditor編輯器進行工作。