This wiki is hosted by a service called Zoho. They provide a 'WYSIWYG' Visual Editor, invoked via the 'Edit' link displayed on each page (for which you have edit permissions). The editor works roughly like Microsoft Word and also other in-browser visual editors like the one in Gmail. You do not need to learn a wiki markup language, as you might on Wikipedia, for example.

Official docs at Zoho: https://zohowikihelp.wiki.zoho.com/WYSIWYG-Editor.html

Note: those docs have not been updated for a newer revision of the toolbar layout. Most buttons are still there, just not in the same place.

Unfortunately, visual editing within the web browser is not as refined as on the deskop. This applies to many sites that provide visual editing, by no means limited to Zoho.

For smoother sailing, please take advantage of the following notes on noticing and handling these idiosyncrasies.

Before creating pages in earnest, please also see the companion pages:

Super short version

Sandbox. Please try out editing in our sandbox area before tackling serious pages.
Use Firefox for editing! Chrome adds superfluous markup that makes subsequent editing painful. Internet Explorer crashes (not entirely its fault). Safari -- I haven't tried. I (Graham) am actively working with Zoho to improve this situation.
To edit an existing page, use the Edit link at top right of page.
To create a new page, use the Page options > Add sub page function.
- Within the navigation structure, this will create a page subsidiary to the current page.
Right-click context menu: Unlike most browser-based applications, this editor uses the right-mouse-button context menu for many useful functions, generally pertaining to the object clicked upon.
For consistent page appearance, stick to the styles in the Styles drop-down list. That is, don't apply fonts and font sizes unless you have a strong reason. See later notes on the Styles control behavior.
If, in the editor, you see pink or purple text, select it and apply the Normal style to it. Such colored text won't appear on the final page; it's a warning we've implemented to show in the editor any text that isn't styled, and which is apt to position clumsily.
Explore all the menus, to see what's where.
If you want to use moderately advanced feature like tables and inserting images, please see the notes below.

More Explanatory Version

The following sections cover only the features of the editor which need explanation beyond the official docs. (Please see the official docs link above for an overview of all features.)

The visual editor itself is a built-in browser feature which is implemented differently in different browsers. At different web sites, the visual editor is aided by custom javascript that implements additional features, and attempts to deal with the browser incompatibilities, not entirely successfully. As of this writing (October 2015), Firefox is the browser that, at Zoho, misbehaves least for our editing purposes. Chrome adds superfluous markup that makes subsequent editing painful. Internet Explorer crashes (not entirely its fault). Safari -- I haven't tried. I (Graham) am actively working with Zoho to improve this situation.

Style and the Styles control; pink/purple text

For normal pages with consistent appearance, please ignore the Font and Font Size controls, and stick to the Styles combo box (drop-down list).

The Styles combo box control is both a means for you to apply a style, and it is also supposed to change to indicate the style of the text at the current cursor location (just like in MS Word). It mostly does this correctly.

However, (assuming you're using Firefox) it frequently happens that, as you edit, the editor inserts or encounters text that, in the raw html, is not enclosed in an html tag, like 'p' for paragraph, (instead, it's 'bare'), and thus it's not governed by the styles. We have added CSS to color such text pink (in the editor only). Generally, you want to fix this, because this 'bare' text isn't properly incorporated into html paragraphs, it doesn't work properly with CSS styling, it doesn't position quite correctly, and of course causes the Style combo box to misbehave.

To Fix: Simply select the pink/purple text, and apply the Normal style to it (or whatever other style you want).

In Chrome the situation is worse: Chrome inserts superfluous div tags in the underlying HTML, which our custom CSS colors purple. These are more difficult to remove, though the right-click "Remove All Text Styles" may help. Though these superfluous divs have less impact on the final result, it's easier to just use Firefox and accrue less div-encrusted html.

Graham is actively pursuing this with Zoho via multiple bug reports (2015-10-24). We are tracking the situations that precipitate 'bare' mode here: /webdev/Zoho-wiki-issues.html.

Editing the Underlying HTML

Editing the raw html is not normally necessary, but there may be some special situation where it's useful.

If you're html-savvy, you can edit the underlying html using the </> button. It is generally safe to switch back and forth between visual and HTML views (unlike on some markup-based wikis), though editing raw HTML is tedious on a long page.

Editing the HTML may be a useful last resort if the visual editor has managed to insert something that you can't revise in the visual editor.

The HTML view permits you to enter any HTML you wish (except scripts or embedding that might be capable of executing). The wiki software doesn't do a lot of cleanup/coercion, as it might in a wiki-markup-based system.

Links

There's a "Web Link" item on the Insert menu, but it's easier to select the link text and use the right-click-menu > Make Link function.

The Insert/Modify Link dialog offers several different ways of specifying the link target URL which you can explore.

If you are creating a link to a page on this same wiki, please use do not include the domain name. For example: to link to the Web dev home page, use '/webdev/', not 'https://fablabsd.wiki.zoho.com/webdev/'. This way, if we implement a custom domain name in future, fewer links will break. Using the 'Existing Wiki Page' tab of the Insert/Modify Link dialog will generally produce the desired URL without domain name.

