Editor for formatting text content into administration.

Functionality

Wysiwyg textový editor

View - Displays the page as it actually looks. The styles set on the web part of the project are not reflected in the view.

Delete formatting - Formatting using this editor will be removed. Mark the text and click the button.

Changes a step back and repeat

Back - Undo the edits "back".

Repeate - Return changes back.

Basic styling

Switch between "bold" and "Normal" text.

Switch between"Italics" and "Normal" text.

Switch between "crossed out" and "Normal" text.

Since these buttons are switchable, after the first click, the style turns on and then turns off. These styles can be combined together.

Text alignment

 Left aligment Your text stays aligned as in this example. Your text stays aligned as in this example.
 Center alignment Your text stays aligned as in this example. Your text stays aligned as in this example.
 Right aligment Your text stays aligned as in this example. Your text stays aligned as in this example.
 Align to block Your text stays aligned as in this example. Your text stays aligned as in this example.

Lists

Select from which you want to create a list and click one of the following buttons. To add new items to the list, press ENTER for each item.

Bulleted list

Numbered list

Indentation

Increase indentation - Converts text to the left after each click.

Reduce indent - Reduces indenting from left to right after each click.

Scripts and styles

You can select the standard formats that are available in all browsers, such as headlines and text paragraphs. Styles defined on the project's web part automatically format their appearance so that it is uniform across the web. Wherever possible, try to stick to predefined project styles rather than using your own formatting.

Set the text size in the current paragraph.

Colours

The following buttons allow you to specify the foreground and text background:

Text colour - Select the foreground color of the text.

Background colour- Select the background color of the text.

To select a color, click the arrow to the right of the button.

The displayed menu allows you to select one of 40 colors. Click More Colors to have more color options.

You can choose from over 16 million different colors in the following dialog box.

Links to outher pages

To link to a different page, either within your site or on external pages, create a hyperlink.

Links can also be used in conjunction with anchors. This is the case when you want to "jump" into a specific part of the text within an existing page.

Create link

To create a link, first mark the text you want to use as a link, for example:

Click here to come to my website...

Next click on the button Paste / edit link .

Goal - Specifies the location of the page to which it is referenced.

  • Open in this window/frame - To replace the page with another;
  • Open in a new window (_blank) - The page opens in a new browser window while the current page is still available;
  • Open in parent/window (_parent)- Opens the page in the parent frame (in more complex frame structures);
  • Open in the main window/frame (_top) - Opens the page in the entire window (not in the frame);

Title - Description of the link that appears after mouseover. We recommend inserting if the link contains an image, for example.

There are many more advanced setup options in this dialog box. However, they are intended for those who have HTML knowledge.

Remove link

To simply remove the link simply mark the link, for example:

Click here and come to my website

...then click remove link .

Anchors

Anchors are something like bookmarks placed in specific parts of the page. Anchors are links you want to "jump" to a specific section of the page text.

To create an anchor, place the insertion point at the desired location on the page.

Click Insert / Edit Bookmark (Anchor) .

Write the name of the anchor. The anchor will appear on your page as follows.

You can find details about linking your anchor to your anchor here.

Pictures

To insert an image into an article, use the Insert / Edit Image button .

Picture URL - Specifies the location (on the Internet) of the image to be displayed. Write your URL here. In most cases, however, you will upload your images through file manager. To do so, use the Browse button.

Browse - The button opens the File Manager dialog box. Learn how to work with it in the administration of your project in the Content / File Manager module. From the manager menu, select a file that has already been inserted into the administrator or upload a new file.

Description of the image and caption - We also recommend that you enter the description and caption of the image so that users with images off or using screen readers know what the image is on the page.

Preview - Shows the image you have selected

Click the Appearance tab to see more options.

Alignment - Determine how the image is aligned with the text on the page.

Dimensions - This option allows you to adjust the size of the image in pixels.

