前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在django-admin中使用django-ckeditor

在django-admin中使用django-ckeditor

作者头像
用户2619822
发布2022-06-10 16:55:54
1.5K0
发布2022-06-10 16:55:54
举报
文章被收录于专栏:袁威袁威

在最新学习python中,使用django搭建博客系统,管理后台直接使用django自带的admin模块,所以遇到富文本编辑的问题,经过查阅资料,发现了django-ckeditor这个小插件,下面小威就分享一点点来自小白的经验吧~

首先安装django-ckeditor

代码语言:javascript
复制
pip install django-ckeditor

其次,需要安装pillow(pillow是python的一个图形处理库,此次用到的django-ckeditor需要依赖此库)

代码语言:javascript
复制
pip install pillow

安装好后,就是要进行django的配置,大致配置步骤如下:

1.在settings.py文件中,将“ckeditor”和“ckeditor_uploader”加入到“INSTALLED_APPS”中

代码语言:javascript
复制
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'blog.apps.BlogConfig',

    'ckeditor',
    'ckeditor_uploader'
]

2.在settings.py中配置“CKEDITOR_UPLOAD_PATH

代码语言:javascript
复制
MEDIA_URL = '/'
CKEDITOR_UPLOAD_PATH = 'static/upload/article_images'
CKEDITOR_IMAGE_BACKEND = 'pillow'

3.如果在富文本编辑框里有代码高亮等其他自定义的功能,还需要在settings.py里配置“CKEDITOR_CONFIGS”的配置项

代码语言:javascript
复制
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': (['div', 'Source', '-', 'Save', 'NewPage', 'Preview', '-', 'Templates'],
                    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Print', 'SpellChecker', 'Scayt'],
                    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat', '-', 'Maximize',
                     'ShowBlocks', '-', "CodeSnippet", 'Subscript', 'Superscript'],
                    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',
                     'HiddenField'],
                    ['Bold', 'Italic', 'Underline', 'Strike', '-'],
                    ['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'],

                    ),
        'extraPlugins': 'codesnippet',
    }
}

4.在urs.py中增加ckeditor的url配置

代码语言:javascript
复制
from django.urls import path,include,re_path
urlpatterns = [
  url(r'^ckeditor/',include('ckeditor_uploader.urls'))
]

这里的话,我所有上传的图片文件保存路径都是在static目录下的,附带再贴下我静态资源加载的目录配置吧,大概修改了两个文件:

修改settings.py:

代码语言:javascript
复制
STATIC_URL = '/static/'
STATIC_ROOT = 'static'

在urls.py中的“urlpatterns”添加配置:

代码语言:javascript
复制
from django.views import static
from django.conf import settings
urlpatterns = [
  url(r'^static/(?P<path>.*)$',static.serve,
        {'document_root':settings.STATIC_ROOT},name='static'),
]

以上配置中,“CKEDITOR_UPLOAD_PATH”主要是设置通过ckeditor上传的图片所存放的目录,这里的路径是一个相对路径哟,相对于设置的“MEDIA_URL”。这块有啥具体问题建议还是可以前往django官方文档查看哟~

至此,我们的配置已经完成了,那接下来我们是不是可以愉快的使用了呢?恭喜你,打错了~~~

在我们配置完成后,需要在于manage.py的目录下使用命令运行“manage.py collectstatic”,将ckeditor的静态资源下载到项目工程下。

ok~做完以上,就可以愉快的玩耍了。

1.首先在模型里先引入:from ckeditor_uploader.fields import RichTextUploadingField(此处需要注意的是,ckeditor.fields.RichTextUploadingField是不能上传图片的)

2.然后把你需要是富文本的字段修改下即可,如:content = RichTextUploadingField(verbose_name='内容')

代码语言:javascript
复制
from ckeditor_uploader.fields import RichTextUploadingField
class Article(models.Model):
    #content = models.TextField(verbose_name='内容')
    content = RichTextUploadingField(verbose_name='内容')

至此,启动应用,就可以看到原本内容的文本输入框变成了富文本编辑框,肿么样,鸡不鸡冻~~

写在最后,使用ckeditor编辑的内容在前端显示的时候,需要在页面头部引入js文件

代码语言:javascript
复制
<script src="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/highlight.pack.js' %}"></script>

如果需要代码高亮的样式,还需引入css样式文件

代码语言:javascript
复制
<link rel="stylesheet" href="{% static 'ckeditor/ckeditor/plugins/codesnippet/lib/highlight/styles/monokai_sublime.css' %}">

但是仅此你还会发现前端显示的是原始的html标签,我们在变量中加入safe过滤就阔以啦~比如

代码语言:javascript
复制
{{content|safe}}

emmm~到这里,小威的分享就结束了,还有神马疑问的,欢迎给我留言哟,一起交流,共同进步~喵,就是酱紫~

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-12-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 袁威 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档