https://github.com/django-ckeditor/django-ckeditor

https://django-ckeditor.readthedocs.io/en/latest/ 

 

 RichTextField, RichTextUploadingField, CKEditorWidget and CKEditorUploadingWidget

from ckeditor_uploader.widgets import CKEditorUploadingWidget

from ckeditor_uploader.fields import RichTextUploadingField

 

pip install django-ckeditor

pip install pillow

  

INSTALLED_APPS = [   'ckeditor',    'ckeditor_uploader',]MEDIA_URL = '/media/'MEDIA_ROOT = os.path.join(BASE_DIR, 'media')CKEDITOR_UPLOAD_PATH = 'upload/'urlpatterns = [    url(r'^admin/', admin.site.urls),    url(r'ckeditor/', include('ckeditor_uploader.urls'))]from django.db import models# Create your models here.from ckeditor_uploader.fields import RichTextUploadingFieldclass Post(models.Model):    content = RichTextUploadingField(null=True, blank=True)#

 

需要指出的是：在开发阶段，这样设置settings.py已经足够了。但是，到了正式部署你的应用时，你需要设置好STATIC_ROOT和STATIC_URL，并运行manage.py collectstatic命令，该命令会将ckeditor相关的静态资源拷贝到你的工程下。

使用

如何应用ckeditor

django-ckeditor提供了两个类：RichTextField和CKEditorWidget，分别用于模型和表单。内容型网站通常在后台会有一个文章发布和编辑的界面，如果你想让该界面拥有一个富文本编辑器，只需按如下方式定义你的django模型：

from django.db import modelsfrom ckeditor_uploader.fields import RichTextUploadingField# Create your models here.class Post(models.Model):    content = RichTextUploadingField(null=True, blank=True)

admin.py

from django.contrib import adminfrom app01.models import Postadmin.site.register(Post)

 

启动应用看看，这时可以看到文章标题输入框显示了富文本编辑框 但是怎么可以用的工具那么少？？？ 别急，在settings目录中增加如下配置即可

CKEDITOR_CONFIGS = {    'default': {        'skin': 'moono',        # 'skin': 'office2013',        'toolbar_Basic': [            ['Source', '-', 'Bold', 'Italic']        ],        'toolbar_YourCustomToolbarConfig': [            {
    'name': 'document', 'items': ['Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates']},            {
    'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},            {
    'name': 'editing', 'items': ['Find', 'Replace', '-', 'SelectAll']},            {
    'name': 'forms',             'items': ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',                       'HiddenField']},            '/',            {
    'name': 'basicstyles',             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},            {
    'name': 'paragraph',             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',                       'Language']},            {
    'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},            {
    'name': 'insert',             'items': ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe']},            '/',            {
    'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},            {
    'name': 'colors', 'items': ['TextColor', 'BGColor']},            {
    'name': 'tools', 'items': ['Maximize', 'ShowBlocks']},            {
    'name': 'about', 'items': ['About']},            '/',  # put this to force next toolbar on new line            {
   'name': 'yourcustomtools', 'items': [                # put the name of your editor.ui.addButton here                'Preview',                'Maximize',            ]},        ],        'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here        # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],        # 'height': 291,        # 'width': '100%',        # 'filebrowserWindowHeight': 725,        # 'filebrowserWindowWidth': 940,        # 'toolbarCanCollapse': True,        # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',        'tabSpaces': 4,        'extraPlugins': ','.join([            'uploadimage', # the upload image feature            # your extra plugins here            'div',            'autolink',            'autoembed',            'embedsemantic',            'autogrow',            # 'devtools',            'widget',            'lineutils',            'clipboard',            'dialog',            'dialogui',            'elementspath'        ]),    }}

 

非admin注册时

class f(forms.Form):    t1=fields.CharField(max_length=30)    # t2=forms.Textarea()from app01.forms import fdef test(request):    return render(request,'test.html',{
   'at':at,'form':f})网页
     
      
       {
   { form.t1 }}
      
     
        

 

网页头加载

 图片上传遭遇csrf问题

考虑 ajax上传 

 

现在一个完美的富文本输入框就完成了，现在可以在admin页面愉快的输入内容丰富的文章了~ 如何在前端显示ck输入的内容 前端要显示ck输入的内容时，在需要使用的页面头部引入：

 光这样你会发现，显示出来的时候是原始的包含各种html标签等符号的内容，此时在变量中增加safe过滤即可，如：{
  { content | safe }}。 缺少上传1

from ckeditor_uploader.fields import RichTextUploadingField。。。class MyModel(models.Model):    content = RichTextUploadingField(verbose_name=u‘内容‘)

 

 

media 目录显示问题  

开发模式下

from django.conf import settingsfrom django.conf.urls.static import staticurlpatterns = patterns(’’,# ... the rest of your URLconf goes here ...) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

 

实际部署nginx配置

# Django media        location /media {                alias /home/lyndon/github/Mathematician/dijkstra/media;        }        location /static {                alias /home/lyndon/github/Mathematician/dijkstra/static;        }