Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
    
Have you read this (wp.tutsplus.com/tutorials/theme-development/…) article? Check the TinyMCE part. –  cr0z3r Dec 15 '11 at 15:50
1  
I have read that but a far as I can tell it just deals with creating/registering short codes and creating buttons for the editor to quickly insert short codes... But no info on rendering those shortcodes with the HTML block counterparts as I described. –  NetConstructor.com Dec 15 '11 at 18:51
    
Do you mean that you want to include a visual aid that's representative of whatever shortcode you're including, and not actually replacing the shortcode with the real-deal HTML? i.e. the gallery placeholder, which isn't actually the gallery code, but rather a visual placeholder which is merely letting the user know, "Hey, there's a gallery here"? –  Matthew Boynes Jan 30 '12 at 5:27
    
Exactly! And I would like for it to be a bit flexible thus allowing me to customize it on a per shortcode basis (similar to like you said the gallery or when an image is included) –  NetConstructor.com Jan 30 '12 at 10:55

1 Answer 1

up vote 6 down vote accepted

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.

share|improve this answer
    
interesting! let me ask you... what are your thought in having the actual content of all shortcodes automatically converted into the associating content? –  NetConstructor.com Feb 1 '12 at 9:09
    
That would all depends on the content. First, remember that some HTML gets stripped, has trouble rendering in TinyMCE, etc. Second, let's say your shortcode renders a block of complex HTML -- if your user went to edit it, they could inadvertently break it. Third, if your shortcode has options, those options are now rendered uneditable unless you kill the whole HTML block and redo the shortcode. Chances are, if your code is complex enough that you need shortcode, I think the placeholder is your best bet. –  Matthew Boynes Feb 1 '12 at 14:09
    
did you ever happen to see a solution by anyone else on this? –  NetConstructor.com Nov 23 '12 at 23:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.