Opened 12 years ago
Closed 10 years ago
#21605 closed defect (bug) (worksforme)
Fix TinyMCE statusbar styling
Reported by: | azaozz | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | |
Component: | TinyMCE | Keywords: | has-patch |
Focuses: | Cc: |
Description
When the breadcrumb links in the TinyMCE statusbar (at the bottom) are too long (many nested elements with long class names), the statusbar pushes the width of the editor and breaks the layout.
Attachments (5)
Change History (17)
#2
@
12 years ago
What if we just got rid of the "Path" line? If you're really interested in the HTML, switch over to the Text editor, otherwise, is it actually necessary?
#3
follow-up:
↓ 4
@
12 years ago
User-type question: is there any way it could truncate the beginning instead of the end? I think the end of the path is way more important than the beginning. Should probably also indicate the truncation somehow (ellipsis or some such), if it's not an enormous pain.
Or, get rid of it. I guess. It is actually rather useful information, though.
#4
in reply to:
↑ 3
@
12 years ago
Replying to nacin:
It's breadcrumbs for the selected element, comes quite handy in some cases, but not sure how many people actually use it. Also the editor resize "handle" is there, will see if it can be moved out.
Replying to helenyhou:
User-type question: is there any way it could truncate the beginning instead of the end?
The patch hides the end with css, can try to hide the beginning, won't be that clean though.
Or, get rid of it. I guess. It is actually rather useful information, though.
Yeah, it's useful for selecting the parents of the current element (like in Firebug and friends).
#5
@
12 years ago
21605-2.patch removes the breadcrumbs and keeps the resize handle (only on the main editor on Edit Post screen. Other instances of TinyMCE would have it enabled as default).
#6
@
12 years ago
Another possibility to shorten the element path (breadcrumbs) display would be to show only the first css class on each element, same as in Firebug and the browser HTML inspection tools. Will make a patch and send it to the TinyMCE team.
#7
follow-up:
↓ 8
@
12 years ago
- Milestone 3.5 deleted
- Resolution set to worksforme
- Status changed from new to closed
Seems this will be handled upstream.
#8
in reply to:
↑ 7
;
follow-up:
↓ 9
@
12 years ago
- Milestone set to Awaiting Review
- Resolution worksforme deleted
- Status changed from closed to reopened
Replying to azaozz:
Seems this will be handled upstream.
In what way? Do you have a link?
If we keep path, then it should truncate the beginning not the end.
But, I'd rather just get rid of path — perhaps unless SCRIPT_DEBUG. It is useful for debugging but is it really necessary to expose otherwise?
#9
in reply to:
↑ 8
@
12 years ago
Replying to nacin:
But, I'd rather just get rid of path...
We've had the path since adding TinyMCE. It is an "advanced" feature but also the only way to select the outer element when several blocks are nested. For example:
<table><tr><td> <div> <p>Some text</p> </div> </td></tr></table>
The bug described in this ticket seems to be extremely rare. It happens only when several block are nested and each has multiple long-ish class names. I've triggered it while testing/working on the prototype code for the TinyMCE Views but never seen it in a normal post.
Best way to fix this would be to do it with css, however it can only truncate the end of the string, not the beginning. Another option would be not to show the class names or to show only the first when there are several.
#10
@
10 years ago
- Keywords has-patch added
+1 for removing the path. Plugins can easily add it back.
In 3.9, and TinyMCE 4.0, the classes are not shown, so it's very difficult to reproduce this.
In any case, the font size should be adjusted. For the path it's 14px, while for the word count it's 12px. I added a patch which also aligns it with the word count.
To remove the path, we just need to add 'status bar' => false,
to the settings, and check this to calculate the height of the editor.
Before and after: