Tinymce 弹出窗口在 Django 管理中为空白

Posted

技术标签:

【中文标题】Tinymce 弹出窗口在 Django 管理中为空白【英文标题】：Tiny MCE popups blank in Django admin 【发布时间】：2010-10-08 23:48:55 【问题描述】：

我有 tinyMCE 在 django 管理员中工作，但所有弹出窗口都是空白的 （例如，编辑 html，添加图片）

弹出的html页面的路径都存在于正确的位置

http://thatch.media/js/tiny_mce/themes/advanced/source_editor.htm?mce_rdomain=thatch

整个js文件夹的权限设置为777

这是我的模特

class Page(models.Model):
    title = models.CharField(max_length=200)
    ...

    class Admin:
        js = ('js/tiny_mce/tiny_mce.js', 'js/textareas.js')

有什么想法吗？

【问题讨论】：

【参考方案1】：

我也遇到了这个问题，使用 Amazon S3 存储桶来存储静态媒体，包括 TinyMCE javascript。

更明确地说，您的静态媒体必须位于主站点的子域中。因此，如果您的网站在 foo.bar.com 上运行——您的静态媒体必须在 static.foo.bar.com 之类的东西上——请注意 static.bar.com 和 static-foo.bar.com 不会好的。 （如果您的网站在 bar.com 上，那么 static.bar.com 就可以。）

因此，一旦您从子域中提供静态媒体（对于 S3，请参阅帮助我的 Amazon S3: Static Web Sites: Custom Domain or Subdomain），然后您需要在 javascript 中的两个位置设置 document.domain：

1) 在 tiny_mce_popup.js 中

2) 在 tiny_mce.js 之前的任何其他内容，或者，在 tiny_mce.init() 调用发生之前的某个脚本标记中的主页呈现 HTML。 （我发现破解 tiny_mce.js 并将其重新上传到 S3 比使用 django-tinymce 的小部件渲染更方便。）

您需要在两个地方都将 document.domain 设置为 MAIN SITE 的域：因此，对于位于 foo.bar.com 的站点以及在 static.foo.bar.com 的静态媒体，您需要设置 document.domain。 domain = "foo.bar.com"

这应该可以防止浏览器中出现任何安全异常，现在一切正常。

【讨论】：

已将document.domain = "mymainsite.com"; 添加到以下文件的顶部... mybucket.s3.amazonaws.com/static/grappelli/tinymce/jscripts/… mybucket.s3.amazonaws.com/static/grappelli/tinymce/jscripts/… 仍然不起作用...我在弹出窗口的控制台中收到一个新错误...未捕获的错误：SecurityError：DOM Exception 18 tiny_mce_popup.js：3 未捕获的 TypeError：无法调用未定义 source_editor.js:1 的方法“requireLangPack”我使用的是 Chrome 版本 27.0.1453.93。 @Brent -- 您的静态文件需要从 mymainsite.com 的子域加载才能正常工作（例如，根据 docs.aws.amazon.com/AmazonS3/latest/dev/… 配置的 s3.mymainsite.com） 确实需要扩展base_site.html并添加<script type="text/javascript">document.domain = 'foo.bar.com';</script>。如果不添加，则会出现关于 document.domain not set on one 的错误。【参考方案2】：

我在 Heroku 上运行我的 django 应用程序并使用 Rackspace CDN 时遇到了这个问题。我的静态文件设置都设置为使用 rackspace CDN 共享文件

解决方案是为特定的 tinymce 文件使用普通的静态文件服务：

class Media:
js = [
    '/static/grappelli/tinymce/jscripts/tiny_mce/tiny_mce.js',
    '/static/grappelli/tinymce_setup/tinymce_setup.js',
]

在我的网址配置中：

urlpatterns += patterns('',
    url(r'^static/(?P<path>.*)$', 'django.views.static.serve', 
        'document_root': settings.STATIC_ROOT,
    ),

)

static.serve 函数允许您在标准静态设置之外提供静态文件。您可以将 url conf 中的静态更改为您想要的任何内容。

【讨论】：

谢谢，这对我来说是唯一的解决方案。 (django-storages + s3) 这是一个可行的解决方案，但很难在管理员范围内覆盖所有媒体类。 这是 IMO 更简单的解决方案，但我使用了 apache Alias conf，并且仅限于特定的 tinyMCE 目录（在我的情况下为 /static/js/libs/tiny_mce/） 呃，我非常讨厌做这个答案。不幸的是，它是唯一有效的。投票。【参考方案3】：

如果这是 TinyMCE 的 JQuery 版本，并且您正在从另一台服务器向运行 Django 的服务器提供媒体（包括 TinyMCE .js 文件），这可能适用：您的浏览器将阻止 TinyMCE 脚本访问来自提供 TinyMCE 的域的 Django 管理 URL。 Safari 的错误控制台是最明确的，例如：

Unsafe JavaScript attempt to access frame with URL http://127.0.0.1/~whatever/django-templates/javascript/tiny_mce/jscripts/more stuffhere/anchor.htm
from frame with URL http://127.0.0.1:8000/admin/flatpages/flatpage/1/.
Domains, protocols and ports must match.

tiny_mce_popup.js 文件中有一个设置声明：

