本文主要描述在admin中CKEditor的使用场景和方法。
如果你打算使用Django来做一个属于自己的博客,在编辑博文的时候,有时需要增加一些格式或者图片这样的多媒体,想要使用Django自带的编辑器来处理这些问题是一件很麻烦的事情,这时如果使用CKEditor可以解决很多问题。
场景一:使用不带图片上传功能的文本编辑器,可以使用RichTextField。修改/your_project/your_app/models.py:
fromckeditor.fieldsimportRichTextFieldclassPost(models.Model):# --- The Original Django Version ---# body = models.TextField()# --- CKEditor Version --- #body = RichTextField(verbose_name='Content')}
在Admin中,我们就可以看到默认的编译器:
图片只能通过url来处理,如下:
场景二:使用带图片上传功能的文本编辑器,可以使用RichTextUploadingField。修改/your_project/your_app/models.py:
#from ckeditor.fields import RichTextFieldfromckeditor_uploader.fieldsimportRichTextUploadingFieldclassPost(models.Model):# --- The Original Django Version ---# body = models.TextField()# --- CKEditor Version --- #body = RichTextUploadingField()}
在Admin中我们,可以看到如下图:
另外,以上两种场景,如果不修改在你的HTML中关闭Django的autoscape过滤器,看到的博文有可能是像下面这样的:
关闭的语法如下:
{% autoescape off %}
{{ body }}
{% endautoescape %}
想要了解更多Django的信息,请去Django官网查看:Django - Built-in template tags and filters
场景三:定制编辑器。想要定制编辑器,需要做三件事:在settings.py增加CKEDITOR_CONFIGS设定,在models.py里增加指定配置,在templates中加入CKEditor的脚本。另外,CKEditors有一个叫做Code Snippet的插件非常好用,可以在编译器里增加代码。
setttings.py
注:‘-’表示分割竖线,‘name’表示一个工具栏, ‘/’表示换行。
CKEDITOR_CONFIGS = {'default': {'skin':'moono','toolbar_YourCustomToolbarConfig': [ {'name':'basicstyles','items': ['Bold','Italic','Underline','Strike','Subscript','Superscript']}, {'name':'links','items': ['Link','Unlink']}, {'name':'insert','items': ['CodeSnippet','Image','Table','PageBreak','HorizontalRule','SpecialChar','Iframe']}, {'name':'paragraph','items': ['NumberedList','BulletedList','-','Blockquote','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl']},'/', {'name':'styles','items': ['Styles','Format','Font','FontSize']}, {'name':'colors','items': ['TextColor','BGColor']}, {'name':'tools','items': ['Maximize','ShowBlocks']}, ],'toolbar':'YourCustomToolbarConfig',# put selected toolbar config here'tabSpaces':4,'extraPlugins':','.join(['uploadimage',# the upload image feature'div','autolink','autoembed','embedsemantic','autogrow','widget','dialog','lineutils','codesnippet']),'codeSnippet_theme':'atelier-dune.dark', }}
models.py
body = RichTextUploadingField(config_name='default')
templates的head里加入如下内容。
hljs.initHighlightingOnLoad();
成果图如下
官网给出的Sample得出的效果图如下: