search

jazzband / django-tinymce

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

django-tinymce==4.0.0: formatselect is not rendered in toolbar #470

Closed urzbs closed 1 week ago

urzbs commented 3 weeks ago

Issue Description

I am experiencing an issue with django-tinymce==4.0.0 in my project. When using the default TINYMCE_DEFAULT_CONFIG, the formatselect option is not rendered in the toolbar.

Configuration Details

Here is the configuration being used:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'tinymce',
    'myapp',
]

TINYMCE_DEFAULT_CONFIG = {
    "theme": "silver",
    "height": 500,
    "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",
}

Observed Behavior

The formatselect option does not appear in the toolbar as expected:

image

Workaround

When downgrading to django-tinymce==3.7.1, the formatselect option is rendered correctly:

image

Reproduction Steps

I have verified this behavior in a minimal Django application that only includes django-tinymce. The relevant parts of the application code are as follows:

HTML Template: (myapp/testing.html)

<!DOCTYPE html>
<html lang="en">
<head>
    {{ form.media }}
</head>
<body>
    {{ form }}
</body>
</html>

View:

from django.views.generic import FormView
from myapp.forms import MyModelForm

class MyFormView(FormView):
    form_class = MyModelForm
    template_name = "myapp/testing.html"

Model:

from django.db import models
from tinymce.models import HTMLField

class MyModel(models.Model):
    description = HTMLField()

Form:

from django.forms import ModelForm
from myapp.models import MyModel

class MyModelForm(ModelForm):
    class Meta:
        model = MyModel
        fields = '__all__'

Tested Browsers:

Request for Assistance

Could you please investigate why the formatselect option is not rendered in the toolbar with django-tinymce==4.0.0? Any guidance or solutions to resolve this issue would be greatly appreciated.

Thank you for your assistance.

claudep commented 3 weeks ago

In version 4, we migrated from TinyMCE 5 to TinyMCE 6. Search for formatselect on https://www.tiny.cloud/docs/tinymce/6/migration-from-5x/ and you will find your answer!

urzbs commented 3 weeks ago

Thank you for the quick help! replaced formatselect with blocks

TINYMCE_DEFAULT_CONFIG = {
    "theme": "silver",
    "height": 500,
    "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 | blocks | "
               "bold italic backcolor | alignleft aligncenter "
               "alignright alignjustify | bullist numlist outdent indent | "
               "removeformat | help",
}

The default for TINYMCE_DEFAULT_CONFIG (when not specified in settings.py) is the old schema Also the documentation examples: https://django-tinymce.readthedocs.io/en/latest/installation.html#configuration

claudep commented 3 weeks ago

Oh yes, absolutely, we need to fix that!

claudep commented 3 weeks ago

Would you like to check the pull request referenced above?

urzbs commented 3 weeks ago

The pull request looks good to me for this issue in particular.

However, I have also cross-checked the more extensive example with version 3.7.1 to test if there are any elements (in the toolbar) missing.

Yes, there are. Additionally, there is a mismatch between:

So, the updated configuration should be:

TINYMCE_DEFAULT_CONFIG = {
    "height": "320px",
    "width": "960px",
    "menubar": "file edit view insert format tools table help",
    "plugins": "advlist autolink lists link image charmap print preview anchor searchreplace visualblocks code "
               "fullscreen insertdatetime media table paste code help wordcount spellchecker",
    "toolbar": "undo redo | bold italic underline strikethrough | fontfamily fontsize blocks | alignleft "
               "aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor "
               "backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | "
               "fullscreen preview save print | insertfile image media pageembed template link anchor codesample | "
               "a11ycheck ltr rtl | showcomments addcomment code",
    "custom_undo_redo_levels": 10,
    "language": "es_ES",  # To force a specific language instead of the Django current language.
}

(matching yours)

However, I have noticed that in both versions, you don't see any interactable changes in the toolbar for the following items:

I'm not sure if these require any other special treatment to show up.

The menu bar seems fine, but I can't guarantee I didn't miss something 🤣

claudep commented 2 weeks ago

Thanks a lot for your review :heart:, I'll suggest a second patch for these updates.

claudep commented 2 weeks ago

Updates suggested in pr #472

urzbs commented 2 weeks ago

Thank you for addressing this issue so promptly and professionally. Your quick and efficient handling of the matter was truly extraordinary.

This experience has significantly increased my trust in the django-tinymce project, and I look forward to its ongoing support and development.

claudep commented 2 weeks ago

Thanks for your kind words!

claudep commented 1 week ago

I think we can consider now this as fixed. Thanks very much for the report.