Django添加ckeditor富文本编辑器教程

Django-ckeditor是一个第三方Django库，集成了ckeditor富文本编辑器，工作在admin后台。创建更丰富的页面效果，富文本编辑器还可以用于表单类。

1. 通过 pip

pip3 install django-ckeditorpip3 install Pillow

2 安装。将 ckeditor 和 ckeditor_uploader 应用程序添加到 settings.py 中的 INSTALLED_APPS 中。

 INSTALLED_APPS = (    #    'ckeditor',    'ckeditor_uploader')

3。在settings.py中配置ckeditor。

CKEDITOR_JQUERY_URL = 'https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'  MEDIA_URL = '/media/'  MEDIA_ROOT = os.path.join(BASE_DIR,'media/')  CKEDITOR_UPLOAD_PATH = 'uploads/'  CKEDITOR_IMAGE_BACKEND = 'pillow'  CKEDITOR_CONFIGS = {      'default': {          'toolbar': 'full',          'height':600,        'width':800,    },  }

3。在urls.py中配置ckeditor相关的URL。

from django.conf import settingsfrom django.conf.urls.static import staticfrom django.conf.urls import url,include urlpatterns = [      url(r'^ckeditor/', include('ckeditor_uploader.urls')),] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)  # 没有这一句无法显示上传的图片

4。在 models.py 中进行编辑需要使用富文本编辑器。其中，RichTextField 具有 TextField 的所有参数和一些其他参数。 RichTextUploadingField 可以上传图片

from ckeditor.fields import RichTextFieldcontent = RichTextField() 
from ckeditor_uploader.fields import RichTextUploadingFieldcontent = RichTextUploadingField(verbose_name='内容')#可以上传图片

5。使用模板

{{ content | safe }}

6 中的内容。文本编辑器最终的效果是这样的

7。重命名ckeditor上传的文件

新建一个与manage.py同级的utils.py

def get_filename(filename, request):    return filename.upper()

在settings.py中添加配置

CKEDITOR_FILENAME_GENERATOR = 'utils.get_filename'

8.设置 ckeditor 主题的颜色。在 /static/ckeditor/ 中创建 custom.css，添加以下 CSS 代码来更改编辑器主题的颜色：

/* Set the background color */.cke_editable {    background-color: #f8f8f8;}
/* Set the font color */.cke_editable p {    color: #333;}

在本例中，我们将背景颜色设置为浅灰色（ #f8f8f ）并将字体颜色设置为黑色（#333）。您可以调整这些值以满足您的需要。

在 Django 的 settings.py 文件中，设置刚刚创建的 CSS 文件的 CKEDITOR_CONFIGS 的 ♶s ‶s 属性。方式。例如：

pythonCKEDITOR_CONFIGS = {    'default': {        'contentsCss': '/static/ckeditor/custom.css',        'toolbar': 'full',        'height': 300,    },}