Django(博客系統)：文章內容使用django-ckeditor、文章簡介使用django-tinymce

文章內容使用django-ckeditor

1）安裝django-ckeditor

pip install django-ckeditor
pip install Pillow

2）在settings.py的INSTALLED_APPS裏添加ckeditor和ckeditor_uploader兩個應用

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

3）同時須要在settings.py裏設置ckeditor的文件上傳路徑等配置：

...
STATIC_URL = '/static/'
STATIC_ROOT = ''
# media_confige
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
CKEDITOR_UPLOAD_PATH = 'article_files/'
CKEDITOR_JQUERY_URL = 'js/jquery-3.2.1.min.js'
CKEDITOR_IMAGE_BACKEND = 'pillow'
CKEDITOR_CONFIGS = {
    'default': {
        'language': 'zh-cn',
        'toolbar_YourCustomToolbarConfig': [
            {'name': 'clipboard', 'items': ['Undo', 'Redo', '-', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord']},
            {'name': 'paragraph',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']},
            {'name': 'insert', 'items': ['Image', 'Table', 'HorizontalRule', 'Smiley']},
            {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
            {'name': 'editing', 'items': ['Find', 'Replace', '-']},
            {'name': 'tools', 'items': ['Maximize']},
            '/',
            {'name': 'styles', 'items': ['Format', 'Font', 'FontSize']},
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
            {'name': 'paragraph',
             'items': ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']},
            {'name': 'document', 'items': ['Source']},
        ],
        'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here
        'width': '100%',
        'cols': '50',
        'rows': '20',
        'tabSpaces': 4,
        'extraPlugins': ','.join([
            'uploadimage',  # the upload image feature
            # your extra plugins here
            'div',
            'autolink',
            'autoembed',
            'embedsemantic',
            'autogrow',
            'widget',
            'lineutils',
            'clipboard',
            'dialog',
            'dialogui',
            'elementspath'
        ]),
    }
}
CKEDITOR_ALLOW_NONIMAGE_FILES = False
CKEDITOR_BROWSE_SHOW_DIRS = True

4）修改urls.py

url(r'^ckeditor/', include('ckeditor_uploader.urls')),

5）最後修改須要使用富文本編輯器的Django APP的目錄下的models.py

# coding:utf-8
...#from ckeditor.fields import RichTextField
from ckeditor_uploader.fields import RichTextUploadingField
from django.utils.encoding import python_2_unicode_compatible
# """
# 文章實體
# """
@python_2_unicode_compatible
class Post(models.Model):
    ...
    body = RichTextUploadingField(verbose_name=u'內容')  # 文章內容，較長所以定義爲TextField, type=models.TextField
    ...

備註：

ckeditor的CKEDITOR_CONFIGS就是一個Python的dict，能夠同時運用多種ckeditor的配置並命名。

CKEDITOR_CONFIGS = {
    'awesome_ckeditor': {
        'toolbar': 'Basic',
    },
    'default_ckeditor':{
        'toolbar': 'Full',
    },
}

這樣在models.py中就能夠經過RichTextField的config_name進行選擇。

learn = RichTextField(config_name='default_ckeditor')
instructions = RichTextField(config_name='awesome_ckeditor')

文章簡介使用django-tinymce

1）安裝django-tinymce插件：

pip install django-tinymce

2）在settings.py的INSTALLED_APPS裏添加tinymce應用

INSTALLED_APPS = [
    ...
    'tinymce',
]

3）修改urls.py

url(r'^tinymce/', include('tinymce.urls')),

4）修改models.py

# coding:utf-8
...
from tinymce.models import HTMLField
...
from django.utils.encoding import python_2_unicode_compatible

# """
# 文章實體
# """
@python_2_unicode_compatible
class Post(models.Model):
    ...
    summary = HTMLField(verbose_name=u'簡介', max_length=256, blank=True)  # 文章簡介，定義最大長度爲126。, type=models.CharField
    ...

最終效果：