The HTML editor for documentation

Presentation

The HTML graphic editor implements the only functions necessary for the production of a paragraph in the documentation or a paragraph in the online help, it does not produce a complete page of HTML.

It remains possible to exceed the capacities for the graphical editor by intervening directly in the HTML source, but the use of the cleaning function can also delete the non authorized tabs added in this manner.

Warning: It is imperative to exit the graphical editor after having carried out a modification in order to "ungrey" the button. from the Documentation function and to save the modified record on the server.

Icons, buttons and keyboard shortcuts

Icon in the bar

Icon	Function	Example
	Creation of a paragraph	Text.
	Creation of a title	Text
	creation of a sub-title	Text
	Bold or normal text	Text
	Italic or normal text	Text
	Underlined or normal text	Text
	Left alignment	Text
	Center alignment	Text
	Justification	Text
	Right alignment	Text
	List	Text 1 Text 2
	Move right	Text
	Cancellation of a right move action	Text
	Creation of a hypertext link	Text
	Image
	Button
	Grid	Text 1 Text 2 Text 3 Text 4
	Selective cleaning of the HTML
	Display and modification of the HTML source
	Alert indicating a problem in the HTML. Used to display and modify the HTML code produced.

Dialogue box buttons

	Save
	Cancel

Principal keyboard shortcuts

Enter	Creation of a paragraph
Shift/Enter	Creation of a new order
Ctrl/c	Copy
Ctrl/v	Paste
Ctrl/x	Delete
Ctrl/a	Select all the elements
Ctrl/z	Cancel the previous action
Double click	Next object

List management

Create a simple list

Select the list icon and enter the text. Use the "enter" key to enter a second line or click twice on the "enter" key to exit the list.

• Line 1
• Line 2

To enter several lines of text at the level of a single line in the list simultaneously use the keys "shift" and "enter" to create the next lines.

• Line 1
• Line 2
  Line 2-1

Create a list containing several levels

Create a simple list the select the lines to be modified and click on the move right icon as many times as necessary to "descend" through the levels. The move left icon is used to carryout the opposite operation.
Only the first two levels are symbolized by "bullets".

• Line 1
• Line 2
  Line 2-1
• Line 3 level 2
• Line 4 level 2
• Line 5 level
  Line 5-1 level 3
• Line 6 level
  Line 6-1 level 4
• Line 7

The hypertext lines

Creation

Select a text or an image the click on the link icon. In the dialogue box enter the URL for the page address and if required the destination shortcut (the URL must be relative to the page currently being edited). Validate.

Modification

Set the cursor on the link text and click on the link icon or double click on the link. The dialogue box appears with the value of the link. Modify the link and validate.

Deletion

Set the cursor on the link text and click on the link icon. The dialogue box appears with the link value. Delete the URL and validate.

Image management

Creation

It should be noted that in the documentation editor, the images are normally stored in the database as attached documents.

The image appears in the following form :

It can be resized using the corners.

Modification

Deletion

Button management

Creation

Set the cursor at the location desired for the insertion of the button and then click on the button icon. Double click on the created button to enter the button label.

Modification

Double click on the created button to enter the label.

Deletion

Select the button and click on the "Delete" key or Ctrl/X.

Grid management

Creation

Set the cursor at the location desired for the insertion of the grid and then click on the grid icon. Enter the number of columns, the number of lines, the size in pixels for the borders (0 if no borders) and choose if the first line of the grid is a header line then validate.

Example :

Grid without header

Grid with header

Modification

Select the grid in order to make the corners appear then click on the grid icon to carry our the modifications then validate.
In the case of the modification of the number of lines or columns it is the lines and columns at the end of the grid that are affected.
When a grid is without header is modified to a grid with header, it is necessary to intervene in the all the contents of the first line to pass to bold for each element, the opposite operation is carried out when a grid with a header is changed to a grid without header.
The tabs are used to pass from one cell to the next and to insert a line at the end of the grid. 
The grid can be resized by means of stretching the corners.

Deletion

Select the grid in such away to make the corners appear (click on the border) and click on the "Delete" or Ctrl/X.

Cleaning the HTML code

This function is used to delete the non authorized HTML tags. It must be used notably after a copy/paste of a text from an existing documentation.

Authorized HTML tags

Example of cleaning

The next HTML code

<DIV class=Section1>
<H4><SPAN style="text-shadow: none">Text 1<?xml:namespace prefix = o /><o:p></o:p></SPAN></H4>
<P class=MsoBodyText>Text 2.</P>
<P class=MsoBodyText>Text 2</P>
<H5><SPAN style="text-shadow: none">Text 4<o:p></o:p></SPAN></H5>
<P class=MsoBodyText>Text 5</P>
<P class=MsoBodyText><?xml:namespace prefix = v /><v:shapetype id=_x0000_t75 stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><v:stroke joinstyle="miter"></v:stroke><v:formulas><v:f eqn="if lineDrawn pixelLineWidth 0"></v:f><v:f eqn="sum @0 1 0"></v:f><v:f eqn="sum 0 0 @1"></v:f><v:f eqn="prod @2 1 2"></v:f><v:f eqn="prod @3 21600 pixelWidth"></v:f><v:f eqn="prod @3 21600 pixelHeight"></v:f><v:f eqn="sum @0 0 1"></v:f><v:f eqn="prod @6 1 2"></v:f><v:f eqn="prod @7 21600 pixelWidth"></v:f><v:f eqn="sum @8 21600 0"></v:f><v:f eqn="prod @7 21600 pixelHeight"></v:f><v:f eqn="sum @10 21600 0"></v:f></v:formulas><v:path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></v:path><o:lock aspectratio="t" v:ext="edit"></o:lock></v:shapetype><v:shape id=_x0000_i1025 style="WIDTH: 382.5pt; HEIGHT: 136.5pt" o:ole="" type="#_x0000_t75"><v:imagedata o:title="" src="./Listes%20de%20picking_files/image001.png"></v:imagedata></v:shape></P>
<P class=MsoBodyText><v:shape id=_x0000_i1026 style="WIDTH: 218,037.60cm³; HEIGHT: 138pt" o:ole="" type="#_x0000_t75"><v:imagedata o:title="" src="./Listes%20de%20picking_files/image003.png"></v:imagedata></v:shape></P>
<P class=MsoBodyText>&nbsp;<o:p></o:p></P>
</DIV>

becomes

<H4>Text 1</H4>
<P class="">Text 2.</P>
<P class="">Text 2</P>
<H5>Text 4</H5>
<P class="">Text 5</P>
<P class=""></P>
<P class=""></P>
<P class="">&nbsp;</P>

Warning

There is no return to previous by Ctrl/z possible with this command.
The cleaning command deletes the .

Text editor

The editor is used to view and to edit the HTML source. The modified text and tags are replaced by the HTML text and tags of the graphical editor at the time of saving ( button).

All the tags entered in the text editor that are not part of the authorized tags list are purged by the cleaning function. If this function is not used, the non authorized tags enrich the final generated documentation.

Occasionally it will be notices that nonconforming URLs are present in the text editor in the src or href attributes. It is pointless to modify these, they will be standardised at the time of transferring the data to the server.