将TinyMCE集成到django

时间:2014-07-23 15:27:00

标签: django django-forms tinymce-4 django-tinymce

与大多数文章不同,我不是试图将tinyMCE集成到管理页面中。

我正在构建一个包含多个博客的网站,我想将tinyMCE集成到用户应该输入文章的文本区域。上面提到的textarea不在管理控制台中。

我阅读docs并逐行按照步骤操作。我做的唯一改变是使用STATIC_ROOT而不是MEDIA_ROOT。

我的Setting.py

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tinymce',
    'pages',
    'blog',
    'django_summernote',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
)

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

TEMPLATE_CONTEXT_PROCESSORS = {
    'django.contrib.auth.context_processors.auth',
    'django.contrib.messages.context_processors.messages',
    'django.core.context_processors.request',

}

STATIC_ROOT = 'F:/Projects/trebuchet/site/blog_test/'

STATIC_URL = '/static/'

############ TINY MCE ################

TINYMCE_JS_URL = os.path.join(STATIC_ROOT, "static/tiny_mce/tiny_mce.js")

TINYMCE_JS_ROOT = os.path.join(STATIC_ROOT, "static/tiny_mce")

TINYMCE_JS_URL = os.path.join(STATIC_ROOT,'static/tiny_mce/tiny_mce_src.js')
TINYMCE_DEFAULT_CONFIG = {
    "relative_urls": "false",
    "theme": "advanced",
    "theme_advanced_buttons1":     "formatselect,bold,italic,underline,link,unlink,bullist,undo,code,image",
    "theme_advanced_buttons2": "",
    "theme_advanced_buttons3": "",
    "plugins": "paste",
    "height": "550px",
    "width": "750px",
}

TINYMCE_SPELLCHECKER = True
TINYMCE_COMPRESSOR = True

BlogForm.py

class addBlog(forms.ModelForm):
    body = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}))
    class Meta:
        model = ArticleModel
        fields = ['title', 'body',  'category']
        widgets = {'body': TinyMCE(attrs={'cols': 80, 'rows': 30})}

    class Media:
                js = ( 'static/tiny_mce/tiny_mce.js', 'static/tiny_mce/blog_textareas.js')

models.py

class Category(models.Model):
    name = models.CharField(max_length=30)
    description = models.TextField(max_length=100)

    def __unicode__(self):
        return self.name



class ArticleModel(models.Model):
    title = models.CharField(max_length=200)
    body = models.TextField()
    datetime = models.DateTimeField()
    username = models.CharField(max_length=50)
    category = models.CharField(max_length=30)
    tags = JSONField()

    def __unicode__(self):
        return self.title

现在我尝试了很多解决方案,但没有成功。

1 个答案:

答案 0 :(得分:2)

那么,为什么不尝试使用javascript版本的ckeditor将ckeditor(另一个富文本编辑器)添加到您的管理站点,例如:

http://ckeditor.com/download下载ckeditor并解压缩zip文件,将解压缩的文件夹放在静态根目录中。将ckeditor静态文件添加到管理员的模板中,如:

在admin> base.html(模板)中:

<script src="{{STATIC_URL}}ckeditor/ckeditor.js"></script>

从您的类ArticleModel,我假设您要将ckeditor添加到body,在管理网站中,它将创建一个ID为id_body的TextField,所以您需要做的就是这个(在admin&gt; base.html)中:

<script>
  CKEDITOR.replace( '#id_body' );
</script>

Ps:我在这里忽略了表格。