Several WYSIWYG editors can be used in Plone, including Kupu, Epoz, and FCK editor. However, not all of the editors are compatible with the current version of Plone.

Multiple WYSIWYG editor packages can be installed in a single Plone instance which allows site members to choose their favorite editor in  the Content editor setting of their personal Preferences, as shown below:
 

 
Most WYSIWYG editors are based on similar principles, with interfaces that mimic those of popular word processing applications. These familiar toolbars and icons help the non-technical users who are not well-versed in HTML code to transition to editing content in Plone.

What are the differences between WYSIWYG editors?

• HTML code formed.
• Insert image interface and functionality.
• HTML clean-up can be done with the help of special icon on a toolbar, or just after clicking 'save' button.
• WYSIWYG editor default configuration can have or lack change color functionality.

What is the aim of this tutorial?

If your questions and suggestions concern Kupu in general, contact the Plone General mailing list. Duncan Booth usually settles such issues. He has also done a tremendous amount of very high quality work about Kupu. Duncan Booth took over after Philipp von Weitershausen had done the initial Plone integration.

Getting back to the Kupu content editor, let's start with its general description.

What is Kupu?

Kupu is an open source client-side editor for Firefox, Netscape and Internet Explorer. Inspired by Maik Jablonski's Epoz editor, it was written by Paul Everitt, Guido Wesdorp and Philipp von Weitershausen to improve the JavaScript code and architecture, standards support, support for webservers other than Zope (which was the original target platform for Epoz), customization, and other issues.

Kupu's features:

• Kupu is easy to integrate into a variety of CMS.
• Kupu can be easily customized and extended.
• High-tech and up-to-date Kupu uses CSS in favor of HTML for layout and presentation.

A typical Kupu toolbar looks like this:

The following table describes the function and output of each button.

Icon	Function	Description	Example	Example resultant HTML code
	save	Saves changes
	bold	Bolds selected text	text	<strong>text</strong>
	italicize	Italicizes selected text	text	<em>text</em>
	subscript	Transforms selected text to subscript	textscript	text<sub>script</sub>
	superscript	Transforms selected text to superscript	textscript	text<sup>script</sup>
	text color	Colors selected text
	background color	Color background of the selected text
	left justify	Aligns the selected text to the left	text	<p align="left">text <br /></p>
	center justify	Aligns the selected text to the center of the screen.	text	<p align="center">text <br /></p>
	right justify	Aligns the selected text to the right	text	<p align="right">text <br /></p>
	numbered list	Creates a numbered list	line1 line2 line3	<ol><li>line1</li> <li>line2</li> <li>line3</li></ol>
	bulleted list	Creates a bulleted list	line1 line2 line3	<ul><li>line1</li> <li>line2</li> <li>line3</li></ul>
	list passage	Creates a definition list	line1 line2 line3 line4	<dl> <dt>line1</dt> <dd>line2</dd> <dt>line3 </dt> <dd>line4 <br /> </dd></dl>
	decrease quote level	Moves an indented section of text one tab to the left	text
	increase quote level	Indents the selected text by one tab	text	<blockquote>text<br /></blockquote>
	insert image	Inserts an image into your document
	insert internal link	Creates a link to another object within Plone site	text	<a title="filename" href="front-page"> text</a>
	insert external link	Changes a link to an external site	text	<a href="http://...../"> text</a>
	insert anchors	Creates an anchor point for linking between sections of a single page	beginning text text text text text to the top	<h3 class="Subheading"> <a name="beginning"> </a>beginning</h3> text text text text text <a href="#beginning"> to the top</a>
	insert table	Inserts a table	first second third fourth fifth sixth	<table class="plain"> <tbody><tr> <td>first<br /></td> <td>second<br /></td> <td>third </td></tr> <tr> <td> fourth</td> <td>fifth</td> <td>sixth </td></tr> </tbody> </table>
	undo	Undo the last edit
	redo	Redo the last undo action
	switch between visual editor and HTML view
	text heading	Chooses headings
	text headings	Normal	text	<p>text</p>
		Heading	text	<h2 class="Heading">text</h2>
		Subheading	text	<h3 class="Subheading">text</h3>
		Literal	text	<pre>text</pre>text
		Discreet	text	<p class="discreet">text</p>
		Pull-quote	text	<div class="pullquote">text</div>
		Call-out	text	<p class="callout">text</p>
		Page break (print only)		<div class="pageBreak">text</div>
		Clear floats (remove style)		<div class="visualClear">text</div>
		Highlight	text	<span class="visualHighlight">text</span>
	zoom	Zooms the editing window to fill the page
	remove link	Removes an existing link
	remove image	Removes an existing image

A usual Kupu toolbar looks this way:

It consists of the buttons, each of them suit this or that purpose. Their functions and buttons are described in a Kupu Button Index chapter.

In case you don't use some of the buttons, there is no need for them to be on the toolbar. You can exclude them from the toolbar, so that they don't interfere with you.

Here you can select those items you want to be displayed on the Kupu toolbar. Or remove ticks from those you don't need.

Now let's, for example, remove ticks from:

• decrease quote level button
• increase quote level button
• insert anchors button
• subscript-button  
• superscript-button   
• text color-button   
• background color-button
• insert-table button
• definition list button

Don't forget to save the changes. What we get in Kupu toolbar - is a descended customized toolbar without those buttons we've excluded:

In case you need just several buttons you work with, let them be: bold-button, italic-button, html and zoom buttons, there is no need for you to have a big toolbar with all the buttons. Then you have to remove all the ticks from the list (button visibility) except the ones needed. And a new toolbar is exactly what you need:

Note:

• there are some buttons that go together like Bold/Italic group, Subscript/Superscript group, that's why you have to select the group and each button separately. Otherwise buttons will not be visible on the tool bar. 
• 'Styles pulldown' box has always be ticked, otherwise a Kupu error will emerge.

