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
- Link Topic
- Text direction from left to right
- Text direction from right to left
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.
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.
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.
The Size dropdown provides various font sizes that you can use to highlight certain text such as titles, subtitles, etc.
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.
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.
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).
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 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 the entire content on a page by clicking the Select All button. Alternatively, you can also use CTRL + A.
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.).
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 (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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.