Formatting the Articles Using WYSIWYG Editor in BoldDesk
This guide explains how to format article content in BoldDesk using the built-in WYSIWYG (What You See Is What You Get) editor. It covers essential text styling options, adding media, creating links, and structuring content for a professional and visually appealing knowledge base article.
BoldDesk allows you to format the articles using the following options that are available in the WYSIWYG editor.
- Text formatting
- Insert Code
- Insert Table
- Insert Link
- Insert Image
- Clear Format
- Source code
- Maximize
Checkout this video for more details.
Text Formatting (Bold, Italic, Underline, Lists, Alignment, Headings)
Goal: Apply basic text styles and structure your content.
Actions:
- Styles: Select text → click Bold, Italic, or Underline.
- Lists: Click Bulleted list or Numbered list; press Enter to add items, Shift+Enter for a new line within an item.
- Alignment: Choose Left, Center, Right, or Justify.
- Headings & font styles: Select text → choose Heading levels (e.g., H2, H3) or font styles from the Styles dropdown.
Best Practices:
- Use headings (H2/H3) for section structure and better scanning.
- Keep paragraphs short (2–4 sentences) for readability.
- Prefer lists for step-by-step instructions.
Font & Background Color
Goal: Highlight text using color.
Actions:
-
Select the target text.
-
Click Font Color to change the text color.
-
Click Background Color to apply a highlight/shading behind text.
Use Cases: Emphasize warnings, notes, or key actions.
Insert Code
To insert the code blocks in the article, select the Insert Code option in the toolbar. The code blocks are highlighted with a background.
You can add an optional language identifier to your code block to enable syntax highlighting in a different language.
Insert Table
Use the Insert Table toolbar option and select the number of rows and columns you need in the table grid, and then insert the table on the content.
Tables can also be inserted through the Insert Table option in the pop-up where the number of rows and columns can be provided manually.
Insert Link
Point the cursor within the editor where you wish to insert the link. Click the Insert Link tool on the toolbar to open the insert link dialog. The dialog has the following options:
| Options | Description |
|---|---|
| Web Address | Type or paste the destination for the link you are creating. |
| Display Text | Type or edit the required text that you want to display text for the link. |
| Tooltip | To display additional helpful information when you place the pointer on the hyperlink, type the required text in the “Tooltip” field. |
| Open Link in New Window | Specify whether the given link will be open in the new window or not. |
Insert Image
Goal: Add images to the article.
Actions:
-
Click Insert Image on the toolbar.
-
Click Browse to select an image from your computer.
-
Insert the image.
Best Practices:
- Use ALT text to describe images for accessibility and SEO.
- Prefer optimized formats (For example, PNG for screenshots, JPEG for photos).
- Keep images appropriately sized for fast loading.
Clear Format (Remove Styling Only)
Goal: Remove text styling without changing content structure.
Actions:
-
Select the text with unwanted styling.
-
Click Clear Format.
The Clear Format option eliminates only the text styling applied, without altering the underlying structure, layout, or content.
Source Code View (HTML Mode)
Goal: Inspect and edit the article’s underlying HTML.
Actions:
-
Click Source Code to toggle HTML view.
-
Edit HTML directly if needed.
-
Click Source Code again (highlighted) to exit and return to WYSIWYG mode.
- While in Source Code view, WYSIWYG toolbar actions may be limited.
- Use this mode to fix complex layout issues or remove stubborn inline styles.
Fullscreen (Maximize Editor)
Goal: Expand the editor to fill the browser window for focused editing.
Actions:
-
Click Fullscreen (or Maximize) on the toolbar.
-
Click again to restore to the normal view.
Use Cases: Long-form editing, side-by-side with previews, distraction-free mode.
Frequently Asked (FAQs)
Q1: What is a WYSIWYG editor?
A: It’s a rich text editor where the content you edit looks similar to the final display (“What You See Is What You Get”).
Q2: Does “Clear Format” remove headings and lists?
A: No. It removes inline styles (bold, italics, color) but keeps structure (headings, lists, tables).
Q3: How do I ensure links open in a new tab?
A: In Insert Link, enable Open Link in New Window.
Q4: How do I improve accessibility?
A: Use heading hierarchy, descriptive link text, and ALT text for images.
Q5: Can I apply multiple styles to the same text?
Yes, you can combine bold, italic, and underline.
Q6: Does Clear Format remove hyperlinks?
No, it only removes text styling.
Q7: Can I insert videos in the WYSIWYG editor?
Yes, use the media embed option or paste the video link.
