search

jazzband / django-tinymce

TinyMCE integration for Django
http://django-tinymce.readthedocs.org/
MIT License
1.25k stars 317 forks source link

TinyMCE does not follow STATIC_URL changes controlled through django-storages #401

Closed Demo318 closed 1 year ago

Demo318 commented 1 year ago 
<head>
  <script src="/admin/jsi18n/"></script>
  <script src="https://storage.googleapis.com/final-sigma-website-resources/admin/js/vendor/jquery/jquery.min.js?X-Goog-Algorithm=GOOG4-RSA-SHA256&a ... 9819cfd"></script>
  <script src="/static/tinymce/tinymce.min.js"></script>
  <script src="https://storage.googleapis.com/final-sigma-website-resources/admin/js/jquery.init.js?X-Goog-Algorithm=GOOG4-RSA-SHA256&a ...969db42"></script>
</head>

In development on my own machine, where collectstatic delivers all static files to a standard staticfiles/ folder in my project directly, TinyMCE loads just fine when editing fields in localhost:8000/admin interface.

In production, I use django-storages[google] to host static & media files from Google Cloud. The above code is from the <head> of my admin page in production. As you can see, all static-files urls are properly changed except TinyMCE.

Django Storages for Google Cloud Storage

My Project

Demo318 commented 1 year ago

Implemented a solutions in my settings.py (similar to this):

#Tiny MCE fix
if config('CODE_ENVIRONMENT') == 'production':
    from django.contrib.staticfiles.storage import staticfiles_storage

    TINYMCE_JS_URL = staticfiles_storage.url('tinymce/tinymce.min.js')
    TINYMCE_JS_ROOT = staticfiles_storage.url('tinymce')

Now tinymce.min.js and tinymce/ are pulling from Google Cloud Storage like everything else:

<script src="https://storage.googleapis.com/final-sigma-website-resources/tinymce/tinymce.min.js?X-Goog-Algorithm=GOOG4-RSA-SHA256&amp;X-Goog-Credential=final-sigma-website%40final-sigma-website-357112.iam.gserviceaccount.com%2F20220725%2Fauto%2Fstorage%2Fgoog4_request&amp;X-Goog-Date=20220725T033134Z&a ... b79fd9"></script>

However, now where the editor should load in my admin page, there's just an empty space.

claudep commented 1 year ago

You may (re-)read https://docs.djangoproject.com/en/4.0/intro/tutorial06/ which shows how you should refer to static files in your templates with the static tag. However, including {{ form.media }} in your form templates should even take care of including tinymce static files.

Demo318 commented 1 year ago

Thanks, @claudep, what about for django's built-in admin app where I'm not personally designing the templates?

claudep commented 1 year ago

The admin app calls {{ form.media }}, so with the normal flow, the proper JS paths should be output without the need to do anything else. (Media.render_js should call the static template tag, which should call staticfiles_storage.url(path)).

Demo318 commented 1 year ago

I think I found it.

The request to download tinymce/theme.min.js goes to the right Google Cloud Storage bucket, but it does not include the authentication parameters.

Right now looks like this (and returns a 403 error):

Request URL: https://storage.googleapis.com/final-sigma-website-resources/tinymce/themes/silver/theme.min.js

When it should look like this (the init_tinymce.js request that loads just fine):

Request URL: https://storage.googleapis.com/final-sigma-website-resources/django_tinymce/init_tinymce.js?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=final-sigma-website%40final-sigma-website-357112.iam.gserviceaccount.com%2F20220725%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20220725T123730Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=4dbeb4944b654d1 ... b199ddfb6

I can do some digging to find where that url is defined, unless @claudep you know off-hand.

claudep commented 1 year ago

I guess this might be a django-storages usage or bug issue. I'm not using this package so unfortunately cannot help much.