[wp-trac] [WordPress Trac] #18311: Support HTML in image captions.

Fri Feb 10 14:36:54 UTC 2012

#18311: Support HTML in image captions.
--------------------------------------------------+-----------------------
 Reporter:  prettyboymp                           |       Owner:  sushkov
     Type:  task (blessed)                        |      Status:  assigned
 Priority:  normal                                |   Milestone:  3.4
Component:  Editor                                |     Version:
 Severity:  normal                                |  Resolution:
 Keywords:  needs-patch ux-feedback dev-feedback  |
--------------------------------------------------+-----------------------
Changes (by sushkov):

 * component:  General => Editor

Comment:

 Replying to [comment:28 jeremyclarke]:
 >
 >
 > Replying to [comment:26 sushkov]:
 > > Added a diff that makes current editor allowing HTML. Though I still
 have to add some filtering on what HTML is allowed to be inserted.
 > > File is not minimized!
 >
 > Just tried this and it is a good partial solution! It does make links
 work if inserted with the media uploader, and gives a advanced-code-based
 solution for adding/editing links in captions from the visual and HTML
 editors.
 >
 > Is there something unusual about this patch though? I tried {{{patch -p0
 FILENAME.diff}}} and it totally didn't work. I just went in and aplied
 them by hand.
 >
 > Anyone trying this patch should remember to set the
 [http://codex.wordpress.org/Debugging_in_WordPress#SCRIPT_DEBUG script
 debug constants] so your install uses the dev JS files which are modified
 by the patch:
 >
 > Here's a rundown of things I tried and the results:
 >
 > * '''Insert caption w/ link into post with uploader''': works naturally.
 Links can be added with single or double quotes. Re-opening the media
 library and editing the link then re-inserting also works perfectly and is
 simple.
 > * '''Switch back and forth between Visual and HTML''': works, doesn't
 break the results of insert.
 > * '''Visible in TinyMCE''': Yes but confusing. Shows HTML code in
 caption box because the < and > tags are actually &lt;, &gt;, so the tags
 look like raw HTML when displayed. (see screenshot below)
 > * '''Edit caption+link directly in TinyMCE''': Works but awkward because
 you have to write HTML in the Visual editor. If you just type in < and >
 then they get saved as &lt; which then gets the same treatment as links
 inserted by the media uploader.
 > * '''Edit caption+link in "edit image" popup of TinyMCE''': Works
 partially - link can be edited but "caption" field is populated with the
 entity-encoded version of the caption, which normal users and even HTML-
 aware-but-not-expert users will find very confusing to work with. (see
 screenshot below)
 > * '''Editable in HTML editor''': works but awkward - same problem as in
 Edit Image popup with entity-encoded HTML instead of ", ', < and >. Makes
 it very hard to edit. Obviously things like &gt; are more reasonable in
 this context than TinyMCE.
 > * '''Link works when viewing post/gallery''': yes, looks right and
 behaves as expected.
 >
 >
 > Personally I would be satisfied with the compromise that in HTML editor
 links-in-captions show up entity-encoded with &gt;, &39; etc. in their raw
 form. People using the HTML editor who really know HTML will understand
 what's happening and other types of users can be taught to simply delete
 and re-insert captions using the media uploader if they get something
 wrong. It even has decent WRITE-ability given that you can copy/paste from
 one caption into another to create links in captions by hand, and maybe
 some freaks will enjoy typing out &39;'s themselves.
 >
 > So the main thing this patch lacks is elegance when used inside the
 Visual editor. Having the links show up in the preview as raw HTML is
 probably not acceptable, and having them show up as HTML-encoded in the
 'Edit Image' popup is definitely not acceptable.
 >
 >
 > '''Making caption-HTML show up as HTML in the Edit Image popup'''
 >
 > Screenshot of the caption field from the Edit Image popup inside the
 Visual Editor:
 >
 > [[Image(http://simianuprising.com/wp-content/uploads/2012/02/tinyMCE-
 link-in-caption-editimage-screenshot.png)]]
 >
 > This strikes me as the easier problem. We need to filter the existing
 caption to entity-decode it as much as possible before sending it to the
 popup, and upon saving the popup we need to run the same encoding
 procedure used when inserting an image from the uploader popup. I took at
 stab at doing this and ended up on {{{editimage.dev.js}}} but I just can't
 figure out what does what.
 >
 > It seems that when the Edit Image popup loads, it already has something
 to convert &39; to ' and &quot; to " because those show up normally. The
 problem in the popup is the &lt; and &gt; so wherever the quote un-
 encoding happens hopefully it won't be too hard to account for those as
 well.
 >
 > Sushkov or Azaozz, do you know where this happens? What do you think is
 the best solution?
 >
 > '''Showing HTML in captions properly in the WYSIYWG preview'''
 >
 > This is a lot harder, and I don't even know where to start. Here's how
 it looks now:
 >
 > [[Image(http://simianuprising.com/wp-content/uploads/2012/02/tinyMCE-
 link-in-caption-screenshot1.png)]]
 >
 > This is very logical behavior because the WYSIWYG is just showing us
 what the HTML would look like when viewed on a post. The thing is that
 when we actually show it on a post, the caption content will be run
 through the {{{html_entity_decode()}}} first, making the link active
 instead of encoded, so ideally we should incorporate that logic into the
 behavior of the editor, just like the shortcode is already parsed out to
 have the grey box.
 >
 > What we need is to get TinyMCE, in whatever place it stores it's
 impression of the markup, to use a {{{html_entity_decode()}}}-style
 version of the caption text rather than the encoded version that is
 actually saved. Anyone have any idea how to make that happen? Is this
 likely to even be possible?
 >
 > One move that might simplify the problem would be to completely lock
 editing of the caption in the WYSIWYG, and force people to use the Edit
 Image popup to do so. It would be annoying in some cases but it would also
 be clear and simple and probably not a huge pain most of the time. Really
 captions are very complicated and even without links, editing them inline
 causes weird results (what happened when I tried to delete a caption+image
 by starting with the caption was not at all what I expected). Again I have
 no idea what would be involved in taking this route, so anyone who knows
 please speak up.
 >
 > Worst case scenario I'd accept if the answer is just "it looks wierd in
 the Visual editor if you have links in captions". It's still better than
 being unable to create links at all.
 >
 > '''Thanks for reading, it will be great to have this issue resolved'''
 >
 > Sushkov, please let me know if you think I got something wrong about
 your patch and what it does.
 >
 > Others, please test it too!

 Sorry for patch, my mistake. Should be fixed now.
 Please make sure you are testing only after you replace the
 {{editor_plugin.js}} with the patched {{editor_plugin.dev.js}}.

 Afaik, at this moment this issue needs dev-feedback and an UI decision.

 Thanks.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/18311#comment:29>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software