CODEWITHSUNDEEP
pythondjangodjango-tinymcedjango-filebrowser
Rodrigo Yanez
Rodrigo Yanez

Reputation: 71

Using django-tinymce with django-filebrowser to upload images to a blog post

I am implementing django-tinymce together with django-filebrowser to be able to include media files in the text editor of a blog.

Everything seems to be working fine, but when I click on the image button in the text editor, the dialog box doesn't include a button to upload a file.

I have gone through the threads on this topic in the forum but cannot find a solution to solve it.

These are the settings:

INSTALLED_APPS = [
    # file-browser
    'grappelli',
    'filebrowser',
...
    'tinymce',
...]

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / 'static']
STATIC_ROOT = BASE_DIR / 'staticfiles'
MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'


#django-filebrowser:

# Path to filebrowser static files
FILEBROWSER_DIRECTORY = 'filebrowser/'
FILEBROWSER_STATIC_URL = STATIC_URL + 'filebrowser/'
FILEBROWSER_MEDIA_ROOT = BASE_DIR / 'media/uploads/'
FILEBROWSER_MEDIA_URL = '/filebrowser/media/'
FILEBROWSER_SORT_BY = 'date'
FILEBROWSER_MAX_UPLOAD_SIZE = 10485760  # 10 MB
EXTENSIONS = {
    'Image': ['.jpg','.jpeg','.gif','.png','.tif','.tiff'],
    'Video': ['.mov','.wmv','.mpeg','.mpg','.avi','.rm'],
    'Audio': ['.mp3','.mp4','.wav','.aiff','.midi','.m4p'],
    'Document': ['.pdf','.doc','.rtf','.txt','.xls','.csv','.docx','.xlsx']
}
SELECT_FORMATS = {
    'File': ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'zip', 'rar', 'tar', 'gz', 'bz2', 'csv'],
    'Image': ['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff'],
    'Video': ['swf', 'flv', 'mpg', 'mpeg', 'mp4', 'mov', 'avi', 'wmv'],
}


#django-tinymce
TINYMCE_JS_URL = 'https://cdn.tiny.cloud/1/{api-key}/tinymce/5/tinymce.min.js?referrerpolicy=origin'

TINYMCE_DEFAULT_CONFIG = {
    "theme": "silver",
    "height": 500,
    "menubar": True,
    "plugins": "advlist,autolink,lists,link,image,charmap,print,preview,anchor,searchreplace,visualblocks,code,fullscreen,insertdatetime,media,table,paste,code,help,wordcount,"
    "searchreplace,visualblocks,code,fullscreen,insertdatetime,media,table,paste,"
    "code,help,wordcount",
    "toolbar": "undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | image | help | imageupload",
    "image_upload_url": "/media/uploads/images/",
    "file_picker_callback": "upload_image",
    'file_browser_callback': 'mce_filebrowser'
}


TINYMCE_SPELLCHECKER = False
TINYMCE_COMPRESSOR = False
TINYMCE_FILEBROWSER = True

project urls.py:

...
from filebrowser.sites import site

...
urlpatterns = i18n_patterns(
    path('admin/filebrowser/', site.urls),
    path('grappelli/', include('grappelli.urls')),
...
    path('tinymce/', include('tinymce.urls')),
...

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

models.py

...
from filebrowser.fields import FileBrowseField


class Post(TranslatableModel):

...
    translations = TranslatedFields(
        title = models.CharField(_('title'), max_length=250, blank=True, null=True),
        slug = models.SlugField(_('slug'), max_length=250, allow_unicode=True, blank=True, null=True),
        body = models.TextField(_('body'), blank=True, null=True)
    )


class Media(models.Model):
    MEDIA_TYPES = (
        ('image', 'Image'),
        ('video', 'Video'),
        ('audio', 'Audio'),
    )

    post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='media')
    media_file = FileBrowseField("File", max_length=200, directory="media/")
    media_type = models.CharField(max_length=10, choices=MEDIA_TYPES, default='image')

    def __str__(self):
        return f"{self.media_type} for post {self.post.title}"

forms.py

...
from django.conf import settings
...
from tinymce.widgets import TinyMCE



class PostForm(TranslatableModelForm):
    body = forms.CharField(widget=TinyMCE(attrs={'cols': 80, 'rows': 30}, mce_attrs={
                                                'file_browser_callback': 'filebrowser',
                                                'file_browser_callback_url': '/admin/filebrowser/browse/',
                                                'file_picker_callback': 'filebrowser',
                                                'file_picker_callback_url': '/admin/filebrowser/browse/',
                                            }))
    language = LanguageField()

    class Meta:
        model = Post
        fields = ['featured_image', 'language', 'title', 'body', 'tags', 'publish', 'status']
        widgets = {
            'title': forms.TextInput(attrs={'class': 'hidden'}),
            'slug': forms.TextInput(attrs={'class': 'hidden'}),
        }

Upvotes: 1

Views: 803

Answers (1)

Rodrigo Yanez
Rodrigo Yanez

Reputation: 71

Finally it worked with the solution in this post

https://dev.to/zankoan/upload-local-imagevideo-in-django-tinymce-text-editor-mkn

I tried it before with no success, but there should be something I changed in the settings in the meantime, and when I tried again the button showed up.

Upvotes: 0

Related Questions