The Page Editor Tool Bar

Most of the visual editor tools have icons on the toolbar at the top of the editing area. Letting the mouse icon still over any the tools icons for a few seconds ("hovering") will reveal a terse description of the tool's function. (See the Kupu Button Index section of the Content Creation with Kupu and Other WYSIWYG Editors document for more details on the buttons.)

Many of the editing tools can be divided into ones that apply to arbitrary sequences of characters, as selected by eg a mouse sweep, and those that apply to whole paragraphs.

The first type, that applies to sequences of characters - either sequences selected by the mouse, or typed after the tool button was hit, and before the tool button was hit again (to toggle back off the feature. These character-level effects include:

• B bold, I italic, X₂ subscript and X² superscript buttons
•  internal links,  external links
• Use internal links to create link references to other pages that are on the same site, and to anchors (sections within) other pages on the same site.
  
  The dialog has a navigation pane on the by which you pick locations relative to the current page's folder, recently referenced pages, the home page, etc, and then you're offered choices among documents (including folders) in the selected location.
  
  Once you select a page in the middle pane, you're offered the option to "Link to anchor:" on that page. If you select the menu, the system will take a while to derive the available anchors and present the available choices, if any.
  
  The anchor linking system has recently gotten more control, but also more complicated. Briefly, to create anchors for the headings and subheadings on a page you must use the insert-anchors icon  (see below) then save the page and use the Edit tab (not just click on the text) to make the newly indexed headings/subheading available for linking in the current edit session.
  
• The external links dialog also has some crucial, but simpler, nuances. It has two tabs: Link to url  and Embed external object:
  
  • Link to url offers a "Preview" convenience, so you can check the accuracy of the URL you enter.
  • Use Embed external object to include html code snippets from, e.g. YouTube, maps sites, and other sites that offer snippets for linking to rich media on their site.
• Similarly,  insert-anchors and  insert-table tools insert their respective element at the beginning of the sequence.
  
  Use the insert-anchors dialog's Manage Anchors activity to create anchors for page headings and subheadings. You have to select Headings in the dialog, select each of the identified headings, and hit ok, then repeat for subheadings (and any other style you want to which you wnat anchors assigned). The assignments will not be seen in the current editing session, unfortunately - you must save and then use the document-actions Edit tab to get a fresh editing session where you can link to the anchors. (I expect this to get less convoluted with subsequent releases.)
•  insert-image
  Inserting images involves selecting an image already uploaded to the site, or downloading a new image in the course of the dialog. The insert-image dialog involves navigation much like the internal links one, described above, with the addition of an Upload image here... option in the middle pane, to download an image from your computer to the folder you navigated to in the middle pane.
  
  By convention, we try to keep more of the images in the /images folder, which you can get to by using the left-pane Home choice and then selecting the images folder in the middle pane. If you upload new images, please situate them there, so it is easy for everyone to find the images that are available. Also, it is important to reduce the scale of your images to around the size that you're going to be presenting, to reduce portal and network load in transmitting the images to visitors.
  
  The right pane, for specifying the image, is also more elaborate.
• if you're uploading a new image, you'll see a typical "Browse" input field, to select the image from your local computer, and you'll have to fill in a label and description of the image
  
• Alignment - if you select left or right alignment, the image will be situated on the side of the page that you specify, and text will be flowed around the other side of the image, if there's any room. If you select center, then the image will take up a line of its own, unless it's very small and can fit on a singe line of text.
• Size - the scaling of the image, for fitting on the page. Select original if you want it to show at original size. As mentioned above, please try to use images not much larger than you want them to display, to avoid bulking up the portal and the network.
• Text equivalent - text that is shown when image display is inhibited, eg sometimes on phone browsers or (uncommon) text-only browsers.

Most of the other tools apply to paragraphs. A paragraph is the text between hard carriage-returns, which are created when you press the Enter key. Here they are (again, see the Kupu Button Indexsection):

•    - left, center, and right paragraph alignment
•  numbered list and  bulleted list
•  outdent and  indent
  outdent and indent are typically used on bullet-list items, but can be used on any paragraph, useful for creating block quotes.  outdent and indent are cumulative:
• indenting a bullet item or plain paragraph increases it's indent relative to the previous paragraph, creating what amounts to an outline subtopic
  
• you can create new-lines in an indented paragraph/bullet item/etc by inserting a "soft" carriage-return or more, created by hitting the Enter key while holding the Shift key…
  
  as i did two times before the beginning of this line, so it's part of and flows with the same bullet, but with a blank line in between.
• (note that hitting Enter on an indented paragraph that doesn't yet contain any text at all dedents the paragraph - a handy shortcut.)
  
•  definition list, alternating bold non-indented lines with plain indented lines.
  

You use the pulldown menu on the toolbar to apply site-consistent styles to paragraphs and characters.

(The selection is extensible, and can vary from the standard one pictured at right.)

The Character styles section applies to sequences of characters, while the rest above it apply to paragraphs.

Be sure to use styles, eg Heading and Subheading, to structure your document, rather than explicitly applying eg Bold and Italic to make your text look like headings. This way, mechanisms like table-of-contents and internal links depend those identifiers to discern headings / subheadings / etc, and when the style definitions for the site are changed, your structures will change along with the rest of the site.

The last few buttons are modeless - they apply to the document or window, as a whole:

•  - an escape hatch to edit the rich text html directly. Hit the button to toggle to a view of the HTML without any of the other toolbar buttons, and then hit it again to return to the WYSIWYG (What You See Is What You Get) view.
  
  There are limits to what you can do with this, because the site is configured to filter out some unreliable or unsafe tags.  However, it can be useful for tinkering with the code when the editor is, eg, inserting spurious blank lines.
  

• finally, there is the  zoom button, to present the editing session using the entire browser window, so you can see more at a time. Hit the zoom button again to return to a regular session.
  

And don't forget to do intermediate saves during long edits…

and hit the when you're done, hit the Save button that's below the editing window, to do the final save and unlock the file.