Django如何添加富文本编辑器ckeditor?

Django自带的TextField文本编辑器太过简单,就是一张白纸。最近做了个博客,打算添加免费而又功能强大的富文本编辑器ckeditor。这样用户在写博客时就可以在正文里上传图片或直接写html代码了。网上看了些教程,觉得下面这篇文章不错。小编我已在Django 2.0下验证成功,所以推荐给大家。用一句话来说:添加过程非常顺利,效果出奇的好。


1.通过PIP安装django-ckeditor


1
pip install django - ckeditor


2.将‘ckeditor’和'ckeditor_uploader'加入到settings.py中的INSTALLED_APPS中

 Django大咖之路备注ckeditor不允许用户上传图像和其它文件,只能编辑文本。如果你希望用户能直接上传文本,需要把ckeditor_uploader也加上去。

3.由于djang-ckeditor在ckeditor-init.js文件中使用了JQuery,所以要在settings.py中设置CKEDITOR_JQUERY_URL来指定JQuery库的路径,例如:

1
CKEDITOR_JQUERY_URL  = 'https://apps.bdimg.com/libs/jquery/2.1.4/jquery .min.js'


4. 先设定STATIC_ROOT,执行
python manage.py collectstatic, 会将CKEditor需要的媒体下载到STATIC_ROOT指定的路径中。

STATIC_ROOT = os.path.join(BASE_DIR,'static/')

Django大咖之路备注假如你的项目mysite,app是blog。你需要在mysite文件里新建了个static文件夹。在下载前你需要先设定STATIC_ROOT, 下载完成后,你需要删掉它。最后mysite/setting.py文件应该是这样子的。

CKEDITOR_JQUERY_URL ='https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_UPLOAD_PATH = "uploads/"

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"), ]

# specify media root for user uploaded files, i.e, upload_to filed for ImageField or FileField.
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

 5 在models.py里可按如下方式使用。field字段改为RichTextField即可。

 
 
from django.db import models
from ckeditor.fields import RichTextField
class Blog(models.Model):
    title = models.CharField(max_length=50,verbose_name="标题")
    body = RichTextField(blank=True,null=True,verbose_name="内容")    def __unicode__(self):        
   return self.name


实际展示效果如下,还是非常美观的。



如果你想用户通过ckeditor上传文件,请按如下指示操作。

1.在settings.py中的INSTALLED_APPS中添加ckeditor_uploader 

2.CKEditor使用Django的存储API,默认使用Django的文件存储,会用到MEDIA_ROOT和MEDIA_URL,需要在settings.py中定义,此外还可以指定CKEDITOR_UPLOAD_PATH,它位于MEDIA_ROOT下:

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media/') CKEDITOR_UPLOAD_PATH = 'uploads/'

3.在项目的urls.py中添加CKEditor的URL映射

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

如果不加,可能会出现以下错误:

4(可选项) 在settings.py中加入CKEDITOR_IMAGE_BACKEND ,使能thumbnails,例如:

CKEDITOR_IMAGE_BACKEND = "pillow"
from ckeditor_uploader.fields import RichTextUploadingField
class Post(models.Model):
    content = RichTextUploadingField()

 

Django-ckeditor英文说明: https://github.com/django-ckeditor/django-ckeditor

中文原文链接: http://www.cnblogs.com/hupeng1234/p/6639122.html


欢迎关注我们。


猜你喜欢

转载自blog.csdn.net/weixin_42134789/article/details/80264074