WYSIWYG-Editor
From Contrexx Wiki (English)
Template:User Guide - Navigation
Contents |
[edit] Editor
For editing your internet presentation, we offer you a so-called WYSIWYG-Editor (What-You-See-Is-What-You-Get). It provides formatting options like a normal text processor, e.g. Microsoft Word. This means that you can easily write, edit and format all the texts for your internet pages. It offers a maximum of user-friendly operation.
Figure 9: Editor title bar
Here you can see all icons of the editor and a short description:
[edit] Functions
Now we will explain the most import and most frequently used functions. Follow the relevant guidance to insert a link, an image or a table.
[edit] Inserting Links
• Enter the text. Example: Start Page • Highlight the text area of the link. To highlight a text, drag the mousepointer with pressed left mousebutton over the text. Example: Start Page
• Click onto the icon „Insert/Edit Link“.
1. Specify the link type:
URL – is used to create a hyperlink. (Ex.: www.contrexx.com)
Bookmarks – are special labels within a document, which are usually inserted at important subjects or at the top of the document. Subsequently, hyperlinks to these bookmarks can be created to let the visitors of your website directly reach it.
Email – If you click onto an email link, a new message window will be opened in the mail program, which has been linked in your browser. Into the input field „To“ of the window of the email message the address of the email link will be inserted automatically.
You can also use link to refer to one of the files in the Content Manager. For this, select „Search Server“ and enter the desired file.
If you want to refer to a PDF proce list from the shop, click onto the module „Shop“, then select the category PDF proce lists. Now you can see all already created PDF price and their respective PDF links. Copy the PDF link and insert it as URL.
In order to copy the link, you have to select the relevant characters. Rightclick and select „Copy“. To insert the link at the desired position, press the right mouse button again and select „Insert“.
2. Enter the required information:
Figure 11: Insert link
3. Specify how the created link should be opened:
Figure 12: Target Frame
[edit] Inserting Images
To insert an image with the editor, proceed as follows:
1. Load all pictures which are required with the „Image Manager“ onto your website. See „Image Manager“.
2. Click onto the icon „Insert/Edit Image“. The following dialogue appears:
Figure 13: Image properties
Now insert an image for the Image Manager by selecting the button „Search Server“. You can can enter some optional text, change the image size as well as the thickness of the border, the margins and the alignment. Border thickness and margin are increasing by number. If you do not want any border or margin, enter „0“.
3. Click onto the button „Ok“.
[edit] Inserting Tables
In order to insert a table with the editor, proceed aas follows:
1. Click onto the icon „Insert/Edit Table“. The following window appears:
Figure 14: Table Properties
Enter the desired options:
• Rows: Enter the number of rows.
• Column: Enter the number of columns.
• Width: Specify the width of the table.
• Height: Specify the height of the table.
• Border: Specify the desired thickness of the border with ascending numbers.
• Alignement: Specify the alignment of the table.
• Outer Margin: Specify the desired cell distance to outer objects with ascending numbers.
• Inner Margin: Specify the desired cell distance to inner objects with ascending numbers.
2. Click onto the „Ok“ button.
[edit] Editing Tables
For editing tables, Contrexx offers the following options:
• Insert/Edit Rows • Insert/Edit Columns • Insert/Edit Cells • Collapse/Divide Cells
Rightclicking onto the table lets the following menu appear:
Insert Row: Insert additional rows below the current line.
Delete Rows: Click onto the relevant row to delete it.
Insert Column: Insert additional columns.
Delete : Click onto the relevant column to delete it.
Insert Rows: Insert additional rows.
Delete Cells: Click onto the relevant cell to delete it.
Collapse Cells: Highlight the relevant cells and then select „Collapse Cells“ to coalesce them into one cell.
Divide Cells: Click onto the relevant cell and select „Divide Cell“, to divide it into 2 cells.
Figure 15: Menu Tables
[edit] Tipps
[edit] FCKeditor CSS
The idea is to use the CSS with the FCKeditor to have more options to edit the page:
/editor/fckeditor/editor/css/fck_editorarea.css
@import url("../../../../themes/ ??? /style.css"
USe ??? for the name of your layout
