The content editor appears in numerous locations on the site and allows you to write and format your text, and insert pictures in a quick and easy way. You can even use it to edit the html code directly.


Understanding the Content Editor Toolbar





Templates are prefabricated chunks of formatted content that you can use to jump start your page design. Click on the template you want to include. By default it will insert the template content in addition to any other content you already have. There is also a checkbox option to have it replace your current content.



Undo allows you to undo your last action. You can keep pressing it to undo a series of actions. The keyboard shortcut for undo is ctrl + z for PC and cmd + z for Mac.


Redo allows you to redo an action that you just undid. You can keep pressing it to redo a whole series of actions. The keyboard shortcut for redo is ctrl + y for PC and cmd + y for Mac.



Paste From Word When copying and pasting in content from older versions of Microsoft Word, use the Paste From Word dialog window. This helps remove most of the “junk” html code that Word typically inserts while retaining most of your formatting. Note that images will not copy in but there will be placeholder spots for them. In general we recommend that you NOT copy and paste from Word, but if you do, please use this tool. The keyboard shortcut for copy is ctrl + c for PC and cmd + c for Mac. The keyboard shortcut for paste is ctrl + v for PC and cmd + v for Mac.


Select All selects all the contents in the content editor and is a convenient tool for when you want to Remove Format from everything or to delete everything. The keyboard shortcut for Select All is ctrl + a for PC and cmd + a for Mac.


Remove Format removes any formatting applied to your selected text. For example, if your selected text is bolded, underlined, italicized, and colored, clicking this button will undo all that formatting at once, leaving plain text.



Link, allows you to add a new link to your page, or if you have a link selected, to edit it. Select text or an image and then click the Link icon.


Unlink lets you remove a link. Select the text or image that has the link, then click the Unlink icon.


Anchor lets you create an “anchor” somewhere within the content of your page. You can then set up a link to that place on the page. A good example of this is a Frequently Asked Questions page. It usually has a mini table of contents at the top of the page that contains links to the various questions that appear further down that same page.

To create an anchor, position your cursor where you want to insert it, then click the Anchor icon. Enter an anchor name and click OK.

Linking to an anchor is done the same way as other links: first select text or an image, then click the Link icon. Select “Anchor in your page” as the Link Type and select the name of the anchor you want to link to.



Image allows you to add a new image to your page or if you have an image selected, to edit it. In the images dialog, you can upload a new image or select one from your File Manager. There are also basic formatting and alignment options.


Table allows you to insert a new table or edit a selected table. You can choose how many columns and rows, as well as other table formatting options.


Insert Horizontal Line inserts a horizontal rule.


Insert Special Character lets you choose from a list of special characters that otherwise might be hard to find. For example: ©, ™, ®.



Source lets you view and edit the HTML source code for your content. This is an very powerful feature that can be used to insert your own custom CSS styles and javascript snippets. However, if you do not know what you are doing, you could break your webpage. Use this at your own risk! iHOUSEweb Customer Support DOES NOT support working with the HTML source code.



Maximize puts the content editor in full screen mode while you make your edits. Click it again to revert back to the normal view. While in normal view, you can also click and drag the lower right hand corner to make the content editor taller or shorter.



Paragraph Format should be used when you want to add a subheader. Using this (rather than bolding and enlarging the text yourself) ensures that you use the template’s native styling for subheaders which can give your pages a more consistent and professional appearance. To add a subheader, select a paragraph, and choose what heading number to use. To remove a subheader, select a paragraph and choose “Normal”.



Font Size changes the size of your selected text. Select what size you want (in pixels) from the dropdown menu. In general, we recommend NOT using this tool except for emphasis. Instead use Paragraph Format to set up your Subheaders and allow the template to define the size of your normal content. This will give your pages a more consistent and professional appearance.



Text Color and Background Color change the color and background color of your selected text. Select your desired color from the color palette dropdown. For more colors or to enter your own custom color value click More Colors. We recommend using these options only sparingly for emphasis. Allowing your template’s native styling to define the colors for your content will give your pages a more consistent and professional appearance.



Bold, Italicize, or Underline your selected text. Clicking the icon again while selecting formatted text will remove that specific formatting.



Numbered List and Bulleted List work identically. If no text is selected, clicking the icon will insert a new list item. If you have text selected, the paragraph it is in will be converted to a list item. Clicking the icon again (while on a list item is selected) will convert that list item back to a normal paragraph.