The Kupu editor allows you to insert image files stored in Plone into your document, using the button on the Kupu toolbar:

Clicking this button launches the Insert Image dialog:

The three columns of the dialog display:

• In the first column - a folder navigation list.
• In the second column - an object navigation list, from which you can select your image file.
• In the third column - image preview, and options for alignment, size and captions.
  

In the example above, an image of a rose was selected - rose.png (rather large one, at its original size of 600*450 pixels).

According to the "Image alignment" option you choose, the image will be placed in your page (and the following HTML code will be generated):

• lefthand (<img class="image-left captioned" src="rose.png" alt="rose" />);
• righthand (<img class="image-right captioned" src="rose.png" alt="rose" />);
• inline (<img class="image-inline captioned" src="rose.png" alt="rose" />).

You may also choose the size of the image you need. This is especially convenient when you deal with large images, as there is no need to use Photoshop or other external image editing application to crop or change the size of an image. The "Image size" dropdown list provides a choice between many sizes and formats:

• Large (<img src="rose.png/image_large" alt="rose" />);
• Preview (<img src="rose.png/image_preview" alt="rose" />);
• Mini (<img src="rose.png/image_mini" alt="rose" />) - the minimum-size image is formed;
• Thumb (<img src="rose.png/image_thumb" alt="rose" />) - a thumb(inch)-size icon is made out of your image (little bigger than 2,5cm); 
• Tile (<img src="rose.png/image_tile" alt="rose" />) - a tile is made out of your image; 
• Icon (<img src="rose.png/image_icon" alt="rose" />) - an icon is made out of your image; 
• Listing (<img src="rose.png/image_listing" alt="rose" />) - a listing icon is made out of your image;
  

The following pictures display all the formats and sizes that can be inserted using a single image file in Kupu. Note that this image is 600*450 pixels, so the largest version (original) can not be larger than this aspect ratio:

 icon (32,32)

 tile (64,64)

 


mini (200,200)

 

preview (400,400)

 large

original (600,450)

Image Captioning

It is possible to put image caption under the image in Kupu 1.4.x version. Caption is taken from image description. Alt text is taken from image title. Alt text and caption update if image is updated.

To enable image captioning go to Site Setup -> Visual Editor. Make sure that you have Link using UIDs and Allow captioned images selected in Kupu Configuration.

When you add image to the site, you can put some text into its description that will be displayed as an image caption.

Now when we create a page, and insert image into it, check the box Caption:

Save this page, and you will see the image followed by its description as the caption all inserted into a frame:

FAQ is an abbreviation for "Frequently Asked Question(s)". The term refers to listed questions and answers, all supposed to be frequently asked in some context, and pertaining to a particular topic.

With the help of Kupu, you can easily create a pretty-looking FAQ for your Plone site.

The 'Insert anchor' icon allows you to create links that point to other sections within the same page.

 Follow these steps to create your FAQ page: 

• Suppose you want a page with such a look: an index of 9 FAQ titles at the top of the page, and the corresponding entry for each FAQ below (example FAQ).
• Format the titles for each entry as a 'subheading'.
• Move your cursor to the beginning of the first entry, click the 'Insert anchor' icon.
• In the following window, choose the subheading that you want to link your question to. In the case of the first question - select the first line.

• Click OK.
• Perform the same steps for each of the remaining questions.

In addition to creating simple links within the document, Kupu anchor drawer also allows to generate table of contents for the current document. Suppose we have a document with info, displayed this way: short passages with titles (subheading), and the text (normal):

Let's create a table of contents for this document and place it the top of the page. For this go to page edit, cursor should be placed there where table of contents will be, i.e. in this example at the very top of the page. Click on 'Insert anchor' icon on a Kupu toolbar. Select 'Table of contents' tab in the opened window:

 Here you can select one or two (optional 2nd style) paragraph styles, on which basis table of contents will be generated.

There is a box next to 'Numbering', that allows making table of contents as numbered list (if selected) or unordered list (if not selected). Here you can also choose Table style (normal, heading, subheading etc.).

Let's select Subheading paragraph style, none optional style, toggle all our subheadings, make our table of contents numbered list, and Discreet table style:

 
Thus, what we get is:

In this example anchor window includes three tabs: 'Link to anchor', 'Manage Anchors' and 'Table of contents' tabs. In case you installed 1.4 Kupu and any of these tabs is missing, go to Site Setup -> Visual Editor. In Kupu Toolbar Configuration select Toolbar tab. Among the list of Kupu buttons find anchor button, that has two tabs: manage-anchors-tab and table-of-contents-tab:

Mark the necessary box (boxes) checked, and save the changes.

ResolveUID is a very useful Plone functionality that allows to maintain interrelation between documents in case they are moved within your Plone site (their URL changes). This is especially convenient for large sites, that have a great deal of interlinked documents.

After ResolveUID is activated, new-added internal links that you create within your site will not break if objects are moved. Correct links to objects will be maintained if documents are relocated from one folder into another.

To activate ResolveUID, go to Site setup, and in the Kupu visual editor configuration panel select the Link using UIDs option.

Now, when you edit with Kupu, you will notice that the HTML code for inserted images looks like:

<img src="resolveuid/832c2b08888aba0faccae78a14e9c764" alt="photo">

While this range of non-discernible characters may seem daunting, but it is how ResolveUID assigns IDs to Plone sites.

How to transform ResolveUID into a Real URL

A ResolveUID value should not appear in a rendered HTML page, it should instead be transformed into the real URL of the linked object. Kupu should be configured to use a portal transform on output so that the end user never sees a ResolveUID URL.

Otherwise you can use Plone ResolveUID product.