How can I add h5, h6 tags in WYSIWYG editor? Also, how to upload images and embed YouTube videos? How to enable them?

[kumawataryan]

Hey folks,

I need your help on this. I need to upload images to the built-in WYSIWYG editor. I tried copying and pasting images using cmd + c and cmd + v in the editor (images were loaded but not saved).

How to configure to store editor media? Are there any settings or variables I need to configure(in settings.py)?

Also, how can I embed media like YouTube, and social media (Instagram/Twitter, etc.)?

And there are only for h styles option - how to show all h tags(including h5 & h6).

[kumawataryan]

Hey folks?

[jdenisTLM]

I personaly use the django-tinymce libraries, because it can connect to the django storage config to upload images into.

Then you can use it like that :

...
from tinymce import widgets as tinymce_widgets
...

class MyModelAdminForm(ModelForm):
    class Meta:
        model = MyModel
        fields = (
            "simple_textfield",
            "large_textfield",
        )
        widgets = {
            "simple_textfield": UnfoldAdminTextareaWidget(attrs={"rows": 3}),
            "large_textfield": tinymce_widgets.TinyMCE(),
        }

@admin.register(MyModel)
class MyModelAdmin(ModelAdmin):
    form = MyModelAdminForm

With default tinymce config in settings, it works fine ;)

TINYMCE_DEFAULT_CONFIG = {
    "theme": "silver",
    "height": 250,
    "menubar": False,
    "plugins": "advlist,autolink,lists,link,image,charmap,print,preview,anchor,"
    "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 | help",
}

[kumawataryan]

@jdenisTLM,

I'm absolutely loving the Unfold admin template and how easily it integrates with my project. However, I'm encountering a small customization issue with the editor.

Previously, I experimented with the TinyMCE editor, but its UI wasn't a great fit, and it lacked the intuitive image uploading that I'm used to in WordPress.

The good news is I'll handle the file upload part myself. My main request is this: Could you please help me add h5 and h6 heading tags to the Unfold editor's options? Everything else is working perfectly, and I'm comfortable copy/pasting image links for now.

Thank you for considering this request!

[lukasvinclav]

@kumawataryan below are files which you have to edit to add H5, H6 support. File upload is not in roadmap.

https://github.com/unfoldadmin/django-unfold/blob/main/src/unfold/contrib/forms/static/unfold/forms/js/trix.config.js

https://github.com/unfoldadmin/django-unfold/blob/main/src/unfold/contrib/forms/templates/unfold/forms/helpers/toolbar.html

[kumawataryan]

@lukasvinclav thanks for this ;)