loading Loading...
add chat to your website

Guide to the Content (WYSIWYG) Editor


Toolbar

The Toolbar is the section located above the editing area. It contains menu buttons that give you access to various functions. All buttons are grouped according to their function and include both simple operations (such as basic text styling or formatting) and more advanced features (such as inserting images, tables, videos).

You will find the following on the first row

 

Undo - The Undo feature is a quick way to cancel the recently introduced change and restore the page to its previous state. This is especially useful when the last-performed operation was particularly destructive to the page, such as when you select all of its content and accidentally delete it. To undo, click on the toolbar button. You can also use Ctrl + Z.

 

Redo - The Redo feature lets you revert back from the last undo operation. This means that the page returns to the state it was in before you performed the undo. To redo, click on the toolbar button. You can also use Ctrl + Y.

 

Cut - To cut a text fragment or selected element, start by selecting it, then click the Cut button. You can also use Ctrl + X.

 

Copy - To cut a text fragment or selected element, start by selecting it, then click the Copy button. You can also use Ctrl + C.
 

Paste - To paste a text fragment, first cut or copy it from another source, then click the Paste button. You can also use Ctrl + V.

If direct access to the clipboard is blocked, you will be asked to paste the text into the Paste dialog window.

 

Paste as Plain Text - If you want to paste an already formatted text, but without preserving the formatting, you can paste it as plain text. To achieve this, copy the formatted text and press this button on the toolbar.
 

Paste from Word - The editor allows you to copy text from Microsoft Word. It will preserve the basic formatting when you paste from Microsoft Word. To achieve this, copy the text from a Word page and paste it by clicking on the Paste button. You can also use Ctrl + V.
 

Things don't always look so great when pasting from Word. If you have formatting issues, it is best to paste as plain text.

Find - This will find a word or a phrase in your page. You can also perform Find and Replace which will find a word or phrase in your page and replace it.

 

Select All - This will select all contents of the page, including text, images, and tables. You can now apply whatever action you wish to the selected content. You can also use Ctrl + A.
 

Remove Formatting - To remove text styling, select the text fragment and press this button. All text styling will be removed, and the text will be displayed in the default font.
 

This is a great feature when working with text that does not seem to be formatting correctly.

Show Block Elements - This will display dotted frames around the block-level elements of the page along with their HTML tag, like P for paragraph or H1 or level 1 heading. Since it might be confusing to tell what style is applied to text, the block feature makes it easier to understand the HTML structure.

 

View HTML Code - The editor is WYSIWYG (what you see is what you get). This means that you can write text in the editing area and format it in a few simple clicks of the toolbar buttons without knowing HTML syntax. The editor produces clean, standards-compliant HTML code behind the scenes. However, if you would like to check the HTML source code of your page, use this toolbar button.

 

CSS - You can control the page's CSS style.  CSS stands for Cascading Style Sheets. It allows you to store style presentation information (colors, fonts, layout, etc.) separately from your HTML structure. This allows precise control of your page's layout and format.  Each site comes with default CSS styles. To edit the page's CSS, click on this toolbar button. An overlay will appear to display all of your CSS. You can add or edit the CSS as you wish. Each site's CSS styles are different. Learn more about CSS.

 

 Maximize Editor - To make writing more convenient, you can also maximize the editor to the size of the browser window. When you click this button, the editor will fill the entire browser window and stretch to its borders. If you want to return to the default view, press the same button again.
 

 Spell-Check - To check the spelling of your text, click this button. The Spell-Check dialog window will open and let you go through the text from one error to another.

 

 Spell-Check as You Type (SCAYT) - This option offers spelling corrections as you type. SCAYT checks the text immediately after you type it, and as it finds a spelling error, it marks a red wavy line underneath the misspelled word.

By default SCAYT is disabled. If you want to turn it on, click this button, and select Enable SCAYT from the menu.

 

Hyperlink - This is a powerful feature that will allow you to add clickable hyperlinks or email addresses. For a full description, see Links.
 

Link to Page - This will allow you to insert a hyperlink to another page in your site. For a full description, see Links.
 

Remove Hyperlink - Removing a hyperlink is just as easy as adding it. When the cursor is placed on a hyperlink, the toolbar button becomes active. Pressing the button removes the hyperlink and leaves plain text. For a full description, see Links.
 

Anchor Link - To use anchor links, you will need to insert anchors in the page. To insert an anchor, press the button on the toolbar. For a full description, see Links.

 

 Insert - Menu to insert the following: 
 

Image - The Image Properties dialog window will open so you can set options that define image source, size, display properties, and other advanced properties.  You can also browse your image library to select from an image you previously uploaded. For a full description, see Images.
 

Embed Video - This allows you to add video from popular video sites such as YouTube, Vimeo, Viddler, and others. For a full description, see Videos. ProProfs does not allow direct uploading of video files. You must host your videos on a video-sharing website.

 

Table - A table is the perfect format for some types of data, such as statistical information. The editor not only lets you add and edit tables in a quick and easy way but also offers advanced customization options. For a full description, see Tables.

 

