django-ckeditor 使用

1. 安装pip install django-ckeditor

2. 注册应用 ‘ckeditor’

   INSTALLED_APPS = [
       ...
       'ckeditor',
   ]

3. 配置model的字段： 替换原来的TextField字段为RichTextFiled

   from ckeditor.fields import RichTextField
   class News(BaseModel):
       """
       文章模型
       """
       content = RichTextField(verbose_name='内容', help_text='内容')

4. 做数据库迁移处理，发现文字编辑没有问题，但是无法上传图片，下面步骤解决。

5. 安装 pip install pillow

6. 注册应用 ‘ckeditor_uploader’

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

8. 配置settings ：

   配置ckeditor上传路径：

   如果没有配置media目录的话，先配置：

   MEDIA_URL='/media/'
   ​
   MEDIA_ROOT=os.path.join(BASE_DIR,'media')

   然后：

   CKEIDITOR_UPLOAD_PATH='upload/'

9. 配置url

   from django.conf.urls.static import static
   urlpatterns = [
                     path('ckeditor/', include('ckeditor_uploader.urls')),
                   ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

10. 配置model，把字段改成RichTextUploadingField

    from ckeditor_uploader.fields import RichTextUploadingField
    class News(BaseModel):
        """
        文章模型
        """
        content = RichTextUploadingField(verbose_name='内容', help_text='内容')
    ​

11. 数据库迁移

    python manage.py makemigrations app_name
    python manage.py migrate

12. 登录后台发现 ckeditor的工具栏功能有限，我们可以通过定制解决。具体在settings里面添加配置文件，下面配置文件定义了2个配置，可以在模型字段中选定使用哪一个。如下：

    CKEDITOR_CONFIGS = {
        'desc': {
            'toolbar':  (
                # ['div','Source','-','Save','NewPage','Preview','-','Templates'],
                ['Cut','Copy','Paste','PasteText','PasteFromWord'],
                # ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                # ['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton','HiddenField'],
                ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
                ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
                ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
                # ['Link','Unlink','Anchor'],
                ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
                ['Styles','Format','Font','FontSize'],
                ['TextColor','BGColor'],
                # ['Maximize','ShowBlocks','-','About', 'pbckcode'],
                ['Blockquote', 'CodeSnippet'],
                ),
            'tabSpaces': 4,
             'extraPlugins' : 'autogrow', # 代码插件
        },
        'body': {
            # 'toolbar': "Full",
            'toolbar': (
                ['div','Source'],
                ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker','Scayt'],
                # ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
                ['Styles', 'Format', 'Font', 'FontSize'],
                ['Bold', 'Italic', 'Underline', ' Strike', '-', 'Subscript', 'Superscript'],
                ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
                ['NumberedList', 'BulletedList', '-', 'Outdent','Indent', 'Blockquote'],
                ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
                ['Link', 'Unlink', 'Anchor'],
                ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],
                ['TextColor', 'BGColor'],
                ['Maximize',' ShowBlocks', '-', 'About', 'pbckcode'],
                ['Blockquote', 'CodeSnippet'],
                ),
            'tabSpaces': 4,
            # 'uiColor': '#CCEAEE',
            'extraPlugins': 'codesnippet, autogrow',  # 代码插件
        }
    }

13. 使用的话就在模型的字段中添加使用哪个配置即可，至此，所有问题解决。

    class News(BaseModel):
        """
        文章模型
        """
        content = RichTextUploadingField(config_name='body',verbose_name='内容', help_text='内容')

    ​其中，ckedit个性配置部分参考了 django-ckeditor 富文本编辑器个性化定制 https://blog.csdn.net/bibinGee/article/details/105155422