Make WordPress Core

Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#29293 closed defect (bug) (fixed)

TinyMCE DOM stack status bar isn't pinned

Reported by: johnbillion's profile johnbillion Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version: 4.0
Component: TinyMCE Keywords: has-patch
Focuses: ui Cc:


A while ago I considered opening a ticket to propose removing the status bar in TinyMCE which displays the cursor position's DOM stack (eg. "p » strong") but azaozz pointed out that this can be useful. I still think it should be removed for simplicity, but I can see that it can have some value.

Regardless, this status bar is not currently pinned to the bottom of our pinned visual editor in 4.0. If your content is long enough to scroll within the editor, this status bar disappears off the bottom, while the word count status bar remains pinned in place.

Tested in Chrome 36 on OS X.

Attachments (4)

29293.patch (2.0 KB) - added by iseulde 9 years ago.
29293.2.patch (2.5 KB) - added by azaozz 9 years ago.
29293.3.patch (2.0 KB) - added by iseulde 9 years ago.
29293.4.patch (8.8 KB) - added by iseulde 9 years ago.

Download all attachments as: .zip

Change History (9)

#1 @wolfhoundjesse
9 years ago

This behavior is caused because the elements are completely separate from each other, although they appear seamless when together. The post status is in a table outside of TinyMCE. Now that the editor expands as content exceeds the textarea, the TinyMCE statusbar is pushed down with the content while the post status never travels beyond the bottom of the viewport.

A few solutions that will maintain familiarity (none of which are pretty):

  1. Move the post status into the TinyMCE where it doesn't belong.
  2. Hack up editor.css (editor.min.css) to reposition the TinyMCE statusbar.
    • Position it at the bottom, fixed somewhere above the post status which is contained in an element without an explicit height. Don't forget to enable it to change from fixed position to relative position as the editor pulls away from the viewport.
    • Position it underneath the TinyMCE buttons. Some of the above issues will apply.
    • Change the order in which the element is generated (the ID is mceu-34 on my installation) so that it can be reordered at the top. Yuck.
  3. Throw it away (you've seen the ruckus in the forums).
  4. Put the editor back the way it was (I love the just write idea, so this isn't even an option in my mind).

What else?

9 years ago

#2 @iseulde
9 years ago

  • Keywords has-patch added; needs-patch removed

That should pin the status bar too. I'll also take a look at the menubar (which is not visible by default).

9 years ago

9 years ago

9 years ago

#3 @iseulde
9 years ago

Okay, this is what I have so far... Needs testing. I'll come back to this later.

#4 @azaozz
9 years ago

  • Resolution set to fixed
  • Status changed from new to closed

In [29579]:

Editor scrolling:

  • Pin the TinyMCE statusbar (elements path) to the bottom.
  • Add support for pinning the menu when present.
  • Add borders from CSS.
  • Optimize getting most elements outerHeight.

Part props avryl, fixes #29293, see #28328.

#5 @helen
9 years ago

#28881 was marked as a duplicate.

Note: See TracTickets for help on using tickets.