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
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 & Redo
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.
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, Unlink, Anchor
Link
Add a new link to a page, or if you have a link selected, to edit it. Select text or an image and then click the Link icon.
Unlink
Remove a link. Select the text or image that has the link, then click the Unlink icon.
Anchor
Create an “anchor” somewhere within the content of your page and the link will "jump" them to the section where that anchor begins.
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, and 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, Table, Horizontal Line, & Special Characters
Image
Add a new image to your page or if you have an image selected, to edit it. Select an image by pasting in the URL to an image, or select one from your File Manager by clicking "Browse Images".
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). 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).
Alignment 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>”.
The preview includes the stock "Lorem Ipsum" text as a placeholder to preview how your image looks against other content.
Table
Insert a new table or edit a selected table. You can choose how many columns and rows, as well as other table formatting options by clicking "More..."
Insert Horizontal Line
Place a horizontal rule like the one below.
Insert Special Character
Choose from a list of special characters that otherwise might be hard to find. For example: ©, ™, ®.
Source
Source lets you view and edit the HTML source code for your content. This is a 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. iHOUSEweb Customer Support DOES NOT support working with the HTML source code.
Maximize
Puts the content editor in full screen mode. 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.
Accessibility Checker
This tool Analyzes your content and will resolve some issues automatically and recommend how to fix common accessibility problems it finds. By producing accessible content, you make it available to everyone, including people with permanent, temporary, situational, or changing disabilities.
Paragraph Format
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
Change 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 & Background Color
Text Color and Background Color change the color and background color of your selected text. Select your desired color from the color palette dropdown.
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, & Underline
Bold, Italicize, Underline your selected text. Clicking the icon again while selecting formatted text will remove that specific formatting.
Numbered and Bulleted Lists
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.
Indentation
Increase Indent (right icon) will indent your selected paragraph. You can indent the same paragraph multiple times.
Decrease indent (left icon) will remove one indent level from an indented paragraph each time it is pressed.
Text Justification
Left Justify, Center Justify, and Right Justify can be used to set the alignment for your selected paragraph.
Always click the Save 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.
You can select from the following link types:
Page
Link to any published page on your website.
Modal Form
A pop-up to any published form dialog.
IDX Search
Link an IDX Search results page thats generated directly from the "Edit" button. As you configure your IDX Search Link, the IDX Search URL will automatically fill in the parameters selected from search and generate the URL. Be sure to click "Done" when your search is configured.
Note: This Link generator is only available to our IDX enabled Elite Agent Pro and Elite Office Pro customers with React websites.
Market Report
Link a Market Report results page thats generated directly from the "Edit" button. the Market Report URL will automatically generate based upon the Location specified on the Market Report Link. Be sure to click "Done" after configuring the location.
Note: This Link generator is only available to our IDX enabled Elite Agent Pro and Elite Office Pro customers with React websites.
URL
Link out to any page. Choose a standard protocol from the list or include your own by selecting "<other>" and writing it in along with the URL. Click "Browse Server" to include a link to one of your Files.
The Target destination for a URL can be opened in the Same Window, a New Window, or a Frame on your site.
Link to an Anchor in the text
In this example we've selected the text "You've Jumped!" and set the anchor name to be "jump".
Next, select the text you want to set as the link to the anchor. We've chosen "Click Me!" Select the anchor from the list by either anchor name or element ID and click OK.
Link to an email address that will open a new email message with filled out subject and body (if set) in the users preferred mailing app.
The Target destination for a URL can be opened in the Same Window, a New Window, or a Frame on your site.
Telephone
Link to a telephone number that will fill in the number in the users preferred calling app.
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.