Underground Web Designs Blog

Recently I created two plugins for Tiny MCE, the WYSIWYG editor that MODx uses that allow you to easily add contact information and event information to your posts and webpages, using the hCard and hCalendar microformats. Unfortunately, installing these plugins on MODx is not quite as streight forward as it might be, so here are some step by step instructions:

1. Download the TinyMCE hCard and hCalendar plugins from UndergroundWebDesigns.com. Once the files are downloaded, unzip them. Inside the unzipped folder you will find a folder with the name of the plugin, and a readme file.
2. Download the TinyMCE 3 plugin for MODx and install it following the directions on it’s site. This is fairly easy, you just upload the files and run an install program.
3. Once TinyMCE 3 is installed on your MODx site, open your favorite FTP program, and upload the hCalendar and hCard folders you downloaded and unzipped in step 1 into http://www.yoursite.com/assets/plugins/tinymce309/jscripts/tiny_mce/plugins/
4. Log in to your MODx Admin area, and click on “tools - > configuration”.
5. In the configuration screen, click the “Interface and Features” tab, and scroll down to the bottom where the TinyMCE settings are.
6. Make sure the TinyMCE Theme is set to “Custom”
7. In the “Custom Plugins” box, move to the end of the list of plugins and add “hcard” and “hcalendar” (no quotes), to the list, separated by commas.
8. Add “hcard” and “hcalendar” (no quotes) to one of the “Custom Buttons” boxes, again separated by commas.
9. Save your changes.
10. Open a page to edit. You should see two new buttons in the Document Content edit window… one to insert hCard data, the other to insert hCalendar data.