Tiny MCE popups blank in Django admin

I ran into this problem too, using an Amazon S3 bucket to store static media including the TinyMCE javascript.

To be more explicit -- your static media must be on a subdomain of your primary site. So, if your site is running at foo.bar.com -- your static media must be on something like static.foo.bar.com -- note that static.bar.com and static-foo.bar.com will NOT be okay. (If your site is on bar.com then static.bar.com is fine.)

So, once you have your static media served out of a subdomain (for S3 see Amazon S3: Static Web Sites: Custom Domain or Subdomain which helped me) you then need to set the document.domain in javascript in two places:

1) In tiny_mce_popup.js

2) In tiny_mce.js before anything else, or, alternatively, in your main page's rendered HTML in a script tag somewhere before the tiny_mce.init() call occurs. (I found it more expedient to hack up tiny_mce.js and reupload it to S3, rather than mucking around with django-tinymce's widget rendering.)

You need to set document.domain to the domain of the MAIN SITE in both places: so, for a site at foo.bar.com with static media at static.foo.bar.com you will need to set document.domain = "foo.bar.com"

This should prevent any security exceptions in the browser, and everything will now work right.

I ran into this problem with running my django App on Heroku and using Rackspace CDN. My static file settings were all set to use rackspace CDN to share files

• the solution was to use normal static file serving for the specific tinymce files:

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

In my url conf:

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

)

The static.serve function allows you to serve static files outside of your standard static settings. You can change static in url conf to whatever you want.

If this is the JQuery version of TinyMCE, and you're serving media (including the TinyMCE .js files) from another server to that on which Django is running, this might apply: your browser will prevent the TinyMCE script from accessing the Django admin URL from the domain from which TinyMCE is served. Safari's error console is the most explicit e.g.:

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

There is a setting in tiny_mce_popup.js file that states:

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

but it didn't work for me. You could try breaking the rules and serve the TinyMCE scripts from the Django server, or add the scripts to your modified admin templates' HTML... but I'm sure there's a better solution. I ran out of patience trying, and although I'm sure it's been done, I can't find a solution for getting TinyMCE to work across domains.

However, because of the hideous HTML/inline CSS mangling users can produce with visual editors, other solutions might be better: Textile (Ruby's Redcloth gives visual feedback - perhaps there's a similar Python implementation based on PyTextile or Python-Textile??), or markItUp! (JQuery, so might present the same problem) which has a nice visual editing toolbar.

If you're doubting this move away from 'Word-like' editors, <- that link is a good article on the issue.

Postscript: there's a nice Javascript implementation of Markdown in WMD, that offers a TinyMCE-like toolbar, semantic-markup-style (wysiwym - 'what you see is what you mean') editor shortcuts. GitHub uses a related solution.