Guide to (WYSIWYG) Editor

 

The WYSIWYG (What You See Is What You Get) Editor enables you to create the help pages you want. It is simple and absolutely easy to use. You get all the editing and customization options for your requirements.

 

You can use a variety of heading tags, insert images, embed YouTube videos, interlink with other help pages, and do a lot more with the editor. You can even access the page's source code and make certain changes to it if you're a coder.

 

Benefits of the WYSIWYG editor:

  • Edit and customize the entire content of the article the way you want.
  • You do not need to possess any coding knowledge to use the editor.
  • If you know how to code, the editor also gives you the option to access a page's source HTML code.

 

When you attempt to create or edit a page, this is how the toolbar appears (highlighted in the box). To expand the toolbar, click on the small down arrow button at the far right of the toolbar, as shown in the screenshot below:

 

Editor toolbar

 

Shown below is the complete toolbar.

 

WYSIWYG editor

 

Let's understand all the options available in the Editor from left to right, starting with the first row:

 

 

Formatting Styles

The first option is the Styles dropdown. It offers various formatting styles for the textual content. For example, you want a certain text to appear in a box with a gray background? Styles dropdown gives you that option. Depending on your requirement, different formatting styles can be used to customize the look and feel of the text.

 

Formatting styles

 

Paragraph Format

The Paragraph Format dropdown, as pointed in the screenshot below, allows you to create the main title and sub-titles depending on an article. It helps you in the segregation of various sections in an article.

 

Paragraph format

 

Font Style

The Font dropdown is as simple to use as it looks. It provides a wide range of font styles that you can use to give your articles a unique look and feel.

 

Font name

 

Font Size

The Size dropdown provides various font sizes that you can use to highlight certain text such as titles, subtitles, etc.

 

Font size

 

Text Color, Background Color, and Text Orientation Options

Select from a plethora of choices of text color and background color. Make the text bold, italic, underline it, or strike it through. Combined with other text-related editing options, these options allow you to customize the text in your articles the way you want.

 

Text color

 

Numbering, Bullets, and Text Alignment

The numbering and bullet options give you the freedom to create points that could be important to highlight certain content in an article. While you can use the numbering option to write a step by step process, use the bullet option to simply highlight important points in no particular order. Alignment options further enable you to arrange the text to the left, center, or right on a page.

 

Numbering

 

Add Link, Add Image, Upload Files, and Embed Video 

You can link text to another ProProfs help article, a product page on a ProProfs website, or even to a non-ProProfs webpage, depending on your requirement. Upload images, videos, embed YouTube videos and upload files (DOC, DOCX, PDF, PPT, PPTX, XLS, XLSX, XLTX, DOTX, XLSM).

 

Linking

 

Undo, Redo, Copy, Paste, and Find

You also get separate options to paste as plain text and paste from MS Word (which would retain the formatting of the copied text from MS Word). The Find option works as intended - you can search for any piece of text within that particular article.

 

Undo

 

Remove Format

Remove all kinds of text formatting, such as bold, italic, underline, and strikethrough, in a single click by using the Remove Format option. This option is helpful especially when you want to use it on a large amount of text. Just select the text and hit the Remove Format button to get rid of the aforementioned formatting.

 

Remove format

 

Select All

Select the entire content on a page by clicking the Select All button. Alternatively, you can also use CTRL + A.

 

Select all

 

Show Blocks

Show blocks

 

The Show Blocks option displays the entire text inside different blocks according to their text type. For example, the H1 title is displayed inside a box labeled H1, normal text is displayed inside a box labeled P (paragraph), and so on. Just click on the Show Blocks button to see the text inside the blocks. To remove the blocks, click on the Show Blocks button again. The screenshot below shows all the text inside different blocks depending on the text-type (H1, P, etc.).

 

text in blocks

 

Source

The WYSIWYG editor is simple and easy to use. It provides you with all the options and settings to create nice and impactful help articles exactly the way you want them. You do not need to know any coding for any kind of customization with this editor. However, if you want, you can still access a page's HTML code by clicking on the Source button.

 

