[wp-trac] [WordPress Trac] #25873: MCE View placeholder element is stripped out by TinyMCE

[WordPress Trac]

#25873: MCE View placeholder element is stripped out by TinyMCE
--------------------------+-----------------------------
 Reporter:  seamusleahy   |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Editor        |    Version:
 Severity:  normal        |   Keywords:
--------------------------+-----------------------------
 The placeholder `div` ( or `span`) that is inserted as a placeholder for
 the Backbone view to hook on to is stripped out by TinyMCE because it is
 empty.

 `wp.mce.view` allows you to add advance UI elements in the TinyMCE editor.
 The prime example is taking a shortcode and replacing it with a custom UI
 using Backbone Views similar to the Gallery shortcode does.

 1. Add your custom shortcode view

 {{{
 wp.mce.view.add( 'myshortcode', { shortcode: 'myshortcode' } );
 }}}

 2. Edit a post with your shortcode of `[myshortcode]`.
 3. The editor loads the source code from the text area (which includes the
 shortcode) and runs it through several filters.
 4. The `wpView` TinyMCE plugin calls `wp.mce.view.toViews()` during the
 TinyMCE's `onSetContent` event. It deals with the string that will become
 the HTML. It regexs the string to find the views, in our case the
 shortcode `[myshortcode]`.
 5. It creates an instances of the our view including a the Backbone View
 as part of it and then '''leaves an empty placeholder `<div>` to attach to
 later on'''.
 {{{
 <div class="wp-view-wrap wp-view-type-myshortcode" data-wp-
 view="__wpmce-18" contenteditable="false"></div>
 }}}
 6. TinyMCE takes the source code string and runs a final filter that
 includes '''removing empty `<div>`s'''.
 7. TinyMCE takes the string source code and converts it into the actual
 DOM.
 8. The `wpView` TinyMCE plugin calls `wp.mce.view.render()` during the
 TinyMCE's `onSetContent` event. This is handles the editor's DOM to
 '''look for the placeholder `<div>`s''' to associate with the view
 instance and then render using the Backbone view.

 I attached a patch to add a non-breaking space in the placeholder to
 prevent it's removal. From research, it appears this is the easier and
 more reliable way than trying to tweak the TinyMCE settings as TinyMCE is
 aggressive on removing empty `<div>`s.

--
Ticket URL: <http://core.trac.wordpress.org/ticket/25873>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software