In this section
A special software module implements simple visual HTML editor running inside your browser and allowing to edit text and insert images online. The editor functions in such a way that it alters only the page working area, thus ensuring the web site design integrity. For easier operation, the visual HTML editor form is divided into three tabs:
- Editing;
- Properties;
- Menu.
"Editing" tab
This tab contains the visual HTML editor pane and is intended to create and edit documents. The user interface of the editor window is very ergonomic; you will find it much similar to that of Microsoft Word.
You can format text, insert tables and images into pages etc. Appearance of your new pages will be consistent with that of the existing ones. Editor tracks your changes being the base to generate HTML code for your page. After the changes are saved, the page is updated in the site public section automatically.
HTML editor functionality is available on any machine with Internet Explorer 11 or higher installed.
HTML editor fields
| Field | Description |
|---|---|
| Template dropdown list | A template on whose basis a new page is created. For example: Standard page, Page include area or Section include area. |
| File name | The file name including extension, for example, news.php. |
| Page title | An arbitrary page title. The specified title will be displayed in the page body. |
HTML editor toolbar
| General commands | |
|---|---|
 |
Switches to the fullscreen mode. |
 |
Cuts the selection and places it on the clipboard. |
 |
Copies the selection to the clipboard. |
 |
Inserts the clipboard contents. |
 |
Inserts the clipboard contents previously copied in MS Word. Strips the fragment out of redundant formatting (e.g. styles). |
 |
Inserts the clipboard contents as plain text. |
 |
Undoes 1 action. |
 |
Redoes 1 action. |
 |
Toggles the table borders visibility. |
 |
Inserts a table. |
 |
Inserts a hyperlink anchor (bookmark). |
 |
Inserts a hyperlink. |
 |
Deletes a selected hyperlink. |
 |
Inserts an image. |
 |
Switches to the visual editing mode. |
 |
Switches to the source code editing mode. |
 |
Switches to the split editing mode. |
 |
Quits the editor. |
 |
Creates a new page. |
 |
Opens the page property editor. |
| Text properties | |
 |
Changes background colour. |
 |
Changes text colour. |
| Text formatting buttons | |
 |
Makes the selected text bold. |
 |
Makes the selected text italic. |
 |
Applies the underline text character style to the selected text. |
 |
Aligns the current paragraph to the left margin of the page. |
 |
Centers the current paragraph in the middle of the page. |
 |
Aligns the current paragraph to the right margin of the page. |
 |
Justifies the paragraph. |
 |
Formats the current paragraph as a numbered list. |
 |
Formats the current paragraph as a bulleted list. |
 |
Decreases the indentation of a paragraph. |
 |
Increases the indentation of a paragraph. |
 |
Inserts a horizontal rule. |
 |
Removes formatting. |
| Styling commands | |
 |
Contains a list of available styles (CSS). Select the style you want to apply to the selected paragraphs. It is strongly recommended to format your text using styles only for design consistency. |
 |
Changes the text format. For example: Heading1, Heading2, ..., Normal. |
 |
Changes the text font. |
 |
Changes the text size. |
 |
The site template (design) using which the page is displayed. |
| Properties | |
| The Properties section contains formatting parameters of the selected text. Also it is used to display and customise visual components placed in the page body. | |
"Properties" tab
This tab is used for customising and editing the page property values and for managing the META tags, such as page keywords and description.
| Field | Description |
|---|---|
| Property | The property name. |
| Value | Field for specifying the property value. |
Note!
The More button adds an empty row where you can create a new property of the current page (this property is used only for the current page). When creating a property, its mnemonic code should be specified in the Property field. Only Roman letters can be used here.
"Menu" tab
This tab allows to add an item linked to the created page to current section menu (i.e. the section in which the page is created).
| Field | Description |
|---|---|
| Add a page to menu | Check this field if you want to add an item linked to the created page to the current site section menu. |
| Menu type | Specify the menu type to which the link to the created page is to be added. |
| Menu item | Specify how the link to the page be added:
|
| "Add a new item" | |
| Name of a new item | The name of a new menu item linked to the created page. |
| Insert before the item | Here you can specify the location of the menu item. For example, if the field value is "Last item", the created item will be the last one in the section menu. |
| "Link to an existing item" | |
| Item | Selects the existing menu item to which the link to the page will be added. |
Control buttons
| Button | Description |
|---|---|
| Save | Saves the created page. |
| Apply | Saves the page parameters. Editing continues. |
| Cancel | Cancels changes performed. |
Uploading images to the site
With the HTML editor, you can easily upload images from a local disk and add them to your pages. The image uploading procedure is very simple:
-
Place the caret to the image insertion position and click
on the toolbar. -
Click
to open the image upload form. - Select folder in which the image will be stored (usually images).
- In the Upload file field, specify the file path on your local machine. Select a file you wish to upload by clicking Browse.
- Check Overwrite if the destination folder already contains a file with the same name and if you want to replace it.
-
Click Upload. The file selected will be uploaded.
-
Select the uploaded file in the Site Explorer and click Open.
- If required, specify additional image parameters: width, height, border width etc.
- Click Save.
Visual components
Visual components are the logically finished program code performing operations on the data of system modules. With their help you can publish news, display photo gallery elements or catalogue items etc. Virtually any source code can be published as a component.
For easier adding components to a page, a special interface is developed on the base of the HTML editor. When editing a page, you can select a desired component from the list and drop it into the page body.
Beside code, components offer a set of parameters determining the component behaviour.
The main peculiarity of a component is that they allow to manage these parameters via the visual interface. After a component is inserted in the working area, the component properties bar will be displayed at the bottom of the page. For example: the toolbar of the "All news" component properties looks like the following:
If the property inspector is not visible, select a component - this will unhide it. After the required properties have been set, the page is ready to go.
| 2001-2005 Bitrix | Bitrix Site Manager - Content Management & Portal Solutions |