码迷,mamicode.com
首页 > 其他好文 > 详细

Django中添加富文本编辑器

时间:2018-01-10 14:03:21      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:lock   conf   lang   ike   enter   pil   富文本   richtext   field   

使用的是CKeditor这个模块

1.安装:

pip install django-ckeditor

2.将ckeditor注册到settings.py文件中, 并添加ckeditor的url到你项目的urls.py文件中

技术分享图片
INSTALLED_APPS = [
    ...
    ‘ckeditor‘
]


urlpatterns = [
  ...
  url(r‘^ckeditor/‘, include(‘ckeditor_uploader.urls‘)),
]
技术分享图片

3.在models.py文件中使用ckeditor的富文本字段RichTextField替换TextField就行,用法不变。

from ckeditor.fields import RichTextField
...
content = RichTextField(verbose_name=u‘内容‘)

 

4.在settings.py文件中写入cdeditor的配置

技术分享图片
# ckeditor config
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%‘,
        ‘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
技术分享图片

5.如果要实现编辑器中图片上传的功能,还需要一些配置:

  在settings.py文件中注册‘ckeditor_uploader‘

  

INSTALLED_APPS = [

    ‘ckeditor‘,
    ‘ckeditor_uploader‘
]

  我在上面的配置中写一个路径:CKEDITOR_UPLOAD_PATH = ‘article_files/‘ 

  这是一个相对路径,你需要配置好media:

# media_confige
MEDIA_URL = ‘/media/‘
MEDIA_ROOT = os.path.join(BASE_DIR, ‘media‘)

  之后上传图片的保存路径就是‘/media/article_files/...‘

  在models.py中就需要使用RichTextUploadingField字段

  

from ckeditor_uploader.fields import RichTextUploadingField
。。。
class MyModel(models.Model):
    content = RichTextUploadingField(verbose_name=u‘内容‘)

 

文档:https://github.com/django-ckeditor/django-ckeditor

Django中添加富文本编辑器

标签:lock   conf   lang   ike   enter   pil   富文本   richtext   field   

原文地址:https://www.cnblogs.com/zhangxiaomeng1991/p/8257563.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!