» Using Kupu

Using the Kupu Editor

Kupu is an embedded, WYSIWYG javascript editor.  It provides enough simple, useful HTML functionality to make editing web pages less tedious than it normally is.  There is a toolbar at the top of the page with a large editing window in the center left.  On the right-hand side is a set of forms-based options that may be applied to the document selection.  When 'mousing' over a toolbar icon context sensitive help is displayed. Also when you right-click over the editing pane a context-menu is displayed, as in the image below:

The Toolbar

Not all of the functionality works as advertised.  From the toolbar here are the icon options grouped by functionality:

Working Icons	Working Functionality	Problematic Icons
	Save, Exit
	Bold, Italic, Underline, Subscript, Superscript
	Text color highlighting	Bacground color does not work
	Left, center and right justification
	Numbered and unordered lists	Definition lists work very poorly
	Indentation changes: out and in
	Table insert	Image, internal links and external links do not work.
	Undo and redo
	Direct source code editing toggle

Forms-based Options

On the right-hand side are the forms-based options that may be applied to selections in the editing window.  They are a little cumbersome.  Here are the most useful functions:

Inserting a hyperlink

• First select with the mouse the phrase in the text to which you wish to link.
• Then either cut and paste, or type in, the hypertext link into the Links text field form.
• Finally press the 'Make Link' button.
  For internal links within the current web document, always try to make the hyperlinks relative to the current document.  This can be a bit tricky until you are a bit more familiar with Lenya's generated static html.

Inserting an inline image

• The image you wish to insert must have been previously loaded via the Assets option of the Site tab.  Suppose it is called tiger.png
• Now place the mouse cursor in the document where you want the image to appear.
• In the Images form enter in the relative path to the asset.  Again, this is a bit tricky until you are more familiar with Lenya's generated static pages.  In our current example when I am working on 'kupu.html' Lenya will drop the extension on the filename and will generate a subdirectory called 'kupu'.  The named asset will be in this directory.  Thus I would enter kupu/tiger.png into the form field
• Finally press the 'Insert Image' button.  Optionally you may select an image-float style before pressing the Insert Image button.