Allow overriding the JS_URL and JS_ROOT settings - important when staticfiles are hosted on CDN

[dokterbob]

When Django's staticfiles are hosted externally, for example through a CDN, the same-origin policy prevents TinyMCE from functioning properly. Therefore, I made a small patch to allow overriding of JS_URL and JS_ROOT from Django's settings.

When this setting is not specified, the original defaults are used. When they are specified, the defaults are ignored.

[aljosa]

i don't think this changes anything, if TINYMCE_JS_URL or TINYMCE_JS_ROOT is defined in settings it will be used.
"JS_URL = getattr(settings, 'TINYMCE_JS_URL', ...)" will use TINYMCE_JS_URL if defined in settings.
if there is a bug it's somewhere else, i'll if i can find something.

[aljosa]

i've setup django-tinymce with files served from aws s3 and it's working.
could you provide more details or setup a tmp site where it's not working?

[aljosa]

i've figured out that tinymce popups don't work because of CORS and other domain issues but didn't figure out how this solves it.
@dokterbob could you provide more details about what you did to make it work?

[aljosa]

tinymce doesn't work properly when used from CDN so i'm closing this issue

more info:
http://www.tinymce.com/develop/bugtracker_view.php?id=4897

[dokterbob]

@aljosa You are completely right about TinyMCE not working from a CDN or static file cache. That is exactly why I made this patch.

If Django's staticfiles is used to host static files from a different domain, TinyMCE goes haywire. This is why one would want to be able to override the URL for TinyMCE to point to a location somewhere on the same domain (ie. the server running Django).

Also, as often TinyMCE is used only from Django's admin interface (rather than by all visitors of a site) it makes sense to be able to keep the TinyMCE files out of the Amazon WebFront's etc. to be able to cache efficiently.

Please reopen and reconsider. Let me know whether you have further questions.

[jaap3]

@dokterbob I think @aljosa point is that your patch doesn't change the current behavior. It's already possible to override the JS_URL / JS_ROOT by setting TINYMCE_JS_URL / TINYMCE_JS_ROOT.

Currently this is done:

JS_URL = getattr(settings, 'TINYMCE_JS_URL', os.path.join(settings.STATIC_URL, 'tiny_mce/tiny_mce.js'))

This means that, unless TINYMCE_JS_URL is set, JS_URL will be STATIC_URL + 'tiny_mce/tiny_mce.js'

Your patch doesn't seem to change that at all.

[aljosa]

@dokterbob i'm using django-tinymce on heroku.com where staticfiles are on AWS S3 so tinymce doesn't work but i can set TINYMCE_JS_URL to something like "/tinymce/tiny_mce.js" and pass it through web server and it works as expected.

so this should work w/ current django-tinymce and i am using it in such a way so could you please check again why it's not working for you?
your patch has the same result as lines 14/15 unless i'm missing something?

[gamb]

@aljosa I've been trying to replicate, but a little confused, my settings are:

TINYMCE_JS_ROOT = os.path.join(ROOT_PATH, 'static', 'tiny_mce')
TINYMCE_JS_URL = '/tinymce/tiny_mce.js'

But obviously, my staticfiles are tied up with serving S3/ Boto, so I get a 404 for tiny_mce.js...

GET http://127.0.0.1:8000/tinymce/tiny_mce.js/ 404 (NOT FOUND) 

Just to confirm I have checked what TINYMCE_JS_ROOT gets set to, and the path is correct for the tiny_mce static directory. Also, noteworthy; i'm running this through django-cms, but don't see why that would affect it.

Much appreciated if you can elucidate your previous comment. Perhaps I also need to set-up something in urls.py??

[aljosa]

@Advm you need to have static files (or just tinymce files) available and add url pattern to serve files:

add something like this to urls.py:

urlpatterns = patterns('',
    [...]
    url(r'^static/(?P<path>.*)$', 'django.views.static.serve', {
        'document_root': "/static/files/path/",
        'show_indexes': False,
    }),

where "/static/files/path/" should actually exist and be result of django collectstatic command.
everything starting with http://127.0.0.1:8000/static/ will serve files from "/static/files/path/" and if tinymce is in that folder:

TINYMCE_JS_URL = '/static/tinymce/tiny_mce.js'

will enable tinymce even if other files are on S3.

try this and let me know if you need more instructions

[gamb]

Thanks so much for the quick response, thought static.serve wouldn't work in prod for some reason, ...totally works :)

Appreciate it.

[aljosa]

@Advm static.serve doesn't work as good as nginx but if you're using gunicorn + gevent backend you'll get good performance.
i'm using it on heroku this way and it works just fine

[lesha4ever]

Hi. Does someone get success with Django + Heroku + TinyMCE + S3 static file (including tinymce static on S3)?

If it works Django + Heroku + TinyMCE + S3 static file (EXCLUDING tinymce files on static S3 - but tinyMCE files on heroku ) - please write how

I have problem with popup windows - link on popup is correct but it is blank

my config:

admin.py:
from settings import STATIC_URL

class Admin(admin.ModelAdmin):
class Media:
js = [
#STATIC_URL + 'tiny_mce/tiny_mce.js',
#STATIC_URL + 'js/tinymce_setup.js',
'/static/tiny_mce/tiny_mce.js',
'/static/js/tinymce_setup.js',

    ]

---

setting:
STATIC_ROOT = normpath(join(DJANGO_ROOT, 'static'))
STATIC_URL = 'https://s3.amazonaws.com/<bucket_name>/'
STATICFILES_DIRS = (
normpath(join(DJANGO_ROOT, 'assets')),
)

STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'compressor.finders.CompressorFinder',
)

