WPsites Home
WordPress : state-of-the-art content management system Login to your account

Replacing shortcodes in TinyMCE with a graphic

Oct28
2011 Written by Simon 3 Comments
fromthis

To cut a long story short I went to the Liverpool WordPress interest group last night and one thing that came up that no one seemed to have a solution for was users messing up short codes and how could we replace the short code with a more user friendly image just like the WordPress gallery short code.This must have played on my mind because I woke this morning a couple of hours before the alarm and just had to get up and find a solution.

To create the plugin I had to find a short code which I could then attempt to replace with a graphic and since Spots from Interconnect IT is one of my favourite plugins right now I thought I would use that. So I have created a plugin that will replace any “icitspot” short codes with a small graphic. This plugin isn’t meant for release, it was made quickly this morning (when I say quickly I mean the whole morning) and  isn’t thoroughly tested. Hopefully it may help someone who is trying to achieve similar things with their own plugin short codes.

Quick rundown on how the plugin works

The plugins main php file uses just two filters (mce_external_plugins, tiny_mce_before_init) to add our TinyMCE plugin and an extra CSS file for styling.

Most of the code that does the bulk of the work is inside tinymce-plugin/icitspots/editor_plugin.js which is in effect a TinyMCE plugin.

I borrowed some code and structure from \wp-includes\js\tinymce\plugins\wpgallery\editor_plugin.dev so if you want to add buttons and click events to this then take a look at that file for guidance.

You can download the plugin files here.

Hopefully this will be of use to someone. I’d like to think the code is pretty straight forward. Send us a comment if you have any questions or observations.

Tagged , , , ,
  • http://twitter.com/sanchothefat Robert O ‘Rourke

    Awesome :) Really useful stuff Simon, we’ll be sure to get this into a release as soon as we can.

    Thanks for coming to SWIG as well, was good to meet you (however briefly!)

    • Anonymous

      I put the code together as an example for anyone who maintains a plugin that uses short codes. I suppose really short codes are just that “code”, that should only be visible in the code view, in the visual view there should be a nice user friendly graphic.

      If you wanted to use this in your spots plugin you could maybe even take it a step further. Instead of using the spots icon to replace the short code you could use an image attached to the spot template (spot-templatename.png), defaulting to the standard icon. So then a user would be able to see easily what type/style of spot they have inserted.

      On this site http://www.theweddingcatchers.com/ for instance, I used the spots plugin for the testimonials on the right. So the user only has to create an unordered list and the spot plugin and spot template take care of the styling. Then whoever implements the spots plugin and creates the spot templates can add a small graphic to represent that particular style of spot (see attached image)

      You can also hook into the click event of your short code graphic to display further options similar to what the gallery does. So you guys could show an overlaid edit icon on your short code graphic that when clicked would open the same window that configured the spot initially.

  • http://tribulant.com/ Antonie Potgieter

    Thank you for the wonderful code, it was very useful.

    Anyone having Edit/Delete Image icons on the IMG tag when you click it? The “mceItem” class on the IMG tag prevents them from showing up. It is in your original code, I just missed it when coding mine and couldn’t understand.