Indent will indent your selected paragraph. You can indent the same paragraph multiple times. Outdent will remove one indent level from an indented paragraph each time it is pressed.



Left Justify, Center Justify, or Right Justify can be used to set the alignment for your selected paragraph.

IMPORTANT: Always click the “Save this page” button at the bottom of the page after making any changes in the content editor. If you don’t, your changes will be lost!


Adding and Editing Links


To add a new link, select your desired text or image and click the Link icon. To edit an existing link, select it and then click the Link icon. The Link icon brings up a dialog box that contains the link settings.


Link Types


  • URL Lets you put in the URL of an external website (or the URL to one of your files). Select the appropriate protocol then type your URL (example: www.google.com).

  • The “Browse Files” button lets you choose a file from your File Manager. Choose an existing file or upload a new one. Click on the file you want to select it, then click Open.

  • Page in your site will show you a drop down list of all the published pages on your site. Choose the one you want to link to.

  • Saved Search will show you a drop down list of all your saved searches (if any). Choose the one you want to link to. Later on when you follow the link it will run the saved search and show you the search results.

  • Anchor in your page will show you a drop down list of all your anchors on the page (if any). Following this link will take you to the exact place on the page where the anchor is.

  • Email links will attempt to open the default email program of whoever clicks on it. The email address, subject, and message will be prepopulated with the values you put in. Enter your email address (or wherever you want these emails to go to) and any default subject line and message.

Target is only available for the “URL” link type. It lets you specify how the link opens:

  • Same Window replaces your current page with the new link.

  • New Window opens your link in a new window.

  • Frame on your site.

Click OK to save your changes.


Adding Images


To add an image, put your cursor in the place where you want to insert your image and click the Image icon. To edit an existing image, select it and then click the Image icon. The Image icon brings up a dialog box that contains the image settings.

To choose an image click on “Browse Images”. From here you can upload a new image or choose an existing image from your File Manager. Select the file you want and hit Open.

Now you can format your image. As you edit, the preview window shows roughly what your image will look like in your page.

  • Alternative Text provides an alternative text description for your image. This is used by screen readers for disabled viewers and is also used by Search Engines.

  • Width and Height allow you to control the dimensions of the image (in pixels), though you will have additional resizing options after the image has been added to the page.

  • Margins lets you determine how much space there should be around the top, right, left, and bottom of the image.

  • Border lets you give the image a border. Thickness is in pixels. The color is determined by your template. (usually black)

  • Align controls whether the image will be floated to the left or right of the page. When you choose either “Left” or “Right”, the text will wrap around the image. To remove text-wrapping, set the value back to “<not set>”.

To edit the link for the image, click the Link tab at the top. Type the URL for the website you wish the image to link to and select the Target, if desired.

Click OK to save your changes.


Paragraph Break vs. Line Break


The main difference between a paragraph break and a line break is in how much space gets added. By default, pressing the “return” key will create a new paragraph. But sometimes, you may not want the extra space that appears between paragraphs, you just want to start a new line of text. That’s what a line break is. To add a line break hold down the “shift” key while pressing “return” [shift + return].

While this behavior may not seem particularly friendly at first, it allows for some of the other tools to work correctly.

Take subheaders for instance:

If you used all line breaks to create your content, and then went to style one of your lines as a subheader, it would style the entire block of text as a subheader. This is because the “Format” tool works on the entire paragraph, not just a single word or line. Even though you may have formatted your text with extra line breaks to look like paragraphs, the editor is not smart enough to interpret two line breaks as a new paragraph. What you really have is one big paragraph.

The same issue exists with with the indent, list, and alignment tools.


Keyboard Shortcuts


To cut, copy, or paste content, right click in the content editor and select the appropriate action. Common keyboard shortcuts will also work in the content editor.


For PCs:

Cut: Ctrl + x
Copy: Ctrl + c
Paste: Ctrl + v
Bold: Ctrl + b
Italic: Ctrl + i
Underline: Ctrl + u


For Macs:

Cut: command + x
Copy: command + c
Paste: command + v
Bold: command + b
Italic: command + i
Underline: command + u


For all:

Line Break: Shift + Enter
Paragraph Break: Enter


Credits

The content editor is an open source implementation of the popular and extremely powerful CKEditor.