WYSIWYG Editor

Last Updated 3/9/2015
Brick River uses the CK Editor as for WYSIWYG editing. Find out what all those buttons do.

Source
View and edit the source HTML.  You can move between source and design modes.


Clipboard



Cut
Highlight text or objects in the editor removes and copies to the clipboard

Copy
Copy the highlighted text or objects to the clipboard

Paste
Paste the contents of the clipboard. This will paste all formatting

Paste as Plain Text
Paste the text contents of the clip board without formatting from the original source

Paste From Word
Avoid having to modify text pasted from Word with the Paste from Word feature. Everything is done for you at the click of a single button.

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



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 and image.  Yu have the option of adding the URL of the image, browsing the server for a image from the files area or uploading a new image. 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

Want to learn more?

Call 800-924-5220 or

Schedule a demo