Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
urzbs opened this issue Jun 11, 2024 · 10 comments
Closed

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

urzbs opened this issue Jun 11, 2024 · 10 comments

Comments

@urzbs
Copy link

urzbs commented Jun 11, 2024 •
edited
Loading

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:

  • Chrome Version 125.0.6422.142 (latest as of issue creation-date)

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.
@urzbs urzbs changed the title tinymce==4.0.0: formatselect is not rendered in toolbar django-tinymce==4.0.0: formatselect is not rendered in toolbar Jun 11, 2024
@claudep
Copy link
Contributor

claudep commented Jun 11, 2024

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!

@claudep claudep closed this as completed Jun 11, 2024
@urzbs
Copy link
Author

urzbs commented Jun 11, 2024

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
Copy link
Contributor

claudep commented Jun 11, 2024

Oh yes, absolutely, we need to fix that!

@claudep claudep reopened this Jun 11, 2024
claudep added a commit to claudep/django-tinymce that referenced this issue Jun 11, 2024
@claudep
Refs jazzband#470 - Replaced toolbar elements renamed in TinyMCE 6
d1a6ad7
@claudep
Copy link
Contributor

claudep commented Jun 11, 2024

Would you like to check the pull request referenced above?

@urzbs
Copy link
Author

urzbs commented Jun 11, 2024 •
edited
Loading

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:

  • OLD: fontsizeselect

  • NEW: fontsize

  • OLD: fontselect

  • NEW: fontfamily

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:

  • checklist
  • casechange
  • permanentpen
  • formatpainter
  • emoticons
  • save
  • insertfile
  • pageembed (no effect, media submenu)
  • template
  • codesample
  • a11ycheck
  • ltr
  • rtl
  • showcomments
  • addcomment

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
Copy link
Contributor

claudep commented Jun 14, 2024

  • checklist, casechange, permanentpen, formatpainter, insertfile, pageembed, template, a11ycheck, showcomments, addcomment are only available for paid TinyMCE subscriptions. I'll remove them from the docs.
  • emoticons, save, codesample are plugins and should be mentioned under the "plugins" key. ltr and rtl need the directionality plugin.

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

claudep added a commit that referenced this issue Jun 14, 2024
@claudep
Refs #470 - Replaced toolbar elements renamed in TinyMCE 6
fb7b263
claudep added a commit to claudep/django-tinymce that referenced this issue Jun 14, 2024
@claudep
Refs jazzband#470 - Removed buttons from premium plugins in the docs.
0608c93
@claudep
Copy link
Contributor

claudep commented Jun 14, 2024

Updates suggested in pr #472

@urzbs
Copy link
Author

urzbs commented Jun 14, 2024

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
Copy link
Contributor

claudep commented Jun 15, 2024

Thanks for your kind words!

claudep added a commit that referenced this issue Jun 21, 2024
@claudep
Refs #470 - Removed buttons from premium plugins in the docs.
e79415d
@claudep
Copy link
Contributor

claudep commented Jun 21, 2024

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

@claudep claudep closed this as completed Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@claudep @urzbs