Tip of the Week #3: Plugins for your "classic" WikiStyle wiki


PBwiki has now unveiled the new Point-And-Click editor, and it’s coming along nicely. Although there are still a few formatting snags, I have yet to see a web-based rich-text editor not go through a few growing pains (I’m still mad enough at WordPress’s editor for eating up my code last time that I wrote this entire post in HTML).

But rich-text has its place, and the new editor has many innovative things going for it, like the ease with which you can insert media and files. But of all these innovations, probably the most powerful is the plugin system, which allows you to extend your wiki in all kinds of fun ways.

Under the hood

This little blurb is exclusively for geeks who want to know how the plugins work. If you don’t really care and would just like to get to the code, continue on to “The Juicy Details”.

The plugins used by the Point and Click Editor are not rendered as-is, but are instead inserted into your wiki page as specially formatted images. During final rendering as a wiki page, the code is parsed and these images are replaced with whatever bits of code are necessary to output the plugin. For example, if you were to insert a 30 Boxes calendar into your Point and Click page, the HTML behind the scenes looks like this:

<img src="/plugin_helper.php?plugin=30boxes_pbwiki&size=L" isapbwikiplugin="1" />

The “isapbwikiplugin” parameter lets the parser know that the code needs to be replaced with the actual plugin code and isn’t a real image. Now that you know what happens, let’s go on to the plugins themselves!

The Juicy Details

Going through all of the plugins on a test wiki with Point and Click functionality, then translating the code into something usable in the Classic wikis seems like a daunting task. Lucky for you (and not so much for me), I’ve been going through them, looking for the best ways to implement each one. I also made a few improvements:

  • The width of the calendar can now be changed a little bit. This allows the calendar to fit a little better on pages with SideBars
  • The Google Maps address link in this version opens a new window that has no browser buttons or anything, for a cleaner look.

This list is just unfolding, but I’ll continue to add more stuff as I figure them out. Just follow the instructions on the wizard below, and paste the generated code into your own wiki. You can also bookmark the wizard page, which can be found here.


I don’t need no stinkin’ plugin

Finally, plugins are usually unnecessary for embedding code from other sites. Google Gadgets, YouTube, and many other sites give you html/script to embed in your site already. For that to work flawlessly in WikiStyle, just wrap the contents in <raw escaped=0>...your embedded code...</raw>.

The End

I think that’s enough stuff to play with for this week. Next Monday, expect even more of the plugins to be adapted. Also, to mix it up a little, I’ll start a brief beginner’s look at CSS! See everyone soon, and feel free to contact me at dochuyen84@gmail.com.

Jason Nguyen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: