[Fixed]-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.htm
from 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.

I found that the best solution is to just serve tiny_mce media from project root or media dir by setting:

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

Check your MEDIA_URL in your settings file. If this is set to a non-relative path, i.e. http://site.com/media_url as Django recommends, tiny_mce will popup blank pages. Set this to a relative path and it should work.

See http://pageworthy.com/blog/2009/mar/09/tiny_mce-blank-popups/ for more details.

I’ve had the blank popup problem. In my case the problems was having them in another subdomain.
Not sure it’s your case.

I solved by editing
tiny_mce_popup.js
and adding

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

Of course replace static with your subdomain to have the “domain.com” string

Then define again document.domain before attaching .tinymce(…) to your elements. Depending on where you are, you can use server side script for that, or the same code above. See wiki from website here http://tinymce.moxiecode.com/wiki.php/How-to_load_TinyMCE_crossdomain

Had the same problem, I am using Amazon S3 for all js / css etc so relative urls was not an option.

To make it work, I had to edit – tiny_mce_popup.js and tiny_mce.js, added the following line at the top:

document.domain = 'moxie.org';

Hope this helps …

i entered to your answer because i was having the same problem. The first answer helped me to understand the problem but not to fix it.

So…you had your code uploaded to heroku, from where you where trying to open the .js that used the TinyMCE popup, but the staticfiles (so the .js used by the popup) was uploaded to another host (in my case S3).

So i investigated a little and found this solution:
https://devcenter.heroku.com/articles/django-assets
Which, by the way, worked like a charm, and i had my project already working!

So, basically, what you do with this is to upload your static files along with your code to the same place, so you dont violate the Same Origin Policy.

You have to change the document.domain in tiny_mce_popups.js as well in your config file.
The procedures is described here:

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

Hope this help.