WYSIWYG Basics

Brick River provides simple tools for "What You See Is What You Get" text editing and enhancement.  These tools are available whenever your cursor is placed in a field or page area that allows HTML enhanced content - including:

  • the Body Field of Content records
  • the Description Field of Contacts records
  • Editable areas of site Pages

These tools are very similar to those used in word processing applications. 

 

Source


The Source button toggles the content display between WYSIWYG and Source Code modes.  In Source Code, the content includes the HTML tags used to render the content in a web browser.  Source Code should only be edited by users with HTML scripting skills.

In WYSIWYG mode, HTML tags are hidden and content is displayed as it will appear in a web browser.


Clipboard

Cut
Click to remove highlighted text or objects to the clipboard

Copy
Click to copy the highlighted text or objects to the clipboard

Paste
Click to paste the contents of the clipboard to the location of the cursor. This will paste all formatting applied to clipboard content

Paste as Plain Text
Click to paste the text contents of the clip board without the formatting of the original source

Paste From Word
Click to paste content copied from MS Word retaining any Word formatting that is presentable on web pages.

Undo
Undo the last action in the editor window

Redo
Undo by mistake, undo your undo


Font


Bold
Add  <strong></strong> around the highlighted text

Italic
Add  <em></em> around highlighted text

Underline
Add <u></u> around highlighted text

Remove Format
Remove text formatting that is applied through inline HTML elements and CSS styles, like basic text styles (bold, italic, etc.), font family and size, text and background colors or styles applied. Note that it does not change text formats applied at block level.


List and Align

Ordered List
Add a numbered list or by highlighting text create an ordered list from the highlighted text

Unordered List
Add a bulleted list or create a bulleted list with the highlighted text

Left Align
Adds <div></div> around an object or text

Center
Adds <div style="text-align: center;"></div> around an object or text

Right Align
Adds <div style="text-align: right;"></div> around an object or text


Format

Add a heading, paragraph or div from the dropdown list


Font Color and Background Color

Font Color

Highlight text and apply the selected color to the text

Font Background Color
Highlights text by selecting the text and adding a background color.


Snippets

The Snippets button displays a list of available "code snippets" - or bits of HTML that apply a set of formats and styles.  Developers can create custom Snippets for users to insert formatted text and pictures.

Examples:

Quote Box - Left
Adds an area for text to be added and floats left so other objects and text will wrap around it

Quote Box - Right
Adds an area for text to be added and floats right so other objects and text will wrap around it

Image Box - Left
Inserts a placeholder image with a caption area.  Double click the placeholder image to add your image. The object is floated left so that other objects and text wrap around it

Image Box - Right
Inserts a placeholder image with a caption area.  Double click the placeholder image to add your image. The object is floated right so that other objects and text wrap around it


Insert

Insert Image

Adds an image.  You have the option of adding the URL of the image by browsing the server for a images stored in Brick River folders, or uploading a new image from the local system. If you do not see the upload image icon, save the record and then click on the Insert image icon again. The insert image dialog has the following options:

  • Alt Text - add text to the image alt attribute. 
  • Align Left, Align Right
  • Padding Top, Padding Right, Padding Bottom, Padding Left
  • Image Width
  • Image Height
  • Crop - If the height and width are smaller than the image size crop the image rather than re-size it
  • Add a CSS Class
  • Add and HTML id attribute
  • Style - add inline CSS to the style attribute

Insert Table
Insert an HTML table


Set the properties in the table dialog when it opens.  You have the following options:

  • Rows 
  • Columns
  • Headers
  • Border size
  • Alignment
  • Width 
  • Height
  • Cell spacing
  • Cell padding
  • Caption 
  • Summary

Insert Horizontal Rule
Inserts a <hr />  - horizontal line

Insert Block Quote
Inserts a <blockquote> </blockquote>

Insert Div
Adds the block element <div> </div>


Link

Add Link
Add a URL into the dialog box to add a link to highlighted text or images

Remove Link
Click on a link and select the remove link icon to remove the link

Add Bookmark
Add a bookmark so you can get to a specific location on a page


Show Blocks

Show blocks shows a dotted line around block elements

Brictionary

Squamscott- A river in southeastern New Hampshire.  It is named after the native people who lived on its shores.  The Squamscott flows past the Brick River office in Exeter.  It teams with herring and attracts seabirds, rowing crews, and creative people.

 

Want to learn more?

Call 800-924-5220 or

Free trial