javascript - 如何让我的 django-ckeditor 安装被识别？

Question

我一直按照 https://github.com/django-ckeditor/django-ckeditor 上的说明进行操作，并删除数据库以注册 RichTextField()。我的 models.py 是:

#!/usr/bin/python

import settings
from ckeditor.fields import RichTextField
from django.db import models

class Page(models.Model):
    title = models.CharField(max_length = 255)
    body = RichTextField()
    location = models.CharField(max_length = 255, verbose_name = "URL")
    keywords = models.CharField(max_length = 255, blank = True)
    meta_description = models.CharField(max_length = 255, blank = True)
    script = models.TextField(blank = True)
    def __unicode__(self):
        return 'Page "' + self.title + '" at ' + self.location
    class Meta:
        ordering = ['title']

但是，ckeditor 并未显示在“正文”字段中，并且查看管理页面编辑器的页面源代码后发现，没有提及 ckeditor。

JavaScript 包含的内容是:

<title>Add page | Django site admin</title>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="/static/admin/css/ie.css" /><![endif]-->

<script type="text/javascript">window.__admin_media_prefix__ = "/static/admin/";</script>

<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>

我可以/应该做什么，以便“页面”的“正文”字段具有用于其小部件的 CKeditor？

Answer 1

我知道这是一个老问题，但尚未得到解答，它可能对其他人有帮助......

以下是我在 django 上使用 Ckeditor 时遵循的步骤。

1.将“ckeditor”添加到settings.py上已安装的应用程序

2.在settings.py中添加ckeditor配置变量。 (上传位置和工具)

CKEDITOR_UPLOAD_PATH = MEDIA_ROOT
CKEDITOR_BASEPATH = os.path.join(STATIC_ROOT, "ckeditor/")

CKEDITOR_CONFIGS = {

    'default': {
        'toolbar': [
            ['Undo', 'Redo',
             '-', 'Bold', 'Italic', 'Underline',
             '-', 'Link', 'Unlink', 'Anchor',
             '-', 'Format',
             '-', 'SpellChecker', 'Scayt',
             '-', 'Maximize',
             '-', 'Language',
            ],
        ],
        'height': '100%',
        'width': '100%',
        'toolbarCanCollapse': False,
    },
    'full': {
        'toolbar': [
            ['Undo', 'Redo',
             '-', 'Bold', 'Italic', 'Underline', 'NumberedList', 'BulletedList',
             '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv',
             '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock',
             '-', 'TextColor', 'BGColor',
             '-', 'Maximize', 'ShowBlocks',  #'Image' ,
             '-', 'Cut', 'Copy', 'Paste', 'PasteText',
            ],
            ['-', 'SpecialChar',
             '-', 'Source',
            ],
            [
                '-', 'Styles', 'Format', 'Font', 'FontSize'
            ],
            [
                '-', 'BidiLtr', 'BidiRtl'
            ]
        ],
        'width': '100%',
        'height': '600px',
        'toolbarCanCollapse': False,
    },
    'disable': {
        'toolbar': [],
        'width': '100%',
        'height': '600px',
        'toolbarCanCollapse': False,
    },
}

3.为模型添加ckeditor

from django.db import models
from ckeditor.fields import RichTextField

class Article(models.Model):
    content = RichTextField(default="")

4.最后，当您在表单中添加 ckeditor 小部件时，奇迹就会发生:

from django import forms
from django.utils.translation import ugettext_lazy as _
from ckeditor.widgets import CKEditorWidget
from apps.articles.models import Article


class ArticleForm(forms.ModelForm):

    content = forms.CharField(widget=CKEditorWidget(config_name='full'), label=_('Content'))

    class Meta:
        model = Article

当然，别忘了

python manage.py collectstatic

将所有静态数据获取到静态目录，并且

python manage.py makemigrations model_name
python manage.py migrate model_name

创建数据库字段。

还有一件事!使用表单时将其添加到页面头部，以便加载 ckeditor 工作所需的脚本

{{ form_name.media }}

;-)