// Uncomment and change this document.domain value if you are loading the script cross subdomains
// document.domain = 'moxiecode.com';

但这对我不起作用。您可以尝试打破规则并从 Django 服务器提供 TinyMCE 脚本，或者将脚本添加到您修改后的管理模板的 HTML 中……但我确信有更好的解决方案。我没有耐心尝试，虽然我确信它已经完成，但我找不到让 TinyMCE 跨域工作的解决方案。

但是，由于用户可以使用可视化编辑器生成可怕的 HTML/内联 CSS 修改，其他解决方案可能会更好：Textile（Ruby 的 Redcloth 提供了visual feedback - 也许有一个基于 PyTextile 的类似 Python 实现或Python-Textile??) 或 markItUp!（JQuery，因此可能会出现同样的问题），它有一个漂亮的可视化编辑工具栏。

如果您对此 move away from 'Word-like' editors 持怀疑态度，

后记：WMD 中有一个很好的 Markdown Javascript 实现，它提供了一个类似于 TinyMCE 的工具栏，语义标记样式（所见即所得 - '所见即所得'）编辑器快捷方式。 GitHub uses a related solution.

【讨论】：

【参考方案4】：

我发现最好的解决方案是通过设置从项目根目录或媒体目录提供 tiny_mce 媒体：

TINYMCE_JS_URL = '%stiny_mce/tiny_mce.js' % MEDIA_URL

【讨论】：

也可以指定TINYMCE_JS_ROOT 这对我来说非常有用，我的大部分静态文件都通过 django 存储在 S3 上，并且我已将 tinymce 文件设置为通过 apache 托管在为我的 django 应用程序提供服务的同一站点上。辛苦了。【参考方案5】：

检查您的设置文件中的 MEDIA_URL。如果将其设置为非相对路径，即 Django 推荐的 http://site.com/media_url，则 tiny_mce 将弹出空白页。将此设置为相对路径，它应该可以工作。

更多详情请见http://pageworthy.com/blog/2009/mar/09/tiny_mce-blank-popups/。

【讨论】：

几个月来我一直在寻找这篇文章。最后，谢谢。【参考方案6】：

我遇到了空白弹出问题。就我而言，问题在于将它们放在另一个子域中。 不确定是不是你的情况。

我通过编辑解决了 tiny_mce_popup.js 并添加

document.domain = window.location.hostname.replace('static.','');

当然，用您的子域替换 static 以获得“domain.com”字符串

然后在将 .tinymce(...) 附加到您的元素之前再次定义 document.domain。根据您所在的位置，您可以使用服务器端脚本或上面的相同代码。从这里的网站查看 wiki http://tinymce.moxiecode.com/wiki.php/How-to_load_TinyMCE_crossdomain

【讨论】：

我使用：'this.is.an.involve.domain.name'.split('.').splice(-2).join('.') ==> "domain.name"。调整拼接参数以确保正确的零件数量满足您的要求。所以：document.domain = window.location.hostname.split('.').splice(-2).join('.');【参考方案7】：

我将媒体从http://thatch.media 更改为http://thatch/media 现在它可以工作了

也许与处于不同领域有关？

【讨论】：

是的，浏览器实现了称为同源策略的安全功能，这意味着页面将可以访问与页面起源相同域的所有脚本。这是解释同源政策的 wiki 链接。 en.wikipedia.org/wiki/Same_origin_policy【参考方案8】：

遇到同样的问题，我对所有 js / css 等都使用 Amazon S3，所以相对 url 不是一个选项。

为了使它工作，我不得不编辑 - tiny_mce_popup.js 和 tiny_mce.js，在顶部添加以下行：

document.domain = 'moxie.org';

希望对你有帮助……

【讨论】：

这个问题是当你下次运行 collectstatic 命令时它会被覆盖【参考方案9】：

我输入了您的答案，因为我遇到了同样的问题。第一个答案帮助我理解了问题，但没有解决问题。

所以...您已将代码上传到 heroku，从那里尝试打开使用 TinyMCE 弹出窗口的 .js，但静态文件（因此弹出窗口使用的 .js）已上传到另一台主机（在我的情况下是 S3)。

所以我调查了一下，发现了这个解决方案： https://devcenter.heroku.com/articles/django-assets 顺便说一句，这就像一个魅力，我的项目已经开始工作了！

因此，基本上，您所做的就是将您的静态文件与您的代码一起上传到同一个地方，这样您就不会违反同源政策。

【讨论】：

【参考方案10】：

您必须在 tiny_mce_popups.js 以及配置文件中更改 document.domain。 流程如下：

http://wiki.moxiecode.com/index.php/TinyMCE:Cross_domain_loading

希望对您有所帮助。

【讨论】：

以上是关于Tinymce 弹出窗口在 Django 管理中为空白的主要内容，如果未能解决你的问题，请参考以下文章

tinymce 4：如何创建自己的文件管理器？

Django、TinyMCE 字段序列化不一致

django富文本编辑器

Plone 4.3b1 中的 TinyMCE 1.3b8 链接？

将“另存为新”按钮添加到 Django 外部对象编辑弹出窗口

如何在 Scenebuilder 中为空的 TextField 输入添加错误弹出窗口