MCE View placeholder element is stripped out by TinyMCE

[seamusleahy]

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.

[seamusleahy]

Patch to add  

[azaozz]

Yes, the initial element needs padding. There are several other problems with wpVIew and wp.mce.view. This is being worked on for 3.9. Closing this in favor of #26959.

[azaozz]

Also there's no need to add minified versions of patched JS files. This is handled automatically by Grunt and UglifyJS now.