Keep proportions - Automatically calculate the height (if you specify the width) or the width (if you specify the height) of the image. This will ensure that the proportions of the image remain unchanged. Responder pages have preserved proportions set directly in the styles of the web part of the project.
Note: It is not quite a pleasure to use this feature to reduce large images. No matter what size of the image is displayed, the entire picture is downloaded at its original size. You'd better reduce the image to the desired size on your computer first, then upload it again. This will speed up page loading.

Vertical Indent/Horizontal Indent - Set the pixel size of the blank space around the image.

Frame - Adjust the frame thickness in pixels if the frame size is not given in the styles of the web part of the project.

Style - If you want the image to match the specific CSS styles specified for the project's web part, enter their names.

There are many more advanced setup options in this dialog box. However, they are intended for those who have HTML knowledge.

Once the image is inserted, you can resize it. Click to resize the resizing handles.

Grab one of these handles with the left mouse button and drag the desired direction. If you are satisfied with the size, release the mouse button.

To delete the image, click on the image and hit "Delete".

Adding special characters and content

Insert a special character - Inserting characters that are not normally available on your keyboard

Insert / edit media /em>. Allows you to insert a media file such as a flash, video or audio file.

How do I insert a video from youtube?
On the YouTube you click on the "Share" link and "Paste" Copy the complete piece of & lt; iframe .... & lt; / iframe & gt; and paste it into the administration into the selected text editor using the Insert / Edit Media icon. A popup window pops up and the Source tab is a field where you put the copied code from youtube.

Insert an indivisible gap - HTML ignores multiple spaces behind them one. This button inserts spaces that can be viewed as a result.

Work with tables 

Creates a new table and inserts it into your page.

Inserts a new line before the current.

Inserts a new line for the current

Removes the current line.

Removes the current column.

Display a dialog box to edit the properties of the current row.

Displays a dialog box to modify the properties of the current column.

Merge selected cells into one.

Divide previously merged cells back into multiple cells.

Insert table

To insert a table, click Insert new table

Columns - Specifies the number of columns in the table.

Rows - Specifies the number of rows in the table.

Offsetting Content - Specifies the size of the empty surrounding space inside the cell in pixels.

Cell spacing - Specifies the size of the space between cells in pixels.

Alignment - Specifies table alignment relative to the rest of the page.

Frame - Specifies the size of the frame around the table and its cells in pixels.

Width / Height - Table width and height specifications. If left blank, the table will be set to 100% width by automatic height.

Class - If you want the table to match the specific CSS styles specified for the project's web part, enter their names.

Table Title - If it's checked, an additional row with a table heading will appear above your table.

There are many more advanced setup options in this dialog box. However, they are intended for those who have HTML knowledge.

Table row properties

To edit the properties of the current row, click the Table Row Properties

Line Type - offers these options:

  • Table header - Creates a table header from this row.
  • Table body - Used for main table table rows.
  • Table Fetch - Sets this line as the footer of the table.

Alignment - Specifies horizontal alignment of text in a line.

Vertical alignment - Sets the vertical alignment of text in a line.

Class - If you want the table row to match the specific CSS styles specified on the project's web part, enter their names.

Height - Specify the height of the table row if necessary. If left blank, the height is automatically adjusted to the cell content.

Update options - The selection field determines which rows will be updated with the above settings.

There are many more advanced setup options in this dialog box. However, they are intended for those who have HTML knowledge.

Cell Properties

Click the Cell Properties

Alignment - Specifies horizontal alignment of text inside a cell.

Cell type - The selection field offers these options:

  • Data - Used for the main table cells in the table.
  • Header - Sets the cell as a table header.

Vertical alignment - Specifies vertical alignment of text inside a cell.

Width / Height - Specification of cell height and width. If left blank, it will be set automatically based on cell content.

Class - If you want the table cell to match the specific CSS styles specified for the project's web part, enter their names.

Update options - The selection field determines which cells will be updated with the above settings.

There are many more advanced setup options in this dialog box. However, they are intended for those who have HTML knowledge.

Manual HTML Editing

Edit HTML source containing the HTML of your page.

Note: This feature is for advanced users who have HTML coding knowledge.

Discussion