How to Use the Internal HTML Editor (Desktop version)

Question
How do I use the internal HTML Editor?

A real WYSIWYG (what you see is what you get) HTML Editor is included as a right-click option in every editable field where you may have content going online or into an email. This allows you to edit HTML content in a “design view” and easily enter text, images, hyperlinks, tables and more without needing any knowledge of HTML code. While the HTML Editor can be found in the right-click menu throughout the database, it is primarily used in the Mass Communicator for sending email, Web Content for editing the pages of your website, and Event Descriptions when creating events for your online calendar.

To access the HTML Editor, right-click in the field you need to edit and choose “Internal HTML Editor.” Some fields (like the Mass Communicator) may also have a link you can click in the upper right corner above the field. 
 
You can then begin entering your content. You can type directly into the Editor, or you can copy/paste text from another application. There are four rows of tools at the top of the screen that you can use to further edit and create your content.

The first row contains the following tools, in order of their appearance:

  - Undo: undoes your last action and allows you to click a dropdown of past actions to undo

 - Redo: redoes any “undone” actions and allows you to click a dropdown of past “undone” actions to redo

 - Spell Check: checks the spelling of the entire content, starting with the cursor location and moving forward (then to the top), giving the option to ignore or choose suggested spellings on each option.

 - Insert Link: allows you to insert hyperlinked text into your content.

 - Remove Link: when a hyperlink in your content is selected, this tool will remove the link from the selected text.

 - Font Color: change the color of the font

 - Background Color: change the background color of the font

 - Bold: sets the selected text as bold

 - Italic: sets the selected text as italic

 - Underline: underlines the selected text

 - Subscript: lowers selected text to appear below the line of text

 - Insert Symbol: gives a dropdown of different symbols that can be inserted into the content

 - *Font Name: sets the font for text you are entering, or changes the font of selected text.

 - *Real Font Size: allows you to set the size the selected text will display
NOTE: if you are editing your static website content, you do not need to set the font. The font of your site will automatically be applied to the content when it appears online.

 - Paragraph Style: allows you to set selected text in the format of headings or other styles to appear on your website

 - Align Left: justifies all selected content to the left of the screen

 - Align Center: justifies all selected content to the center

 - Align Right: justifies all selected content to the right of the screen

 - Remove Alignment: removes set alignment and returns to default

The second row contains the following tools, in order of their appearance:

 - New Paragraph: returns the cursor to a new paragraph with its own formatting style

 - Horizontal Rule: inserts a line into the content stretching across the content and separating paragraphs

 - Indent: moves selected text to the right

 - Outdent: moves selected text to the left

 - Numbered List: inserts a number to begin entering a list (or applies a number to selected text)

 - Bulleted List: inserts a bullet point to begin entering a list (or applies a bullet to selected text)

 - Cut: removes the selection from the content and stores it on the Clipboard.

 - Copy: copies the selection in the content and stores it on the Clipboard.

 - Paste: places the contents of your Clipboard into the content.

 - Paste from Word: when the contents of your Clipboard were cut/copied from Word, this tool will paste them “cleanly” into your content without any inappropriate coding.

 - Paste Plain Text: places the contents of your Clipboard into the content stripped of ALL formatting.

 - Paste HTML Text: allows you to copy HTML code into the content.

 - Strip CSS Formatting: removes all style coding from the selected content.

 - Strip Font Elements: removes all font coding from the selected content.

 - Insert Image: allows you to insert an image from an external location into your content. You must have the source/location URL for that image for this tool.

 - Image Manager: allows you to upload new images and insert images you have already uploaded to the Manager. You can also edit Image properties using this tool (see below).

 - Insert Table: allows you to define and insert a table (similar to Microsoft Office) on your website

 - Table Properties: allows you to edit the dimensions, layout, background color, alignments and other properties of the selected table

 - Insert Special Fields: allows you to insert fields from the database to be used in the Mass Communicator and personalize email communications.

In addition to the tools listed above, you have several other options for managing your content in the HTML Editor.

First, after inserting an image through either the Image Manager or the Web Content Images dropdown you can manipulate that image’s properties. To do this, simply click on the image. At the bottom of the HTML Editor, you will see the following appear:

 

You can also insert your existing Web Content Images using the "Select web content image" link in the upper right hand corner.


After clicking on "Select web content images," you will see the screen below. Expand the folders to see your web content images by file name.  Then click on the file names to preview the images.  Once you have previewed the image you want, click "Select" to insert that image into your HTML.


Another tool for managing your content is the ability to insert HTML Templates.  To learn more about creating templates, click here.  To insert a template into your content, click Select Template at the top of the screen:

A list of all available templates will appear. You can click on any template title to preview that template, or click Select to insert it into your content in the location of your cursor.

NOTE: If your template is a “completed” email or web page with HTML and Body tags, you will be asked if you would like to replace the content in the HTML Editor with that template. If you click Yes, all existing content will be removed and completely replaced with the template you’ve chosen. If you click No, the template will simply be inserted into the content already in the HTML Editor at the location of your cursor.

Finally, once you have completed your content in the HTML Editor, you must accept your work to turn it into HTML Code. To do this, simply click “Accept HTML” at the top right corner of the HTML editor.

NOTE: Once you click Accept HTML and are returned to the screen you started from, the changes that you made have NOT been saved.  Clicking Accept HTML simply turns those changes into code for you – if you are working on a web content record or HTML Template (for example), you will still need to save your work.