Home » Helpdesk » Website Administrator Documentation » WYSIWYG Editor (Orange & Grey CMS)

WYSIWYG Editor (Orange & Grey CMS)


— Toolbar Buttons

— Creating a Link

— Uploading an Image



The Page Content module, as well as a few other modules allows you to create content using an editor called “WYSIWYG” (What You See Is What You Get). It makes creating content more simple and gives you the ability to create content as it will appear on your website.

The toolbar offers a variety of options to edit your content. We will go over each of those tools below:

 The “Save” button is not part of the toolbar but is located near the top of the screen. Selecting Save allows you to retain any content changes and to publish the new or updated page.

 The Source button is here to switch to the page source code view. Its use is only recommended to HTML-savvy users. If you accidentally clicked on the button, you can exit the source code by clicking it again.

 This panel gives you the possibility to cut, copy or paste text. You may also complete those tasks by right-clicking with your mouse. The “T”-clipboard and “W”-clipboard buttons allow you to past text as plain text (“T”) or from Word (“W”). For text written in Word, it is recommended to import it using either the tool Paste as plain text (Caution: Paste as plain text will get rid of any styles applied to your Word text),or using the Paste from Word tool. The latter is the most appropriate to this type of task, as it will keep all styles applied to text written in word such as bold text, italics, etc, while shedding extraneous proprietary Word code.

The final two icons in this panel allow you to undo or redo any task. If you’d like to cancel your last task, click on the arrow pointing to the left. If you’d like to reapply the previously canceled task, click on the arrow pointing to the right.

 This button gives you the options to check your spelling, including options such as Spell Check As You Type (SCAYT),languages, or dictionaries.

 This panel applies different formats to your text like bold, italics, underline and strike through. Click on the desired format and begin writing text. Click again on the selected format to return to a normal format. You can also select the text to which you want to apply a format with your mouse and click on the ones you want to apply. The “Tx” icon removes all applied formatting from selected text.

 This panel allows you to create numbered lists and lists with bullet points. Proceed to click on the desired style of list and start writing your list. Every time you will hit Enter, on your keyboard, the editor will create a new element in your list. When you are finished with your list, hit Enter twice and return to normal text style.

This panel also offers options to create tabulations (indents) in your text. With the first two buttons, you can increase of decrease the amount of indent (space between the left of the page and the beginning of your text).

Here you can organize your text using different paragraph styles like aligned to the left, center text, align to the right and justify.



 On this panel you can create links. First off, select the text you want to support the link (hyperlink) then click on the first button, until a menu appears. The first tab will help you create your link type (for example, would you like to create a clickable link to a web page or a clickable link to write an email?). Proceed to paste the URL of the webpage you want to link to or the email address. Please leave the protocol to http://.

 ADVANCED USERS: It is only recommended for advanced users to use the others protocols. Advanced users can also create anchors in their text (clickable links that will automatically scroll the page down to the text the user wants to read).

The second tab will define the target of type of the link (whether you would like the link to open in a new window, in a pop-up window, in the same window, etc.). The third tab will be used for links to downloadable files.

To give your visitors the option to download a document, or any other type of file, click Choose file and proceed to locate the file you want to upload and click OK. To finalize its upload, click the Send it to the server button. To remove a link, simply select the link text in your content, and click the “Unlink” icon.

The third, “Flag,” icon in this panel allows you to set up an anchor link — a tag that allows links to point to a specific location on a web page rather than automatically pointing to the top of the page.



 To add an image, click the first icon here (it looks like a painting).

A new window will open: click on the Upload tab.

 Choose the file (image) you want to add to your text then click “Send it to the Server”.

Once the image is added to the server, go back to the Image Info tab and choose the dimensions of your image, a possible border and its alignment.

When you are finished, click OK.

To the right of the “Image” icon, are the “Insert Table,” “Insert Horizontal Line,” “Insert Special Character” icons. Selecting the Table & Special Character icons will open dialog boxes that guide you through the process of setting up those elements in the page.

 The Styles button gives you the choice of several text block styles. For better control over the organization of your text, it is recommended to use other functions of the editor rather than the Styles function.

 The paragraph format menu is one of the most useful menus in the toolbar. It allows you to format your text in a consistent way across your website. In order to do that, content has to be divided in categories of content. Pretty much just like an essay, or a thesis, content will be organized in important part titles, that contain sub-sections and sub-titles, and each sub-section contains normal text. It is key to identify the titles that you want to stand out the most and appear to contain the rest of the text. In order to do that, the format menu allows you to define your headings using tags like Heading 1, Heading 2, Heading 3, etc (commonly known as H1, H2, H3, etc.). Each of those headings adopts a different style of text. Usually, the size of the headings decreases from Heading 1, to Heading 2, etc.

NOTE: Utilizing well-organized content hierarchy provides real search engine optimization (SEO) benefits.

 In which way are headings different than changing the font size of your text? 

The answer is simple: the content visible on your page is organized accordingly to the style of page that has been designed and built into the website code base by WSD. For instance, if you want your most important titles to always appear in size 30 and in blue, it could be a good idea to define it as a Heading 1, then every time you will select a title and make it a Heading 1, it will be formatted the same way as other Heading 1 across your website. This functionality comes in very handy when the site owner decides to change the style of his or her headings on the entire website, because it simply allows WSD to work into the style sheet of the website and make the changes to the headings, instead of going into each Content Page Record on the website and recalibrate all the headings. For more consistency and a more efficient style code across your website, it is recommended to define your titles using the different Headings in the paragraph format menu.

 This panel allows you to choose the colors of your text as well as the text background color.

 The last panel allows you to use the entire browser window to write and edit your content. Click again on the button to minimize and return to a normal setting.

 For more help with the editor, feel free to click on the question mark.





PHONE: 415-331-8679.