使用 tinyMCE django-cms 的页面扩展

Question

大家好，我使用 documentation of Django CMS 创建了一个页面扩展并且工作完美，

现在我的扩展页面中有两个 text_area，我想将 TinyMCE 库包含到我的 text_area

为此我在 models.py

from django.db import models
from cms.extensions import PageExtension
from cms.extensions.extension_pool import extension_pool


class IconExtension(PageExtension):

  image = models.ImageField(upload_to='icons', blank=True)
  description_short = models.TextField(blank=True, null=True, verbose_name="Short Description")
  description_large = models.TextField(blank=True, null=True, verbose_name="Large Description")

extension_pool.register(IconExtension)

我的admin.py有这个

# from django.forms import *
from django.forms import ModelForm 
from django import forms
from django.db.models import *
from django.contrib import admin
from cms.extensions import PageExtensionAdmin
from tinymce.widgets import TinyMCE


from .models import IconExtension

class IconExtensionForm(forms.ModelForm):
  some_field = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 10}))

  class Meta:
    model = IconExtension
    fields = '__all__'


class IconExtensionAdmin(PageExtensionAdmin):
  form = IconExtensionForm

admin.site.register(IconExtension, IconExtensionAdmin)

现在我得到这个错误

jquery.tinymce.min.js:1 Uncaught TypeError: Cannot read property 'fn' of undefined(anonymous function) @ jquery.tinymce.min.js:1(anonymous function) @ jquery.tinymce.min.js:1
init_tinymce.js:16 Uncaught ReferenceError: tinyMCE is not defined

我的setting.py文件有这个配置

TINYMCE_JS_URL = os.path.join(STATIC_URL, "tinymce/jquery.tinymce.min.js")
TINYMCE_JS_ROOT = '/static/js/tinymce/'
TINYMCE_DEFAULT_CONFIG = {
    'plugins': "table,spellchecker,paste,searchreplace",
    'theme': "advanced",
}
TINYMCE_SPELLCHECKER = True

我在互联网上寻找解决方案，每个人都说我之前加载了 jquery 库...在我的例子中，我的 TinyMCE 字段在弹出窗口内，页面加载弹出窗口有 jquery图书馆第二次..bootstrap是第一次.

当我检查弹出窗口中的元素时，我的加载库是这个

<head>
<title>
Change icon extension | 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">window.__admin_utc_offset__ = "\u002D18000";</script>

<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/djangocms_admin_style/css/djangocms-admin.css">

    <script src="/static/djangocms_admin_style/js/dist/bundle.adminstyle.min.js"></script>


    <script type="text/javascript" src="/en/admin/jsi18n/"></script>
    <script type="text/javascript" src="/static/admin/js/core.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/admin/RelatedObjectLookups.js"></script>
    <script type="text/javascript" src="/static/admin/js/actions.js"></script>
    <script type="text/javascript" src="/static/tinymce/jquery.tinymce.min.js"></script>
    <script type="text/javascript" src="/static/django_tinymce/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/static/django_tinymce/init_tinymce.js"></script>

    <meta name="robots" content="NONE,NOARCHIVE">
    </head>

知道如何在页面扩展中包含 tinyMCE，我的方法是正确的吗？

Answer 1

除非有使用 TinyMCE 的特定要求，否则我建议使用已内置到 Django CMS 文本模块中的集成 (CKEditor)。

# models.py 

class Model1(models.Model):
    text = HTMLField(configuration='CKEDITOR_SETTINGS_MODEL1')

class Model2(models.Model):
    text = HTMLField(configuration='CKEDITOR_SETTINGS_MODEL2')

# settings.py

CKEDITOR_SETTINGS_MODEL1 = {
    'toolbar_HTMLField': [
        ['Undo', 'Redo'],
        ['ShowBlocks'],
        ['Format', 'Styles'],
        ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
    ]
}

CKEDITOR_SETTINGS_MODEL2 = {
    'toolbar_HTMLField': [
        ['Undo', 'Redo'],
        ['Bold', 'Italic', 'Underline', '-', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
    ]
}

使用 tinyMCE django-cms 的页面扩展

page extension with tinyMCE django-cms

django

tinymce

django-cms