2

I've been using this guide

https://www.codingforentrepreneurs.com/blog/s3-static-media-files-for-django/

to get to use S3 for my site's static files.

I had TinyMCE working locally, but once I started using S3 to for my files it's the only part that won't load and the widgets that use it simply don't appear.

In the Chrome Dev Tools console, I am getting the following error:

Failed to load resource: the server responded with a status of 403 (Forbidden)
tiny_mce.js?AWSAccessKeyId=A[ACCESKEY]&Signature=Ze0U3pre28m%2FD9x2ftvTQkXl0OI%3D&Expires=1558648014:1 

Failed to load: https://conucos-bucket.s3.amazonaws.com/static/assets/js/tiny_mce/plugins/autosave/editor_plugin.js

On S3 I've made all files public in the Bucket Public and get Access Denied for 2 files in TinyMCE

static/assets/js/tiny_mce/plugins/media/langs/dv_dlg.js
/conucos-bucket/
static/assets/js/tiny_mce/plugins/searchreplace/langs/mk_dlg.js
/conucos-bucket/

And the rest are successful.

The following is my configuration file which I import in settings.py

import datetime

AWS_GROUP_NAME = #REDACTED
AWS_USERNAME = #REDACTED
AWS_ACCESS_KEY_ID = #REDACTED
AWS_SECRET_ACCESS_KEY = #REDACTED

AWS_FILE_EXPIRE = 200
AWS_PRELOAD_METADATA = True
AWS_QUERYSTRING_AUTH = True

DEFAULT_FILE_STORAGE = 'conucos.aws.utils.MediaRootS3BotoStorage'
STATICFILES_STORAGE = 'conucos.aws.utils.StaticRootS3BotoStorage'
AWS_STORAGE_BUCKET_NAME = 'conucos-bucket'
S3DIRECT_REGION = 'us-east-1'
S3_URL = '//%s.s3.amazonaws.com/' % AWS_STORAGE_BUCKET_NAME
MEDIA_URL = '//%s.s3.amazonaws.com/media/' % AWS_STORAGE_BUCKET_NAME
MEDIA_ROOT = MEDIA_URL
STATIC_URL = S3_URL + 'static/'
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'

two_months = datetime.timedelta(days=61)
date_two_months_later = datetime.date.today() + two_months
expires = date_two_months_later.strftime("%A, %d %B %Y 20:00:00 GMT")

AWS_HEADERS = { 
    'Expires': expires,
    'Cache-Control': 'max-age=%d' % (int(two_months.total_seconds()), ),
}

AWS_QUERYSTRING_AUTH = True

This is my load static on templates that use TinyMCE

    {% load static %}
    <script type="text/javascript" src="{% static "assets/js/tiny_mce/tiny_mce.js" %}"></script>
    <script type="text/javascript" src="{% static "assets/js/tiny_mce/textareas.js" %}"></script>

How would I get TinyMCE to load? Any help at all is appreciated!

Jonel Mercado
  • 41
  • 7

1 Answers1

0

I might be a bit late but maybe my response will help people coming in the future. I had the same problem, this is how I fixed it.

  1. Right click and view page source to see the code to the website
  2. See how the JS files are being loaded at the top. My problem was the way the s3 bucket was being accessed. I removed the {{form.media}} at the top of the page and replaced it with actual urls to the location of the media files on my s3 bucket like so:

"https://ams3.digitaloceanspaces.com/xxxxxxx/static/tinymce/tinymce.min.js" "https://ams3.digitaloceanspaces.com/xxxxxxx/static/django_tinymce/init_tinymce.js"

matshidis
  • 489
  • 5
  • 11