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 |
|
||||
|
|
Move right |
|
||||
|
|
Cancellation of a right move action |
Text |
||||
|
|
Creation of a hypertext link |
|||||
|
|
Image |
|
||||
|
|
Button |
|
||||
|
|
Grid |
|
||||
|
|
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
Set the cursor at the required location for the insertion of the image and click on the image icon. In the dialogue box enter the URL for the image address (it must be relative to the page currently being edited ). Validate.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
Select the image then click on the image icon or double click on the image. The dialogue box appears with the value of the link. Modify the link and validate.An image is accessible in modification only when the upper part of the box symbolizing the presence of an image is entirely visible in the editor.
Deletion
Select the image and click on the "Delete" key or Ctrl/X.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
|
Text 1 |
Text 2 |
|
Text 3 |
Text 4 |
Grid with header
|
Text 1 |
Text 2 |
|
Text 3 |
Text 4 |
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
|
<P> |
Paragraph |
|
<UL> |
Start of list |
|
<LI> |
Line in list |
|
<TABLE> |
Grid |
|
<TR> |
Line in grid |
|
<TD> |
Cell in grid |
|
<IMG> |
Image |
|
<A> |
Hypertexte link |
|
<H4> |
Title |
|
<H5> |
Sub-title |
|
<STRONG> |
Bold |
|
<EM> |
Underlined |
|
<DIV> |
Container |
|
<TBODY> |
Container for the line in the grid |
|
<BR> |
Next line in the paragraph |
|
<CODE> |
Paragraph of source code type |
|
|
|
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> <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=""> </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.