TINYMCE_JS_URL = '/static/tiny_mce/tiny_mce.js'
TINYMCE_JS_ROOT = '/static/tiny_mce'
#TINYMCE_JS_URL = STATIC_URL + '/tiny_mce/tiny_mce.js'
#TINYMCE_JS_ROOT = STATIC_ROOT + '/tiny_mce'

JS_URL = TINYMCE_JS_URL
JS_ROOT = TINYMCE_JS_ROOT

if 'staticfiles' in INSTALLED_APPS or 'django.contrib.staticfiles' in INSTALLED_APPS:
if not JS_URL:
JS_URL = os.path.join(STATIC_URL, 'tiny_mce/tiny_mce.js')
if not JS_ROOT:
JS_ROOT = os.path.join(STATIC_ROOT, 'tiny_mce')
else:
if not JS_URL:
JS_URL = '%sjs/tiny_mce/tiny_mce.js' % STATIC_URL
if not JS_ROOT:
JS_ROOT = os.path.join(MEDIA_ROOT, 'js/tiny_mce')

JS_BASE_URL = JS_URL[:JS_URL.rfind('/')]

---

url.py:
url(r'^static/(?P.*)$', 'django.views.static.serve', {
'document_root': STATIC_URL,
# 'document_root': '/static/tiny_mce',
'show_indexes': False,
}),

Any combination without success

Only when in admin.py:

js = [
STATIC_URL + 'tiny_mce/tiny_mce.js',
STATIC_URL + 'js/tinymce_setup.js',
]
I see on admin page TinyMCE but it opens blank popup (link is correct https://s3.amazonaws.com/<bucket_name>/tiny_mce/plugins/advlink/link.htm)

[aljosa]

@lesha4ever try using https://github.com/aljosa/django-tinymce/tree/tinymce4
it's based on tinymce v4.x and works w/ CDNs like AWS S3

[lesha4ever]

Hmm... I thought i am using it.
It was installed by #pip install django-tinymce
Or you mean that i need manually clone from github this link(branch) and add this to my static files?

I installed and configured it according to http://django-tinymce.readthedocs.org/en/latest/installation.html

But after it (4 installation steps) i can't see it even on edit admin page. Only after adding to admin.py i see it (without popup)

class Admin(admin.ModelAdmin):
...
class Media:
js = [
STATIC_URL + 'tiny_mce/tiny_mce.js',
STATIC_URL + 'js/tinymce_setup.js',
]

I need TinyMCE only on admin page. May be after install's steps i do some wrong config?

[aljosa]

@lesha4ever tinymce4 is development branch w/ tinymce v4.x and isn't released as django-tinymce.
you can install it using (after you remove current django-tinymce "pip uninstall django-tinymce"):

pip install -e git://github.com/aljosa/django-tinymce.git@tinymce4#egg=tinymce4

It should work for your use case, just follow README:
https://github.com/aljosa/django-tinymce/tree/tinymce4

[lesha4ever]

Many thanks. It "mainly" works.
On local dev PC - all perfect
But when i push it to heroku - on admin page i see tinymce, can edit text and etc but on "buttons" i see wrong icons. On local i see picture of "bullet list, numbered list" but on heroku some rundom picture of squares and rhombuses.

for heroku added requirement: -e git://github.com/aljosa/django-tinymce.git@tinymce4#egg=tinymce4

and to admin.py

def formfield_for_dbfield(self, db_field, **kwargs):
     if db_field.name in ('1', '2', '3'):
       return db_field.formfield(widget=TinyMCE(
           attrs={'cols': 80, 'rows': 30},
           mce_attrs={'external_link_list_url': reverse('tinymce.views.flatpages_link_list')},
       ))
     return super(EntryAdmin, self).formfield_for_dbfield(db_field, **kwargs)

urls.py:
(r'^tinymce/', include('tinymce.urls')),

[lesha4ever]

I think i understand where is problem.
In tinymce setting is dynamic and forms url to tinymce files that stored on configured static method

JS_URL = staticfiles_storage.url('tinymce/tinymce.min.js')
JS_ROOT = staticfiles_storage.url('tinymce')
JS_BASE_URL = JS_URL[:JS_URL.rfind('/')]

and site with tinyMCE + S3 static successful loads core js and css data from CDN. But internally in css link to fonts is relative. For example:

'tinymce';src:url('fonts/tinymce.eot');src:url('fonts/tinymce.eot?#iefix') format('embedded-opentype'),url('fonts/tinymce.woff') format('woff'),url('fonts/tinymce.ttf') format('truetype'),url('fonts/tinymce.svg#tinymce') format('svg')

As we see link is relative, and i think it relative to core site link, not to CDN.

[lesha4ever]

http://stackoverflow.com/questions/13215994/javascript-not-rendering-in-django-app-on-heroku
http://docs.aws.amazon.com/AmazonS3/latest/UG/EditingBucketPermissions.html