Fix ugly HTML source editor when TinyMCE is used inside Django admin #483
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 3 commits
January 3, 2025 12:43
The Django admin app's default stylesheet includes a blanket rule that limits the height of all textarea elements, if the browser window is less than 1024 pixels wide. This interferes with TinyMCE's use of a textarea element in the "Source Code" dialog. In that dialog, the textarea (.tox-textarea) is placed inside a div wrapper (.tox-textarea-wrap); due to TinyMCE's stylesheet, the div has a visible border while the textarea itself has none. So the overall effect is that if you click the "Source Code" button, a large dialog box appears (covering most of the browser window), but only the top 120 pixels of that box are usable. This is visually confusing and makes poor use of screen space. Fix this by adding a small additional stylesheet to the AdminTinyMCE widget.
This allows testing of TinyMCE's source code editor feature.
The AdminTinyMCE widget is a slightly more opinionated version of the TinyMCE widget, intended to look and behave slightly better when used inside Django admin pages. Additionally, add an admin interface for editing TestModel objects, to allow testing the functionality of the HTMLField class (in the absence of any custom ModelAdmin class.)
|
As a side note, I found (when trying to use the "testapp" example) that So in order to test this functionality, I also needed to edit |
Natim
approved these changes
Jan 3, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The standard CSS for the
django.contrib.adminapp contains this:(see https://github.com/django/django/blob/main/django/contrib/admin/static/admin/css/responsive.css)
This limits the height of the textarea used by TinyMCE's HTML source editor (the "Source Code" button), when using TinyMCE inside the Django admin app, in a 1024-pixel-or-smaller window. Combined with TinyMCE's styling, the result is unattractive and unintuitive.
(It's likely that the same problem affects any other textareas used by TinyMCE or third-party plugins, but the "Source Code" feature is the only one I know about.)
Of course it's possible for a site to override this using custom stylesheets (though it's not totally obvious how to do so in a clean way.) But since the admin app is meant to work out-of-the-box without customization, it's better for this to be handled by the widget.