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

WYSIWYG Editor (Orange & White CMS)


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.

Editor Toolbar

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

Source Button 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.

Save On this panel, you can save your article, create a new page, and preview the results of your page. When working on a page, it is recommended to save as often as possible, in case something was to happen and you would lose your work. The second button of this panel will create a new page. It will basically clear out all the content present in the page and start over. Make sure to not click this button by accident or you will lose your work on this page. If you would like to cancel, just click on the Undo button. The last button previews your text in a new tab. For better results, it is recommended to enter the URL of the page you are working on in a different tab of your browser and refresh its page every time you make changes in the editor.

Template ButtonThe template button gives you the choice of several templates of text block styles. You can choose between text in columns, text with an image, or text with tables. For more control over the organization of your text, it is recommended to use other functions of the editor.

Paste PanelThis panel gives you the possibility to cut, copy or paste text. You may also complete those tasks by clicking right with your mouse. The other two buttons will only be used if you’d like to paste text previously written in a different program like Word. 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.

Spell Check buttons This panel gives you the options to print, check your spelling as well as more spell checking options such as Spell Check As You Type (SCAYT),languages, or dictionaries.

Undo/Redo Buttons This panel allows 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.

Find & Replace Buttons Find and replace allow you to look for a specific phrase in your text and replace this phrase with a different phrase. You can also use it to quickly look for a part of your text by entering the part of the text you’d like to locate.

Select buttons Here the first button will select all your text. The second one will clear selected text of any format like bold or italics.

Formating Text Buttons 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.

Bullets and Lists 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.

Indenting buttons This panel offers the 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).

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

Text Styles 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. Or order to 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.

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 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.

Font SelectorSize Selector The Font and Size menus allow you to choose between a variety of fonts and sizes for your text.

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

Preview button 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. The second button shows all the different paragraphs in your document. Every time you hit Enter, a new paragraph will be created. If you wish to enter a new text line within the same paragraph, hold the Shift key and hit Enter at the same time.

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

Creating a Link

Hyperlinks 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 (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://.

Link Dialog

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 Unlink.

Uploading an Image

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

Image Upload Panel

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

Image Dialog

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.