Tip of the Week #8: Point-and-Click Editor, part 2

Jason Nguyen

In last week’s entry, I discussed some of the more basic aspects of the new Point-and-Click editor. This week, we continue exploring the editor, looking at the following aspects (click the links to go directly to that section):

• Plugins are probably the most powerful of the new additions to PBwiki, and once used correctly are a simple way to integrate eye-catching and effective widgets into your wiki.
• The formatting options of the P&C editor are more flexible than in the old editor, but for them to be effective, you should pick the right one for the job.
• The SOURCE button allows users to see the underlying HTML of the wiki page being editing. You’ll find out below whether you need it.
• Sometimes, you’ll need to insert code snippets. Look below for the most effective ways to use HTML, CSS, Javascript, etc.

Plugins

You access the plugins with the “Insert Plugin” button on the upper-right portion of the editing toolbar. Clicking this button opens up a pop-up with five categories: Productivity, PBwiki Magic, Video, Photos, and Chat. Most of these options will open further pop-ups allowing you to add functionality like a chat room (by Gabbly), stock charts (by Yahoo!), videos (from YouTube), and photo slideshows (Bubbleshare.com and Slide.com).

For long-time PBwiki users, you’ll want to look towards “PBwiki Magic” for a lot of the functions you’re used to, such as the <toc> (Table of Contents), recent changes, recent visitors, and the number of page views. In this category, there is also the very awesome new Equation editor, which uses LaTeX style equation input. Finally, this category features the “HTML” link, which is the best way to insert code into the page.

Text Formatting

You’re given a lot of options that are very similar to a regular software word-processor, such as different fonts, background and text colors, pre-set formats, and size. Here’s a run-down of some considerations.

• The options you set only apply for the specific text you’re working with. Therefore, this is not how you should be setting a wiki-wide font, text-color, size, background color, etc. Those tasks are better handled by CSS, which I will discuss in more detail in a future post.
• Instead, think of these options as ways of emphasizing text for specific uses. For example, I can easily highlight the parts of the text I find important. Alternately, I can draw attention to text that is larger or in a different color. These options are useful, but if over-used (like we’ve seen here), can become a headache to read.
• Don’t use the Format options for sizing. Those headers are important for organization of the page, especially if you want to make an automatic Table of Contents (which is based on headers).

The SOURCE button

Clicking this button switches to a code display mode, showing all the background HTML that makes the Point-and-Click Editor tick. My suggestion for anybody who doesn’t know HTML is to simply not bother with it at all. If you accidently click it, just click it again to get to the normal display. Even for folks who DO know HTML, this is not a good way to enter HTML, as the editor may or may not know how to render it in Point-and-Click mode, and if it messes up the rendering, it may ruin the formatting of other things on the page as well. In a worst-case scenario, you may not be able to revert, forcing you to either save the unwanted change or trash any un-saved additions you made.

The ideal situation would be some way to insert HTML without PBwiki messing with it in any way whatsoever, akin to <raw escaped=0>…content…</raw> in the WikiStyle editor. Luckily, the solution already exists.

Inserting code

As mentioned earlier, using the PBwiki Magic -> HTML plugin allows you to insert code (HTML, Javascript, CSS) into your wiki that PBwiki will leave completely alone in your page. Remember if you’re inserting Javascript and have a free public wiki, users will have to manually enable Javascript with the enable scripts link in the bottom-left of the page. The code appears like other plugins in editing mode, as a little image link, but will be inserted directly into the full wiki page.

Conclusion

I hope everybody can use the tips from these two weeks as a launchpad to start exploring the Point-and-Click editor in your own wiki. Remember that experimentation is often the best way to discover things, and if you get stuck, feel free to ask questions in the forums or contact me.

Next week, I’ll discuss effective ways of integrating images into your wiki. See you then!

Jason Nguyen