Tiny MCE popups blank in Django admin

Question

I have got tinyMCE working in the django admin, but all the popups are blank (eg. edit HTML, add image)

The paths to the popup html pages all exist in the right places

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

The permissions are set to 777 on the whole js folder

This is my Model

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

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

Any Ideas?

Answer 1

I changed the media from being served from http://thatch.media to be http://thatch/media and now it works

Maybe something to do with being in different domains?

Answer 2

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.

Answer 3

I'm having this problem as well, but because of the way my site is setup, I can't use a relative link.

In tiny_mce_popup.js there are the lines:

// Uncomment and change this document.domain value if you are loading the script cross subdomains
document.domain = moxie.org

But I can't get that to fix the problem either...

Answer 4

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 ...

Answer 5

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 reated solution.

Answer 6

We are having the same problem too. TinyMCE works fine in the admin page when it is being run on a development server but when we deploy it to apache and have apache serve the static files and TinyMCE js the pop up sections in the admin area are blank. I have changed the MEDIA_URL/ to a relative path and set the document.domain to our domain but neither has worked.

Has anyone found any other fixes for this problem? The only other solution I see is switching to textile but then we have to convert from TinyMCE but then that might cause issues with our models.

Answer 7

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%3ACross%5Fdomain%5Floading

Hope this help.