Make WordPress Core

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#25873 closed defect (bug) (duplicate)

MCE View placeholder element is stripped out by TinyMCE

Reported by: seamusleahy's profile seamusleahy Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Editor Keywords: has-patch 2nd-opinion
Focuses: Cc:


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' } );
  1. Edit a post with your shortcode of [myshortcode].
  2. The editor loads the source code from the text area (which includes the shortcode) and runs it through several filters.
  3. 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].
  4. 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>
  5. TinyMCE takes the source code string and runs a final filter that includes removing empty <div>s.
  6. TinyMCE takes the string source code and converts it into the actual DOM.
  7. 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.

Attachments (1)

mce-view.diff (6.1 KB) - added by seamusleahy 11 years ago.
Patch to add &nbsp;

Download all attachments as: .zip

Change History (5)

11 years ago

Patch to add &nbsp;

#1 @seamusleahy
11 years ago

  • Keywords has-patch 2nd-opinion added

#2 @seamusleahy
11 years ago

  • Cc seamusleahy added

#3 @azaozz
10 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

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.

#4 @azaozz
10 years ago

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

Note: See TracTickets for help on using tickets.