As of 2015-11-12, there's a known issue with the Make Link dialog New Page tab's operation. Usually it works fine, but not in the special case of a dot in the link text, or a trailing space. So, if you first select the text 'Issue with mysite.com ' (note dot, and trailing space), and then apply Make Link > New Page, the link that will be produced will subsequently cause the page to always open in edit mode. This issue is reported here and should be fixed soon.

Tables

Compared to other in-browser editors, this editor has a remarkably comprehensive UI for table features. You can encounter most of them by using the insert table button, then use the right-click menu and note all the functions you can perform on the table, row, column or cell.

A column	Another column	A third column
Some content	More content	Even more content

Most of the table features should be self explanatory.

Oddly, the table functions don't include setting a header row with distinct style. You can create the header effect shown here by just making the text bold, and adjusting the Row Background color to light grey in the Row settings.

Column width is a tricky area with HTML tables, as it's set cell by cell. This editor doesn't provide draggable controls to automatically set cell width by column, and though width can be set cell-by-cell, the labor is so onerous that it's better to just use Auto cell width. For this reason, I (Graham) implemented CSS to set cell width to Auto.

You might not want the table to span the entire page.

The table properties dialog allows you to set various percentages of page width.
There's no setting for "auto width", but you can achieve that in two ways:
- Use the table properties dialog to set 0% Or...
- Edit the raw html and delete the 'width: 100%;' from the style attribute.

Don't overlook the "Triangle-X-Triangle" control that appears (seemingly only in Firefox?) that allows you to quickly add and delete rows and columns.

Lists

The bulleted and numbered list toolbar buttons work more-or-less as in MS Word, Gmail and so on.

To indent or outdent list items, use the Indent items on the justification-and-indent toolbar button, or use Tab or Shift-Tab keys.

Annoyingly, converting list items to text (by hitting one of the list buttons a second time) converts them to bare text -- so fix by applying Normal style to them.

Images

The wiki editor's Image insertion feature is helpful in regards to fetching the image you want to insert, but a bit off-target in the formatting area. You can get an acceptable result, with some fiddling.

Simple version

Press the Insert/Modify Image button
- Browse for an image to upload
- Uncheck Shrink to Fit; Uncheck original size
- Layout: You can choose whether you want text to wrap around the image or not
- Border, Spacing - to taste.
- Press Insert button
- Select the image, use handles to adjust size.

Mad Skillz version

You can display the image small on the page, but offer the ability for the user to click the image and expand it. Proceed as follows:

Prepare the image by (re)sizing it so the pixel dimensions are the size you would like in the expanded view. Say 1000 x 600 pixels.
Use the Insert/Modify Image button as above to insert the image, and resize it with the handles.
Now the trick part: The wiki's expando feature is enabled if the image's html img tag lacks plain Width and Height attributes, but has a 'style="width: 123px;" ' attribute (choose your own width, no height needed). So, flip to html editing mode, and edit the img tag accordingly. Here is an example:

Hovering the mouse over this picture should show a hand cursor, and clicking will show an expanded view. Do not subsequently use the handles to resize the image, as that will delete the style="..." attribute and reinstate the plain width and height attributes.

Further details: https://forums.zoho.com/topic/view-image-issues

Copying and Pasting

Copying and pasting within a page works mostly as expected, though sometimes triggers the 'bare text' problem, easily fixed with the Normal style menu.

However, when pasting from other sources, such as other web pages or from MS Word, the pasted text often brings with it elaborate formatting or styling that you probably don't want. There are several alternative approaches to dealing with this issue.

The cleanest approach is to use the "paste unformatted" function, which means use Ctrl-Shift-V instead of plain Ctrl-V.
If you don't use Ctrl-Shift-V, then...
- After pasting the text into the wiki editor, select it all, right-click, and apply the Remove All Text Styles function.
- Or...Before pasting the text into the wiki editor, first paste it into a plain text editor (like Windows Notepad, or equivalent). Then copy that plain text and paste that into the wiki editor.
- Or...For stubborn cases, find an online "HTML Cleaner" website. You can copy elaborately formatted text into such a tool, and have it remove some or all formatting. You can paste the result into the wiki editor.

On pages with more than three headings and longer than a screenfull, a page Table of Contents can be helpful.

Insert menu > Table of Contents.
Once ToC is added to the page, it seems to be editable. There is no point to editing it, the wiki software will automatically update it when you save the page.
Idiosyncracies/Bugs
- 2020-12-xx The implementation for TOC headings stumbles in numerous ways attempting to convert the heading text into links. Using any of the following causes the heading to appear in the TOC, but with a non-functional link:
  - A colon ":"
  - A single quote (ie: apostrophe) sometimes seems to cause a problem, but not sure the exact pattern
  - A period followed by two spaces. (Though period followed by one space is OK).

Hot keys

[TODO]

Attachments (1)

RSS of this page