The WYSIWYG Editor

Oct 14, 2014 10:08 am

What is the text editor?
The Accrisoft Freedom text editor is used in many modules, including Web Pages, Events, News Articles, and Blogs. It is comprised of two rows of toolbar buttons that you can click on to format text, and is very similar to word processing programs like Microsoft Word. Freedom's text editor is a WYSIWYG editor, because it uses the “What You See is What You Get” platform to format text without having to manually use HTML tags. When using the text editor, HTML is automatically generated by the editor itself. You can view text HTML by clicking on the HTML tab in the upper righthand corner of the editor, and users with HTML knowledge can bypass the WYSIWYG portion of the editor by entering content directly as HTML within this tab.

The text editor can also be used to insert links, pictures, tables, and video without using special coding. The editor can also be used to resize and reposition images.

Video Overview

How do I use the text editor to copy and paste text from word processing programs, other websites, or programs like FrontPage or Dreamweaver?
Due to security changes to all modern Internet browsers, the cut, copy, and paste buttons used in previous versions of Freedom have been removed. This is because these browsers no longer allow the clipboard to insert code into browser windows, as that capability has been used by hackers to attack computers and spread viruses.

To copy text, highlight it and right-click your mouse and select COPY from the pop-up menu. You can also use the shortcut CONTROL-C.

To paste text, highlight it and right-click your mouse and select CUT from the pop-up menu. You can also use the shortcut CONTROL-X.

To paste text, highlight it and right-click your mouse and select PASTE from the pop-up menu. You can also use the shortcut CONTROL-V.

How do I add a link to a webpage?
The Insert Link button lets you add a link to the text editor that visitors can click on to navigate to another website, module, file uploaded to the site, or feature of the website. This feature helps you easily link to many of the modules, content, and features of the website.

To add a link, type in the text that you’d like to use for the link, or, if you already have text entered, highlight it.

Click on the chain link button.

Follow the onscreen instructions to add the appropriate link to the module, webpage, or file.

How do I insert a table?
The Insert Table button allows you to insert tables to help organize and format text within the editor. Once you insert the table, you can enter or move text into appropriate table cells. The gray table borders that appear in the text editor when inserting a table will not be visible on the live website; these are only displayed in the Blue interface to help organize information.

To insert a table, take the following steps:

1. Click in the text editor where you want to insert the table.
2. Click the Insert Table button
3. In the columns field, enter the number of columns you’d like to include in the table.
4. In the rows field, enter the number of rows that should be included in the table.
5. In the cellpadding field, enter the spacing that should be included around the text in each cell of the table.
6. In the cellspacing field, enter the spacing pixels that should be included between cells of the table.
7. In the alignment field, select whether the table should be aligned as if it were a new paragraph (not set), centered on the page (center), aligned to the left of the text with the text wrapping around the table (left), or aligned to the right of the text with text wrapping around the table (right).
8. In the border field, enter the width of the table borders in pixels. To hide the borders, enter zero (0) in this field.
9. In the width field, enter the width of the table, either in a percentage or in pixels. If you enter a width of 100 percent, the table will stretch to fit the content area of the webpage, which may stretch to the width of the browser window.
10. In the height field, enter the height of the table, either in a percentage or in pixels. Note that the height of the table may not display correctly if the rest of the content or table formatting is not set properly.
11. To assign a style to the table from the stylesheet, select the style name from the Class dropdown list.
12. To insert the table with the predefined settings you’ve provided, click the Insert button.

How do I create a page anchor?
The Insert Anchor button allows you to insert an inline anchor tag into the content of the text editor. You can then create a link to this anchor to create relative links, or links to specific places on a webpage.

To create an anchor, take the following steps:

1. Place your cursor at the point you want to link to.
2. Click the Insert Anchor button.
3. Type the text that you want to link to in the popup window that appears.
4. Scroll to a different part of the page and type the text for the link (e.g., “Back to top.”).
5. Highlight the text you just added and click on the chain link icon.
6. Select Internal Link from the module dropdown list and Same Window for the target. Leave the menu set to “(None).”
7. Click Next.
8. Type “#AnchorName” (without quotes) and replaces “AnchorName” with the text you entered in step three. Note that spelling and case must match exactly.
9. Click Insert Link.