Horizontal line - The horizontal line, also known as horizontal rule, is a divider that cuts the page into parts and spans from one side of the page to the other. To add a horizontal line to the text, click this button. The style of the horizontal rule is defined in the site's CSS file HR { }


PDF Page Break - A page break will tell the PDF to start a new page. Once inserted, the page break will be visible in the editor as two dotted lines with a page break symbol. When you use the PDF function, the page will be split on two separate pages.  Page breaks are invisible on the web version of the page. 

 

Toggle Content - A toggle will allow you to have a section hidden by default when the page loads. The a reader can click on the heading and the additional information will expand. For a full description, see Toggles.

 

Special Character - To insert a special character into your page, click this button. The Special Character dialog window will open and allow you to choose a symbol from Latin letters, numbers (including fractions), currency symbols, punctuation, arrows, and mathematical operators.

 

Code Highlighter  - Paste in your raw code syntax and have it automatically formatted to look pretty and readable. 

 

You will find the following on the second row

 

Styles - Styles are predefined formatting options that make it easier to keep the presentation of the text uniform. To choose a style, select a text fragment and click the Styles button. The Styles drop-down list contains a number of predefined styles that you can use. To make the choice easier, the list displays each style as it would appear, giving you a preview of what the text will look like.


A style can be applied to the whole page, a paragraph, or a text fragment of any length. However, it is recommended that you keep the styling consistent and not combine too many different styles in one page. You can control the formatting of certain styles through the CSS.

 

The Styles drop-down will display your custom CSS classes if you extend your sites CSS. You must define the type of element such as div.classname, h2.classname, etc. If you enter .classname it will not appear in the drop-down.

Paragraph Format - Paragraph formats are predefined formatting options that make it easier to keep the presentation of the text uniform. With this feature, you can quickly customize the way a text fragment looks; you do not need to separately change the font, size, or background color.

To choose a paragraph format, place the cursor inside the block-level element and click the Format button. The Format drop-down list contains a number of predefined block-level styles that you can use. To make the choice easier, the list displays each format as it would appear, giving you a preview of what the text will look like.
 

The options in the drop-down are standard HTML elements. You cannot add more options to the drop-down.

Font Size - The font size determines how big or small a font will appear. The default font size is determined by the page's CSS. However, you can override the default font size. To change the font size of a text fragment, click the Size button to show the drop-down list. The font Size drop-down list contains a number of font sizes that you can use. To make the choice easier, the list displays each font size as it would appear, giving you a preview of what the text will look like.

 

Text Color - This allows you to change the color of text in your page by using a color palette. To choose a color, select a text fragment and click this button. The Text Color drop-down menu will open so you can select a color from a basic palette of 40 shades.

 

Background Color -This allows you to change the color of the text background in your page by using a color palette. To choose a color, select a text fragment and click this button. The Background Color drop-down menu will open so you can select a color from a basic palette of 40 shades.

 

Bold - To make text bold (thicker letters), click this button or use the Ctrl+B keyboard shortcut.

 

Italics - To make text italic (slanted letters), click this button or use the Ctrl+I keyboard shortcut.

 

Underline - To underline text, click this button or use the Ctrl+U keyboard shortcut.

 

Strike-Through - To strike through text (draw a horizontal line through the letters), click this button.

 

Numbered Lists - Numbered lists are useful when you want to list a number of items in a particular order. They are perfectly suited for lists of procedures or step-by-step instructions. To create a numbered list, click this button. A list number will appear at the beginning of the line of text where your cursor is, and that line of text will be indented. If you want to add more items to the numbered list, press the Enter key at the end of the numbered line of text. The cursor will move to the next line and insert the next list number at the beginning of that line.

 

Bulleted List - Bulleted lists are useful when you want to set off a number of items in no particular order. To create a bulleted list, click this button. A bullet will appear at the beginning of the line of text where your cursor is, and the line will be indented. If you want to add more items to the bulleted list, press the Enter key at the end of the bulleted line of text. The cursor will move to the next line and insert the next bullet at the beginning of that line.

 

Increasing Indentation - To increase the indentation of an element, click this button. The element that you've placed your cursor on will be indented by the distance of one tab. You can also create nested lists using this feature. To indent an element even further, click this button as many times as necessary.

 

Decreasing Indentation - To decrease the indentation of an element, click this button. The indentation at the element that you've placed your cursor on will decrease by the distance of one tab.

 

Align Left - When you align text to the left, that paragraph is aligned with the left margin and the text is jagged on the right-hand side.

Center - When you center text, that paragraph is centered in the middle of the page and the text is jagged on both sides.

Align Right - When you align text to the right, that paragraph is aligned with the right margin and the text is jagged on the left-hand side.

Justify - When you fully justify text, that paragraph is aligned with both the left and the right margins; the text is automatically spaced out to be aligned with both margins, so it is not jagged on any side.

Elements Path

The Elements Path is the section at the bottom of the editing area that displays information about the HTML elements of the page (for wherever the cursor is positioned). It is an advanced feature for users who want to have more control over the source code of their page.


The elements path always shows a hierarchy of HTML elements for the currently selected element of the page.


This is what the elements path looks like: