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:

Shown below is the complete toolbar:

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

• Formatting Styles
• Paragraph Format
• Font Style
• Font Size
• Text Color, Background Color, and Text Orientation
• Numbering, Bullets, and Text Alignment
• Link, Add Image, Upload Files, and Embed Video
• Undo, Redo, Copy, Paste, and Find
• Remove Format
• Select All
• Show Blocks
• Source
• CSS
• Maximize
• Spell-check
• Link Topic
• Unlink
• Anchor
• Text direction from left to right
• Text direction from right to left
• Insert
• Text Transformation

Formatting Styles

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

Paragraph Format

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

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 Size

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

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.

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.

Add Links, Add Images, Upload Files, and Embed Video

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

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.

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.

Select All

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

Show Blocks

The Show Blocks option displays all the 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.).

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.

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 are the background color, font family, font size, max-width, etc. Just click on the CSS button to make the changes you want.

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.

The screenshot above shows 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

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), which 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. 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

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 to which you want to link. 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).

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.

Anchor

With the Anchor option, you can create a link to a different text in the same article. For example, you have bullet points in an article that you've elaborated on below under respective subtitles. 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.

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

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.

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

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

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.

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 Direction from Right to Left

This button switches the flow of the text and progresses it from right to left. As shown in the screenshot below, 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.

Insert

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

Text Transformation

The text transformation feature converts the selected text into uppercase or lowercase.

That's all you need to know about the WYSIWYG editor. If you encounter any issues or have any questions, feel free to contact our support team.