How do I create a page break?
The Page Break button lets you insert a manual page break in the content to break pages at a point you specify, instead of breaking content after a calculated number of characters. This lets you control exactly wear a page break occurs. If you add a page break to content, the system will only break the content into multiple pages at the page breaks you enter.

When you add a page break, the system adds a tag to the content called “page_break,” which adds links to the content on the live website that visitors can click on to view the rest of the content. These links include “More,” “Previous,” and “Next” links at the bottom of the content.

The Page Break button is only available within the Web Pages module. Note that if you select the Single Page Format checkbox for a webpage, located near the bottom of the screen, the system ignores the page break tags added to the content and displays the content as a single webpage.

How do I insert a custom character, like a copyright symbol or trademark?
Click on the Insert Custom Character button to insert special symbols. To add a custom character, place your cursor in the editor where you’d like to insert the symbol, then click the Insert Custom Character button and click on the symbol that you’d like to include. The symbol will be inserted into the text.

How do I insert an image?
The Insert Image button allows users to insert images into a webpage through the File Mnaager. If an image has not yet been uploaded to the File Manager, you can upload it through this button. You may need to disable any popup blockers used by your browser to use the Insert Image option, and you cannot paste images from the clipboard directly into the text editor.

To add an image to a webpage, click on the Insert Image icon.

If you need to add a new image directly to the File Manager, click on the Upload button. Browse to find the file on your computer, then click Insert.If you are uploading a new image and need to add a new directory, or folder, in which to house the image, click on the Add a New Directory button and a popup window will appear, prompting you to create a name for the new directory. To upload an image to this directory, click on the directory after it’s been created and appears in the File Manager window.

To add a previously uploaded image, find the image from the list of files or within the appropriate folder (file names appear in black; folders in blue). Click on the link, and the image will be inserted.

When you upload the image, you can also apply settings that change the alignment of the image or set the ALT tag text for the image.

How do I apply ALT text to an image?
Alternate, or ALT, text, is what appears in place of an image, when an image cannot be displayed, such as in the case of an image being deleted from the website; a visitor places his or her cursor over the image and views the automated tooltips feature of his or her browser; or a visitor is using special software to make the website more accessible, such as for a visually impaired visitor.

If you need to add ALT text, or alternate text, to an image, click on the upload button like you would when adding an image to the text editor. In the Alternate Text field, enter the text that should appear for the image if it cannot be displayed. Then continue uploading the file as you normally would.

How do I change text color and background color?
The Color Palette button lets you change the color of the currently selected text. To change the color of text, drag the cursor over the text to select it. Click the Color Palette button, then select the color you’d like to use, or enter a color name or number in the field at the bottom of the popup window and click OK.

To change the background color of selected text, use the Background Color button. Note that this feature only changes the background color of selected text, not the entire screen that the text appears on for the website. To change the text background color, highlight the text, click on the Background Color button, click on the color you’d like to use for the background in the popup window or enter the name or number of the color in the field at the bottom of the popup window.

