Editor friendly shortcode: wp.mce.views

One of the coolest features WordPress offers us is the shortcode. They give the possibility to render a complex design with a lot of properties and connect an interface to it to input the values. It also can render an actual template as preview of is final result. The UI can be powered with AJAX through the TinyMCE, but unfortunately the codex of WordPress does not provide information about it.

 

The breaking issue for noob content managers.

Since the use of WP falls often in hands of people not very into the IT world, you will have to avoid scenarios where your shortcode breaks HTML tags. With TinyMCE settings, you have the possibility to isolate automatically your shortcode and give it an easy way to edit his content. A clear example is the builtin gallery system created by WordPress, from which we’ll also inherit the UI. This is called wp.mce.views.

Banner plugin.

Following a not documented example from Wordpres codex, we can create a shortcode [banner] with mce views functionalities for editing. As you should know, inside every shortcode we can put all the kind of data we require to define our element: id, content, size, position, etc. Then we can reuse these information to convert them into HTML data.

 

Exlaining missing part of TinyMCE.

The missing part from above is about the communication between TinyMCE and WordPress functionalities, for instance the banner wrap and how to render the preview.