首页 核心功能 django-ckeditor富文本编辑器安装教程
pay pay

django-ckeditor富文本编辑器安装教程

日期: 2021年11月19日 01:03
栏目: 核心功能
阅读: 156
作者: Python自学网

摘要: django-ckeditor富文本编辑器是django开发比较常用的富文本编辑器,不像百度编辑器和其他类型编辑一样,django-ckeditor和Django的兼容性相对更好一些(个人感觉)。下面就来演示一下django-ckeditor富文本编辑器安装的完整流程。

django-ckeditor富文本编辑器是django开发比较常用的富文本编辑器,不像百度编辑器和其他类型编辑一样,django-ckeditor和Django的兼容性相对更好一些(个人感觉)。下面就来演示一下django-ckeditor富文本编辑器安装的完整流程。

django-ckeditor富文本编辑器

1.首先安装模块,pillow是处理图片的模块

pip install django-ckeditor
pip install pillow

2.配置settings.py,注册应用

在settings.py文件中,将ckeditor、ckeditor_uploader添加到INATALLED_APPS中

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'apps',
    'ckeditor',
    'ckeditor_uploader',
]

在settings.py文件中,添加CKEDITOR_UPLOAD_PATH配置项 : CKEDITOR_UPLOAD_PATH = ""  配置文件存储路径

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # 配置文章中流媒体上传路径

CKEDITOR_UPLOAD_PATH = ""
CKEDITOR_IMAGE_BACKEND = "pillow"

3.配置编辑器功能显示

ckeditor编辑器有自己默认的功能,但是部分富,这里我们最好能配置一下,原有的功能如下

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',  # 工具条功能
        'height': 600,  # 编辑器高度
        'width': "auto",  # 编辑器宽
    },

在settings.py最下面配置我们自己想要的功能

CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': (
            ['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
            ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
            ['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'],
        ),
        'width': 'auto',
        # 添加按钮在这里
        'toolbar_Custom': [
            ['NumberedList', 'BulletedList'],
            ['Blockquote', 'CodeSnippet'],
        ],
        # 插件
        # 'extraPlugins': ','.join(['codesnippet', 'widget', 'lineutils', ]),
    },
}

4.配置项目总路由

from django.contrib import admin
from django.urls import path,re_path,include # 导入include来路由分发
from django.views.static import serve # 导入媒体文件资源
from project_name import settings # 导入项目的配置文件,这里用project_name代替项目名称

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include("app_name.urls")),
    re_path(r'^ckeditor/',include('ckeditor_uploader.urls')), # ckeditor上传路由分发
    re_path(r'files/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}) # 图片文件路径,这里要注意,之前已经在setting.py文件处设置了媒体文件路径的别名是:MEDIA_URL = "/files/" ,所以这里的路由要保持一致
]

5.模型中把文章内容字段类型TextField字段改成富文本的字段类型

# from ckeditor.fields import RichTextField # 不带图片上传功能的字段
from ckeditor_uploader.fields import RichTextUploadingField # 带有图片上传功能的字段

# 一定要保证正文部分是RichTextUploadingField,RichTextField类型不能上传图片
    content = RichTextUploadingField(default="",verbose_name="正文内容")

6.前端把你调用的文章字段加进来,注意这里不能放在<p>标签内,其次要用safe转义

{{ art.content|safe }}

这时候完整的富文本编辑器就实现了我们想要的功能了,但是这里前端显示的效果和我们预想的可能有很大区别,主要是样式主题没有写好,一般来说简单的样式我们可以通过CSS文件来实现,但是如果用到代码块显示的时候就很难使用CSS来实现了,所以我们可以通过一些插件来实现。

7.主题设置

给大家一个网站:

https://prismjs.com/download.html

进入网站之后按照下面的图示来选择自己喜欢的主题风格。

ckeditor富文本编辑器主题选择

ckeditor富文本编辑器主题选择

ckeditor富文本编辑器主题选择

ckeditor富文本编辑器主题选择

 

部分文字内容为Python自学网原创作品,转载请注明出处!视频内容已申请版权,切勿转载!
# 相关文章
# 相关视频
回顶部