If you choose to enter a color name or number when changing text color or text background color, be sure to enter the number sign (#) before the number, and enter all six digits of the color. For example, you could either enter the word “red” or #FF0000.

How do I edit HTML using the text editor?
The HTML tab lets you toggle between the text editor window and the HTML editor. When working in the HTML editor, you can manually insert your own HTML. You can also copy and paste HTML formatting from other websites or programs (such as FrontPage or Dreamweaver) directly into the HTML editor. If you enter or copy HTML formatting, be sure to include all necessary starting and ending tags in the HTML.

How do I add raw HTML for media to a webpage?
Freedom allows users to add any raw HTML using the text editor. Because the editor sometimes rewrites HTML, this is a useful feature that will maintain webpage consistency and provide users even more control over their websites. To use this feature, take the following steps:

1. Click “Edit” in the Action column next to the webpage you’re working on.
2. Click on the Media button.
3. Select “Other (Raw HTML” from the Type dropdown menu.
4. Click on the Advanced tab.
5. Enter or copy and paste the HTML you’d like to use.
6. Press the Insert button.


Text Editor Reference
The following icons are available in the text editor toolbar, which help you format text and add images, links and other formatting:

The Undo button lets you undo the previous action you made in the text editor. To undo additional actions, click the Undo button again. Note that you can also press CTRL-Z on the keyboard to undo actions.

The Redo button lets you redo an action that you have undone. To redo additional actions, click the Redo button again. Note that you can also press CTRL-Y on the keyboard to redo actions.

The Insert/Edit Embedded Media button allows you to insert Flash, Shockwave, QuickTime, Windows Media, and Real Media content into the webpage. Clicking this button brings up a new window that lets you select the type of media and the file you’d like to use. Clicking the Advanced tab brings up additional options allowing you to specify things such as alignment, quality and identification information. After setting the options, click Insert to add the content to the webpage.

The Horizontal Rule button lets you insert a horizontal rule (line) the text editor. To insert a horizontal rule in the text editor, click in the text editor where you want to insert the rule, then click the Horizontal Rule button. To change the size of the rule, click on the rule to select it, then click on one of the gray selection dots and drag the cursor in the direction you want to stretch or shrink the rule.

The Style dropdown list lets you select the style for the text that is currently selected. The styles that are available in the text editor are defined by the system administrator when he/she sets up the stylesheet for the website. Note that the way the style formats the text is defined by the style. To change the style of text, drag the cursor over the text to select it, then select the appropriate style from the Style dropdown list.

The Font dropdown list lets you select the font for the text that is currently selected. The fonts that are available in the text editor are the standard fonts used on typical web pages. To change the font, drag the cursor over the text to select it and select the appropriate font from the Font dropdown list.

The Text Size dropdown list lets you select the font size for the text that is currently selected. The font sizes that are available let you select the smallest setting up to the largest setting. To change the font size, drag the cursor over the text to select it and select the appropriate font size from the Size dropdown list.

The Bold button makes the currently selected text bold. To make text bold, drag the cursor over the text to select it and select the Bold button.

The Italic button lets you italicize the text that is currently selected. To italicize text, drag the cursor over the text to select it, then select the Italic button.

The Underline button lets you underline the text that is currently selected. To underline text, drag the cursor over the text to select it, then select the Underline button.

The Remove Format button lets you strip out all HTML formatting from the content entered in the text editor. This enables you to easily clean up content that was copied and pasted to the text editor from another source, such as a Word document. Note that this strips out all HTML including tables, styles, and text formatting so that the content is reduced to simple text with line breaks.

The Left button lets you left align the text that is currently selected. To left align the text, drag the cursor over the text to select it, then select the Left button.

The Center button lets you center the text that is currently selected. To center the text, drag the cursor over the text to select it, then select the Center button.

The Right button lets you right align the text that is currently selected. To right align the text, drag the cursor over the text to select it, then select the Right button.

The Align Justify button lets you align the currently selected text to a full format. To full align the text, drag the cursor over the text to select it, then select the Align Full button.

The Ordered List button lets you automatically place the text that is currently selected in a numbered list. The editor inserts a number at the start of each paragraph that is selected. To create a numbered list in the text, drag the cursor over the text to select it, then select the Ordered List button.

The Bulleted List button lets you automatically place the text that is currently selected in a bulleted list. The editor inserts a bullet at the start of each paragraph that is selected. To create a bulleted list in the text, drag the cursor over the text to select it, then select the Bulleted List button.

The Indent button lets you indent text that is currently selected. To indent the text, drag the cursor over the text to select it, then select the Indent button. To indent the text more, click the Indent button again.

The Outdent button lets you outdent text that is currently selected. To outdent the text, drag the cursor over the text to select it, then select the Outdent button. To outdent the text more, click the Outdent button again.