Rich Text Editor Details

or a more detailed explanation of the Rich Text Editor features, refer to the list below.

Pasting :

There are three ways to paste. All three options will produce a pop-up box in which you can copy the content into, and upon clicking OK, will be inserted into your content block:

: A standard paste commonly used in other editors that will also transfer text styles.

: A plain text paste which will strip the copied selection of any formatting and styling.

  : A specialized paste option for content copied from Microsoft Word and other similar word processing applications.

 

 

Find & Replace :

The Find Tab

This gives you a space to enter the selection of text that you would like to search for, with options to start searching either above or below your cursor position, or case sensitivity.

The Replace Tab

This gives you the same case sensitive search options, but with the ability to change each instance of the search for word, with a replacement. You can opt to replace the current selection with text of your choice by clicking Replace, or Replace All will replace every instance found within the document. This can prove to be very useful in a large document when you want to quickly and easily change all entries of "Dan" with "Daniel", for instance.

Inserting a Numbered List  or Bulleted List :

Selecting either of the two Insert/Remove List button will insert the corresponding list maker. Each time that you hit the Enter key, a new bullet/the next number will be inserted on the next line. Simply enter any list items that you would like, completing that list item by hitting enter, and select the list button to remove the last list icon. If once you create a list and decide to remove it, highlight the content of the list you wish to remove the style from, and select the corresponding list button to remove the list format, leaving the content behind.

Inserting Links and Anchors :

Inserting a Link:

To add a link to your page, highlight the text or image that you and to make a link, and then click on the link icon in the toolbar. Within the text box labeled Link URL, enter the address of the link's destination.

To link to an internal page:

An internal link refers to one that is within your domain. Simply enter the URL beginning after the .com, .org, or .net ending (to link to this page, you would enter "/getting-started/editor/editor-details").

To link to an external site:

An external site is one that is not under your domain. To link to an external site, enter the full URL (ex. "http://www.google.com").

To link to a file:

Next to the Link URL box, click the browse icon (  ) and open the file within the produced File Browse window. For more information on the File Browse, click here, or view our video to the right.

To link to an email:

Linking to email allows the insertion of a link, and when clicked, opens the users default email software with the prescribed address already filled in. To do this, simply type "mailto:" before the email address with no spaces (ex. "mailto:siteadmin@yourdomain.com") within the Link URL box.

 

Using Links for Anchors in Text:

Anchors are essentially bookmarks within a page. In order to utilize anchors, you must first place one, by selecting the Insert/Edit Anchor icon (  ), then point to it using a link from the Anchors field detailed above in the link insertion section. Back to Top is a common use for this is.

For an in-depth view of using anchors and links, click here for our Adding Links Walk-through.

Inserting Images :

To insert an image click the image icon in the toolbar, which will bring up the Insert/Edit pop-up box. To choose available images on the server, click the browse icon (for more information on using the Browse Window, click here).

 

The Appearance Tab:

The appearance tab give you the ability to tweak how the image will be displayed. On the right-hand side of the window there is a preview of how the image will interact with the content around it.

• Alignment: This drop down menu sets how the image will be aligned on the page. the "left" and "right" options are the equivalent of "floating" an element left or right.
• Dimensions: By keeping the Constrain Proportions box checked, the height:width ratio will remain the same, but if you choose, you can uncheck this box and set what the dimensions will be.
• Vertical Space: Measured in pixels, the length of the margin on the left and the right of the image.
• Horizontal Space: Measured in pixels, the length of the margin on the top and the bottom of the image.
• Border: Measured in pixels, the width of the border around the image. The border will appear on the outside edge of any margins applied.
• Style: Here you any enter in any inline CSS, for example: "z-index: 5; position: relative; right: 25px;".

For an in-depth view of using images, click here for our Adding Images Walk-through.

Inserting Tables :

Here you can specify the number of columns and rows, the border width, alignment on the page, and also assign a class from a stylesheet. Selecting the Table Caption checkbox will insert a row at the top of your table in which you can add text to describe the content of your table.

The Width and Height fields let you specify how big you would like the table overall in pixels. The system does it's best to maintain these proportions, but adding a significant amount of content, images, or line breaks, will eventually force the table to expand. If this is the case, consider smaller font or a different table layout.

