于千万人之中遇见了你
愿与你留下恒久的记忆
关注袁威,见证奇迹
在最新学习python中,使用django搭建博客系统,管理后台直接使用django自带的admin模块,所以遇到富文本编辑的问题,经过查阅资料,发现了django-ckeditor这个小插件,下面小威就分享一点点来自小白的经验吧~
首先安装django-ckeditor
其次,需要安装pillow(pillow是python的一个图形处理库,此次用到的django-ckeditor需要依赖此库)
安装好后,就是要进行django的配置,大致配置步骤如下:
1.在settings.py文件中,将“ckeditor”和“ckeditor_uploader”加入到“INSTALLED_APPS”中
2.在settings.py中配置“CKEDITOR_UPLOAD_PATH
3.如果在富文本编辑框里有代码高亮等其他自定义的功能,还需要在settings.py里配置“CKEDITOR_CONFIGS”的配置项
4.在urs.py中增加ckeditor的url配置
这里的话,我所有上传的图片文件保存路径都是在static目录下的,附带再贴下我静态资源加载的目录配置吧,大概修改了两个文件:
修改settings.py:
在urls.py中的“urlpatterns”添加配置:
以上配置中,“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='内容')
至此,启动应用,就可以看到原本内容的文本输入框变成了富文本编辑框,肿么样,鸡不鸡冻~~
写在最后,使用ckeditor编辑的内容在前端显示的时候,需要在页面头部引入js文件
如果需要代码高亮的样式,还需引入css样式文件
但是仅此你还会发现前端显示的是原始的html标签,我们在变量中加入safe过滤就阔以啦~比如
emmm~到这里,小威的分享就结束了,还有神马疑问的,欢迎给我留言哟,一起交流,共同进步~喵,就是酱紫~
如果正合你意,如果你也喜欢,点在看or分享只在一瞬间~
领取专属 10元无门槛券
私享最新 技术干货