Customization

Customization is done in your server-side managed pages. For example, if you have pasted "editor.htm" HTML code in your "editor.php" page, you can dynamically generate a list of assignable classes.

In the dialogs pages, if you have pasted "image.htm" HTML code in your "image.php" page, you can add a dropdown list of images (hosted on the server), or an upload button ...

Recommended classes

Here are some sets of recommended classes to use in WYMeditor.
These sets are based on our personal experience of building websites maintained by end-users with little or no technical knowledge.

They offer an good level of control and creativity by the end-user, but not too much.

See the FAQ to know how to create a button which sets a class to an element.

Set 1: classes you can use in WYMeditor for all your projects

Code snippets to add to the classes panel

Alignement for paragraphs:

<a onclick="setClass('content-center','P','','*');getCleanHTML()" name="content-center" href="#">Para: align center</a>
<a onclick="setClass('content-right','P','','*');getCleanHTML()" name="content-right" href="#">Para: align right</a>

Let the user float paragraphs:
This is a very interesting feature as it allows end-users to be creative in a "safe" way. It's a little tricky at the beinning for some users.
Notice that we choose not to allow floating images but floating paragraphs instead, since it allows more creativity.

<a onclick="setClass('float-left','P','','*');getCleanHTML()" name="float-left" href="#">Para: float to left</a>
<a onclick="setClass('float-right','P','','*');getCleanHTML()" name="float-right" href="#">Para: float to right</a>
<a onclick="setClass('force-new-line','P,H1,H2,H3,H4,H5,H6,UL,OL','','*');getCleanHTML()" name="force-new-line" href="#">Force new line</a>

Let the user add a border on some images if he wants:

<a onclick="setClass('border','IMG','','*');getCleanHTML()" name="border" href="#">Image: border</a>

CSS code to add to your website's stylesheet

You have to add these lines to your website's CSS stylesheet to see the result:

	.content-center		{ text-align: center;}
	.content-right		{ text-align: right;}
	.float-left		{ float: left; margin: 0 20px 10px 0;}
	.float-left img		{ margin: 0 0 10px 0;}
	.float-right		{ float: right; clear: right; margin: 0 0 10px 20px;}
	.float-right img	{ margin: 0 0 20px 10px;}
	.force-new-line		{ clear: both;}
	img.border		{ border-width: 1px; padding: 1px }

Note that  WYMstyle has a ready to use CSS file containing these styles: simply  download WYMstyle 0.2 and import the file "addons/wymeditor/default.css" into your own stylesheet.

Templates

WYMeditor allows you to use templates, so you can insert pre-structured content in your document.

WYMeditor comes with an example template, located in dialogs/template.htm:

<p>
 <label>Table caption</label><input type="text" id="template_content_1" value="" />
</p>

<p>
 <label>Column 1 heading</label><input type="text" id="template_content_2" value="" />
</p>

<p>
 <label>Column 2 heading</label><input type="text" id="template_content_3" value="" />
</p>

<p>
 <label>Column 3 heading</label><input type="text" id="template_content_4" value="" />
</p>

<div id="template_template" style="display: none;">
	<table>
	<caption>#1#</caption>
	<thead>
	<tr><td>#2#</td><td>#3#</td><td>#4#</td></tr>
	</thead>
	<tbody>
	<tr><td></td><td></td><td></td></tr>
	</tbody>
	</table>
</div>

The first part contains the form elements, where the user can edit values. It's important to give them an id respecting the following syntax: 'template_content_x', where 'x' is an integer number.

The second part, named 'template_template', is the XHTML template which will be inserted into the document, while the #1#, #2#, ..., #x# will be replaced by the user's values defined in the form described above.

Of course, you can use scripts (at the server side or at the client side), which automagically generate complex tables, pre-filled records, and so on.