Cell Spacing lets you control the amount of space in between each cell, that is, giving the appearance that neighboring cells do not share the same border (pictured far right). Cell Padding refers to the amount of space between the content of the cell and it's border, often making the box bigger relative to the amount of content within it (pictured right). 

The Advanced Tab is where you can add additional styling to a table. Background Color and Image are both possible, as well as a border for the table. If an ID is required for the table, used from a stylesheet, that can be specified here, in addition to any "in-line" Styles in the Style textbox.

Editing a table row  :

Selecting this icon will apply styling to the row that contains the currently selected cell. Row in table part sets the row type, either a table head, table body, or table foot. The Alignment setting refers to how the data for the row you are editing will be aligned (horizontally) within it's table cell. Vertical alignment does the same thing, except aligning the data at the top, center, or bottom of the table cell. The advanced tab contains many of the standard advanced options, such as background image and color, ID, and in-line styling.

Editing a table cell  :

For an individual cell, many of the same properties can be set that have already been discussed for table rows (alignment, vertical alignment, background color and image, height, etc.). In addition, you can assign a Cell type or Scope to a cell. Both are used to add a sort of classification to the data that follows.

 

Inserting a Form :

When setting up a form, you will first be presented with the General tab. Here you will find fields to input the Name of your form, Action, Method (either POST or GET), Target, Encryption Type, and Class.

The Advanced Tab contains some of the fields used when building a form, such as ID, Onsubmit, and Summary.

The Hidden Fields Tab allows you to add in one or more hidden fields to your form by setting both the Name/ID and the Value.

Input Elements  :

On the General Tab you can specify many basic properties such as Height, Width, Background Images, Borders, etc. "Input" is an umbrella term used for a variety of different form elements. There are several Types of input elements:

Text

Creates a textbox for general text entry. It is what you have been using to enter values into these properties menus!

Checkbox

Creates a box which can be checked, or unchecked. Only one checkbox may be selected per form section (such as "Gender", the user would choose either "Male" or "Female").

Radio

Creates a radio button which can be selected or unselected. Unlike checkboxes, multiple radio buttons can be selected (for example, "Sports Played" could include, soccer, basketball, hockey, etc. One selection does not necessarily exclude another).

Button

Creates a general button, where upon creation, it's purpose is assigned (Javascript functions, to submit, etc.).

File

Creates a file upload filed complete with a Browse button. Here the user can upload a file to the form.

Masked Password

Creates a password entry field where the entry is not viewable on the screen.

Submit Button

Creates a button used to submit all the information within it's containing form.

Reset Button

Creates a button used to reset all the information within it's containing form.

 

The Advanced Tab has many additional components to customize your input tags. Here you can assign an ID. Also, a number of Javascript functions can be easily added on an item-by-item basis. Many times certain fields are Required for a form to be submitted (such as phone number, address, credit card, etc.), and by checking the Required box, it will ensure that the corresponding field is filled in in order to submit the form.

Select Boxes  :

Select boxes are a useful way to provide a number of options to the user, that is very conservative with the space that it takes up. If you wanted the user to pick the state that they live in, you could have a list of 50 radio buttons, very space intensive, or a select menu like this: Select State Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware Columbia (District of) Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming .

On the General Tab you will see first the Name field. below this there are two boxes labeled Name or ID and Value with a green Add button to the left. The Name or ID field is what is actually viewable once the select bar is expanded, just as you could see all the states in the example above. The value is what each selection means on the server side, which will vary depending on your option criteria.

In addition to some other basic options, such as Height, Width, Border, etc., you can also set a Default Selected Value. The checkbox to allow Multiple Selections will permit the user to choose more than one option from your select menu (the default is unchecked, where only one option can be selected).

The Advanced Tab contains many familiar options including ID, Summary, Style, Javascript functions, as well as making the field be Required or Disabled.

Textareas  :

Text areas are larger blocks in which the user adds text. You can alter any textarea in many of the same ways you could with the other form elements, such as Name, Class, Background Image, Border, etc. In the case of Value, this would be the initial text to appear. Many times a textarea might contain a value of "Enter your message here...". This Initial value will be over-written by the user upon entry.

Much like the other form elements Javascript functions, an ID, making the field Required or Disabled are all provided on the Advanced Tab.