Make WordPress Core

Opened 10 years ago

Closed 8 years ago

#11193 closed defect (bug) (invalid)

aligncenter Broken in Visual Editor When Caption Blank

Reported by: miqrogroove Owned by: azaozz
Milestone: Priority: normal
Severity: normal Version: 2.8.4
Component: TinyMCE Keywords:
Focuses: Cc:


I assume this is a bug in the editor or the admin style sheets. If I upload two images, set them both to align center, and only type a caption for one of them, then the one with the caption will be centered, and the other will be left aligned.

In other words, this works:

[caption align="aligncenter"]<img />[/caption]

This does not work:

<img class="aligncenter" />

The workaround is to click the Preview button, in which case both are aligned center according to my theme.

Attachments (2)

editor_plugin.dev.js.patch (1.5 KB) - added by miqrogroove 10 years ago.
Fixes the aligncenter bug.
editor_plugin.dev.js.2.patch (1.4 KB) - added by miqrogroove 10 years ago.
Cleaned up the class names. Still not sure where to find the properties editor code.

Download all attachments as: .zip

Change History (14)

#1 @miqrogroove
10 years ago

Workaround two: After inserting the "centered" image with no caption, click the Align Center button, which gives:

<p style="text-align: center;"><img /></p>

#2 @janeforshort
10 years ago

  • Component changed from TinyMCE to Upload
  • Milestone changed from 2.9 to Future Release
  • Owner azaozz deleted

Punting due to time constraints and lack of patch.

#3 @miqrogroove
10 years ago

wtf? I thought the purpose of Bug Hunts was to find and fix the bugs?

#4 @miqrogroove
10 years ago

  • Milestone changed from Future Release to 2.9

I'll patch it myself if I have to, just hold your horses.

#5 @azaozz
10 years ago

  • Milestone changed from 2.9 to Future Release

This is not a regression but a browser limitation in IE in contentEditable mode. You'll need one of the workarounds there until it's fixed.

#6 @miqrogroove
10 years ago

I don't understand why this is being put off then? All the patch has to do is match the caption behavior, which is to insert class mceIEcenter in the parent div.

#7 @miqrogroove
10 years ago

  • Component changed from Upload to TinyMCE
  • Owner set to azaozz

#8 @miqrogroove
10 years ago

I'm really angry because of the anti-help response I got here. It prevents me from contributing to the project. So I'm going to upload the patch I made on 2.8.4, say to hell with it, and go out for some fresh air. I tested this on IE, FF, Opera, and Chrome. Use it or don't, it wont affect me.

10 years ago

Fixes the aligncenter bug.

10 years ago

Cleaned up the class names. Still not sure where to find the properties editor code.

#9 @azaozz
10 years ago

It's been a while since I've seen a patch for one of the TinyMCE plugins, thanks. It won't be that easy to properly fix this. The current patch inserts a <div> inside the wrapping <p> and when you switch to the html editor and back it inserts another one inside the <a> tag that is around the image, so it ends up looking pretty bad:

<p><div><a><div><img />...

The align center button adds text-align: center; directly on the wrapping <p> which although not ideal, fixes the annoying IE bug.

#10 @miqrogroove
10 years ago

I'm definitely a bit lost with the buttons. The patch only works for switching between HTML and Visual view so far. Yes, I suspected there were some invisible tags floating around inside TinyMCE, which I do not have experience with.

Could you suggest some way of making the center button behave just like switching to visual view after setting class=aligncenter? If I can get that to be behave in IE then it should be just a matter of writing fancier regexp to handle linked images.

#11 @miqrogroove
10 years ago

btw, when I say Center button, I mean the one in the image editor.

#12 @azaozz
8 years ago

  • Keywords needs-patch removed
  • Milestone Future Release deleted
  • Resolution set to invalid
  • Status changed from new to closed

Cannot reproduce this any more, seems fixed in TinyMCE.

Note: See TracTickets for help on using tickets.