tinyMCE hCard Plugin
The tinyMCE hCard plugin was created to allow programs which use the tinyMCE WYSIWYG editor to more easily implement the hCard microformat. hCard allows you to embed information about a person or company, such as their name, address, and contact information into a web page in such a way that it is understandable by both humans and computers. This in turn means that scritps, search engine spiders, and other automatic "bots" can use the information your provide to better understand the content of your site.
For more information about what microformats are, please visit the microformats page.
(Please note: this plugin is in currently in beta, so it may have some undocumented bugs. If you find any, please send them to
bugs [at] undergroundwebdesigns.com)
Installation Instructions:
(NOTE: see this post for step by step instructions on how to use this plugin with MODx)
- Download the tinyMCE hCard v0.1 plugin. (Note, the plugin only works in tinyMCE 3+).
- Unzip the archive, and open the hCard Plugin folder.
- Inside this folder you will find a folder named hcard, and a readme file containing these installation instructions.
- Upload the hcard folder to your tinyMCE installation's plugins directory.
- Add "hcard" to the list of included plugins in your tinyMCE.init line, and also add "hcard" to one of the button rows. Here is an example tinyMCE.init line with just hCalendar installed:
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "hcard",
theme_advanced_buttons1 : "hcard"
});
The plugin should now be installed. If everything has worked out correctly, there will be a new icon in your tinyMCE toolbar that looks like this: ![]()
Using the plugin:
1. To use the plugin, open the document you wish to edit in your tinyMCE editor, place the cursor where you wish to insert your event, and click the hCard button:
. This will open a popup box where you can enter the person's name, company name, and other details. There are three links along the top of the dialog box -- these links open different sections of the form, and allow you to input an address and other contact details.
If you are inputing data about a business, simply leave the first name, middle name, and familiy name boxes blank and put the business name in the "organization" box.
Once you've entered the information you wish to include, click the "Insert" button to create your hCard.
The information will be added into your document at the current cursor location, in the following form:
Name
Company Name
Phone Number(s)
Address
IM Addresses
Note
Tags
If you input a URL, the entire first line becomes a link to that URL. Besides displaying nicely on the page, the plugin also marks up your data following the hCalendar microformat, so that computer programs and spiders can understand it.
Known Issues:
The plugin does not seem to work properly in Safari on the Mac, the outer Div (which defines the event) is removed. This means that events created in Safari will not be recognized by microformat tools. This could be a limit of tinyMCE in Safari.
Changes:
Version 0.1:
- Initial Release
Bugs:
If you use the plugin and find a bug, or have a feature request, please send it to bugs [at] undergroundwebdesigns.com.
Donations:
If you find this plugin useful, please consider leaving a small donation to help support the development of more plugins, and to keep me encouraged!
Thanks!
Licence and Attribution:

tinyMCE hCard Plugin by Alex Willemsma is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Based on the hCard Creator at microformats.org.
