Solution to render Shortcodes in Admin Editor

Question

I have asked this question about a year ago and I am hoping there is some type of simple solution which will allow me achieve my objective. So here it goes:

I often utilize shortcodes within the Admin Editor but when I turn this over to client they often don't understand how they work.

What I am looking for is a solution which would simply automatically render the associating output of shortcodes within the admin WYSIWYG editor.

From a visual perspective, I would like for this to display similar to when the "more" line show up or when an image is displayed within the editor. By this I mean that the user would see the output but would only be able to delete it but not edit the content of the rendered shortcode.

Answer 1

It's actually not too bad to do what you're asking. This should take you about an hour to do your first one, and 10 minutes to do subsequent ones.

Ultimately what you're going to do is create a TinyMCE plugin. Here's what you should arm yourself with to start:

1. Creating a tinymce plugin general guide
2. Some rock solid example code
3. A general guide on adding a TinyMCE plugin to WordPress. I found this one, which seems adequate.

You now have all the tools to get 'er done! Of all this, the code that will be of most interest to you is this piece in the WP example code:

40  _do_gallery : function(co) {
41          return co.replace(/\[gallery([^\]]*)\]/g, function(a,b){
42                  return '<img src="'+tinymce.baseURL+'/plugins/wpgallery/img/t.gif" class="wpGallery mceItem" title="gallery'+tinymce.DOM.encode(b)+'" />';
43          });
44  },

Here, the shortcode for a gallery gets replaced with an img tag. The img tag has the class wpGallery, which gets styled up all pretty by the CSS found here.

Not bad, huh? I hope this helps!

Cheers~