Using the Kupu editor
What is Kupu?
Kupu is a WYSIWYG content editor inside Silva. It allows Authors to add text, links, images, tables, citations, abbreviations, acronyms, index items and more.
Kupu uses many of the same commands as typical word
processors such as Microsoft Word.
Prerequisites
You need to have been given access to Silva as an Author, Editor or Chief Editor. Access is given to you by the Chief Editor or Manager.
You will need to have one of the following browsers on your computer:
Accessing the Kupu Editor
Log in to the contents screen. (Fig. 1.)
Look at the documents listed under the modify heading in Fig. 1.
Fig. 1. Contents screen.
To edit an existing document, click on the title of the document listed under the modify heading to reach the Kupu editor. (Fig. 1.) If you click on the “tree” title you will edit the tree document. (Fig. 2.)
If you wish to add and edit a new document see add content.
Fig. 2. Editor screen and Kupu toolbar.
The Kupu Editor is divided into three areas: the toolbar, the central editing area, and the toolboxes running down the right side of
the screen. The toolbar is just below the Silva top navigation. (Fig. 3.)
Toolbar
Kupu uses many of the same commands as typical word processors. The buttons in the toolbar controlling bold, italics, striketrough and underline are the same as in Word.
Fig. 3. Editor toolbar with formatting options.
To format text for structuring your document make use of the style drop down list on the left in the toolbar. Select the text you would like to format and select a style from the drop down. Select heading or subheading which will increase the text size. Select the default style plain to use the default text size or use one of the other styles to format your text.
To change the formatting of a word or words use your mouse cursor to select the text and then click the appropriate button in the toolbar.
(Fig. 3.) For example if you select some text and press the B
icon, you will add or remove bold highlighting to the selected text.
Roll your mouse over the other toolbar icons to see the functions. They are: save, bold, italics, underline, subscript, superscript, numbered list, bulleted list, definition list, undo, redo, and edit html.
Toolboxes
Using the toolboxes located on the right of your screen, you can add links, images, index items, citations, abbreviations, acronyms, external sources, tables, table of contents and typographical characters to your document. At the base of the toolbox is another save button. The instruction for the Toolbox options follow below.
Changes are not saved automatically
Remember
to save your work often when working in Kupu. If you preview or
refresh your screen without saving your work you might lose it.
To save a document
There are several ways to save a document:
click the floppy disc icon in the toolbar to save your work. (Fig. 3.)
unfold the save menu that is located at the bottom of the toolbox on the right and click save document.
Note: all updated content in a document must be saved before you change or refresh your screen. If you try to leave the page without saving you will be prompted to save.
Adding Text
As well as typing text into Kupu you can copy and paste text from a web page or a word processor. Although the editor cleans up the pasted test, best practice is to first clean the text in a simple text editor like notepad. This can be done by just copy pasting the text first in the simple text editor. This step will remove the text formatting from the source. After this step you can copy and past that text into Kupu and apply do the required formatting.
Adding links
1. Adding a link to an external site
Highlight the appropriate text.
Type the URL or web address into the link toolbox on the right of the editor. (Fig. 4.) Include ”http://” in the URL, and click add link.
For example: insert a link to http://www.infrae.com/
Internet Explorer users, you will notice that the text selection will
not appear to be selected. However as soon as you enter the URL and click add link the URL will be inserted in the text.
Fig. 4. Adding a link.
After adding a link you can set or update the link properties like the link target and link title. (Fig. 5.)
Fig. 5. Updating a link.
2. Adding an internal link to a page within your Silva site
Click the magnifier icon (Fig. 5.) and locate an item within Silva in the pop-up. Make the reference by clicking the plus icon next to the item that you would like to link to. (Fig. 6.)
Fig. 6. Reference pop-up.
Click the add link button to add the link to the content. (Fig. 4.)
3. Updating a link
To update a link, first place the cursor within the link text. The link toolbox will highlight. (Fig. 7.) This toolbox option only appears when the cursor is on an existing link in your document. Type in the new external web address or click the magnifier icon if you would like to reference a different document in your Silva site.
Click the update button. (Fig. 7.)
Save your document changes.
Fig. 7. Updating a link.
4. Linking to a named anchor
Links go to an anchor, and the anchor can include a name of a location further down in a page. This is commonly used in long pages so site visitors can jump to a section. For instance we could add a link at the bottom of the page to the top of the page by entering a unique name to the link as in Fig. 8. There is no need to include a #-sign. This link goes to a named anchor. If you hover over it you will see “#back_to_top” at the end of the link.
Fig. 8. Linking to a named anchor in this page.
5. Inserting a named anchor
To create a link that includes a destination, you have to create a named anchor.
Insert your cursor in the text that you wish the indexer to reference. Do not select a word or phrase, just insert the cursor.
Go to the anchor/index item toolbox on the right and type the anchor name into the input field in the toolbox. (Fig. 9.) Note that we entered “back_to_top”; the anchor should not contain any spaces or special characters. If you do add an invalid character it’ll be replaced by an underscore.
Click add element. You will see the named anchor highlighted in yellow.
Fig. 9. Creating a named anchor.
You can edit an anchor by clicking on it and update the settings in the anchor/index item settings. (Fig. 10.)
Fig. 10. Updating a named anchor in this page.
We didn’t add an index title to this anchor because we don’t want it to be an index item; see the following section about index items.
Sometimes your cursor gets stuck in an anchor/index item. Use your tab key to move the cursor to the end of the text.
Indexing
Silva provides an indexing facility for your site text in the form of an Indexer content type that displays an index like in the back of a book. Index items are defined in your text. They are a special named anchor (see the previous section about inserting a named anchor).
Index items are also named anchors because we want to jump to them from the Indexer. The difference is an index item has both a name and a title. The Indexer only presents anchor/index items that have a title.
1. Inserting an index item
Insert your cursor next to the text that you wish the indexer to reference.
Go to the anchor/index item toolbox on the right and type the anchor name into the input field in the toolbox. (Fig. 11.)
Fill in an index title (the words that will appear in the Indexer) into the input field.
Click add. You will see the index item highlighted with yellow. The highlighted words will be invisible when you publish your document, but will be listed in the indexer.
Fig. 11. Adding an index item.
2. Editing an index item
You can edit an index item by clicking on it and update the settings in the anchor/index item settings. (Fig. 12.)
Fig. 12. Updating an index item.
3. Indexer setup
For the indexing to work you need to first add an Indexer in the Folder or Publication your document is contained in. The Indexer is added outside Kupu in the contents screen. (Fig. 13.)
Fig. 13. Add an Indexer in the contents screen.
Only documents that are published will be indexed. The Indexer should be updated whenever new index items are published. To update the Indexer go to its edit screen and click update.
Adding images
You can reference an existing image within Silva or upload a new image from your computer.
1. Adding an image already in Silva
Place the cursor where you want the image to appear in your document.
Click the magnifier icon (Fig. 14.) which is located in the image toolbox on the left of the text “no reference selected”.
Fig. 14. Adding an image.
In the resulting pop-up navigate to the image you wish to add and click the plus icon in the right of the image that you would like to reference. (Fig. 15.)
Fig. 15. Referencing the image in the pop-up.
The pop-up will close, and you can place the referenced image to the document by clicking the add image button. (Fig. 16.)
Fig. 16. Adding the referenced image to the document.
2. Uploading an image
To upload an image from your computer into Silva, go to the location in your Silva site where you want to upload the image. Go to the contents tab and choose Silva Image from the select: dropdown. Click the new... button if you didn't go automatically to the create <<Silva Image>> form. Fill in all required fields and click the save or save + edit button. (Fig. 17.)
If you would like to upload multiple images we suggest to import them via a zip file.
Fig. 17. Uploading and saving an image.
3. Updating an image
Click the image you would like to update.
Referencing another image
In the toolbox on the right, click on the magnifier icon to search for a different reference. (Fig. 16.)
In the pop-up, click the plus icon after the Silva Image that you would like to reference. (Fig. 15.)
After referencing the image you can add the new image to the document by clicking the add image button. (Fig. 16.)
Changing the image alignment
By default the image is aligned “default”, but you can chose another image alignment in the image toolbox on the right. (Fig. 18.)
Align your image by choosing a position from the drop down list image alignment.
Fig. 18. Updating the Silva Image alignment.
4. Link to a high resolution version of an image
If the current image is displayed at less than full size you may want to add a link to the full resolution image.
Adding a high resolution link to an image
Click on the image. The image and link toolbox will open on the right of the screen. (Fig. 18.)
Check the checkbox next to link to hires image version.
Click add link.
Fig. 18. Link toolbox with link to hires image option.
Removing a high resolution link to an image
Click on the image.
Click the remove button in the link toolbox.
Updating a high resolution link to an image
If you would like the change the link target and/or link title you need to take the actions below.
Click on the image.
Update the settings in the link toolbox.
Click the update button.
Fig. 19. Update the link to hires image.
5. Rollover text/alt tag for an image
Click on the image. Click on the pencil icon on the right of the reference in the image toolbox. (Fig. 18.)
In the title text field type the text you would like people to see as they rollover the image.
Click save.
6. Resizing an image
If an image is fairly large either in scale or file size you can resize it within Kupu.
To resize your image click on the image. Click on the pencil icon on the right of the reference in the image toolbox. (Fig. 18.)
In the “format and scaling” section you will find all tools to size images. To make the image smaller you can choose a percentage and
enter it in the text box for scaling. Follow the onscreen
instructions for other ways to resize or crop your image. (Fig. 19.)
Click change.
Fig. 19. Resizing or cropping an image.
Other toolboxes and elements
Adding abbreviations and acronyms
To add a descriptive rollover to abbreviations and acronyms. Highlight the term (e.g. i.o.u.) then type the full name in the abbreviation toolbox located on the right side of the screen, then click add element. (Fig. 20.)
Then click save.
Fig. 20. Adding a rollover to abbreviations and acronyms.
Adding an External Source
Place the cursor where you want the external source to appear in your document. Select the external source you would like to add from the dropdown, then click the add external source button. (Fig. 21.)
Then click save.
Further details on adding an External Source.
Fig. 21. External source toolbox.
Tables
To add a table:
Place the cursor where you want the table to appear in your document.
Move your cursor over to the table toolbox located on the right.
Choose the table properties in the table properties area of the toolbox. (Fig. 22.)
Click add table.
Fig. 22. Adding a table.
Editing a table
Click anywhere in the table.
This will change the tables toolbox located on the right, to the options in Fig. 23.
Fig. 23. Editing options for a table.
You can add or remove columns and rows and also change the ratio of the column widths. Kupu uses percentages internally to scale the table columns equally, but these can be changed by editing the column widths.
Merging and splitting table cells
In Kupu you can merge and split cells. If you’re in a cell and click the merge button, then the current cell will merge with the table cell on the right of it. A cell that was previously merged can be split again by clicking the split button. This will create an empty table cell on the right of the cell that you split.
Cell type
A table cell can be two kind of 'cell type' a 'normal' type or a 'header' type. Normal type cells will render a normal html <td> tag, cells with the header type will render a html <th> tag.
Typographical characters
The
following typographical characters can be added to your document by
copying and pasting them from the toolbox. (Fig. 24.)
Fig. 24. Typographical Characters.
Comment toolbox
Sometimes you'll find an extra toolbox at the top of the toolboxes, the Comment toolbox. This is used for internal communication. If there is content in the comments field of the document properties it shows up here. This is useful for notes, reminders, etc. (Fig. 25.)
Fig. 25. Comment toolbox.
Kupu content items navigation
Navigation in tables
Use the keyboard cursor keys to navigate between table cells and to go out of the table.
Navigation between Code Sources
Sometimes your cursor appears to be stuck in a Code Source. Use the arrow keys or tab to move the cursor to the next element.
Navigation to end of page
Kupu always insert a paragraph with a space at the end of a document to enable elements to be appended easily. This paragraph is not saved if it's empty.
Kupu access keys
You can use the access key on your system (the alt key for Windows, the ctrl key for Macs, on Linux usually the alt key) to do various operations with the keyboard. This is a real timesaver, especially when a button has scrolled out of sight. For instance, save your work by hitting acc-s. The following keyboard shortcuts are available:
s save
b bold (doesn’t work in recent Firefox)
i italic
u underline
- subscript
+ superscript
# numbered list
* bulleted list
= definition list
z undo
y redo
h html source
In the preview you can publish the document using the publish button or acc-p.
Kupu is Maori for message or word, while in Indonesian ‘kupu kupu’ means butterfly.
Thus the kupu logo is a butterfly.