Source

 

CSS

CSS (Cascading Style Sheets) gives you the freedom to customize the text beyond the options available in the WYSIWYG editor toolbar. Some of the things that CSS allows you to customize is the background color, font family, font size, max-width, etc. Just click on the CSS button to make the changes you want.

 

CSS

 

Maximize

Maximize

 

The Maximize option expands the page across the entire browser window. You can use this option if you prefer a larger field of view of the page you're working on. When you click on the Maximize button, this is how the editing page expands.

 

Maximizing the help page

 

In the screenshot above, you can observe that when the page maximizes, the TOC (table of contents) and the dashboard get hidden. To bring back the default view, click on the Maximize button again.

 

Spell Check

Spell check

 

Enable spell-check using this option. When you click on the ABC button, you get an option to Enable SCAYT (Spell-Check As You Type) that checks the spellings as you type. Once SCAYT is enabled, you can then access the Options, Languages, Dictionaries, and About SCAYT.

 

 

The Options lets you choose what text you want to include/exclude from spell-checking such as domain names, words in upper cases, etc. The language option lets you choose what language this editor should follow. And if you want, you can add frequently used words in the dictionary that might be unique to your content requirement, so that the spell-check recognizes them as correct words. About simply tells the version of the spell checker.

 

Link Topic

Link topic

 

The Link Topic option enables you to link to another ProProfs help site/page. Click on Link Topic and you'll get the following pop-up window where you can select a ProProfs page you want to link to. Just click on a page from the list and save. The selected page will appear as a link on the current page (where your cursor is).

 

Linking topics

 

Unlink

The Unlink option is used to remove the link that you created using the Link Topic option. To do that, just select that linked text and hit Unlink.

 

Unlink

 

Anchor

Anchor

 

With the Anchor option, you can create a link to a different text in the same article. For example, you have bullet points that you've elaborated below, under respective subtitles, in an article. You can put an anchor at each subtitle and connect it to its corresponding bullet point. Once done, clicking on a bullet point will take you directly to that subtitle. It's like a quick scroll. The Anchor option is really useful in long articles as it minimizes manual scrolling and makes navigation easy.

 

To create an anchor, follow the steps below:

 

1. Place the cursor right before the text that you want to link to.

2. Click Anchor.

 

Use anchor

 

3. Enter a name for the anchor in the small pop-up window that opens.

 

Anchor name

 

4. When the anchor is successfully put, it is prefixed to that particular piece of text, as shown below.

 

 

5. Now select the text that you want to link to the anchor.

6. Click the Link button.

 

Select text for anchor

 

7. When the pop-up window opens, click on the Link Type dropdown and select the option Link to anchor in the text.

 

Use link anchor

 

8. Click on the By Anchor Name dropdown, select the correct Anchor name, and hit OK.

 

Use anchor name

 

Save your page and reload it. The anchor is now ready to use. Taking the current example, clicking on the Format Styles link will automatically scroll to its corresponding anchor. You can create an anchor between any two text pieces.

 

Anchor on a help page

 

Text Direction from Left to Right

In the screenshot below, the highlighted button keeps the direction of the flow of the text from left to right. This is the default setting.

 

Text flow from left to right

 

Text Direction from Right to Left

This button switches the flow of the text and progresses it from right to left. As shown in the below screenshot, the text "Text direction from left to right" has been shifted towards the right side of the page. While you'll continue to type normally, the text flow will be from right to left.

 

Text flow from right to left

 

Insert

Use the Insert option to add images, videos, tables, PDF page break, and many more. For example, the Insert option provides you settings to edit the dimensions of an image while uploading.

 

Insert

 

 

 

 

Related Articles:

File & Image Manager
How to Add and Publish a Page
Home Page

Was this information helpful?

The page cannot be found

The page you are looking for might have been removed, had its name changed, or is temporarily unavailable. Please make sure you spelled the page name correctly or use the search box.

add chat to your website