Advanced WYSIWYG editor

Plans supporting the use of Advanced WYSIWYG editor

The 'Advanced WYSIWYG editor' combines lightweight design with powerful, rich text editing capabilities, supporting specific Markdown syntax. It offers a highly visual and intuitive experience that surpasses traditional Markdown editors yet maintains more flexibility than the WYSIWYG editors.

CAUTION

The articles switched from the Markdown or the WYSIWYG editor to the Advanced WYSIWYG editor cannot be reverted back.

Using Advanced WYSIWYG editor

You can use the Quick insert menu, slash command, and specific Markdown syntax to create and edit content in the Advanced WYSIWYG editor.

Quick insert menu

The Quick insert menu appears as a floating option within an empty block. It allows users to quickly add commonly used elements to their articles.

The available options in the Quick insert menu are:

• Eddy AI Writer (): Generate AI-powered content directly in your article.

• Bullet List (): Insert a bulleted list. Use the dropdown to select default, disc, square or circle.

• Table (): Add a table to structure data.  

• Image (): Upload and insert an image.

  NOTE

  • Use the available tools to format the image. Click the image to open the floating formatting menu.

  • You can align, crop, add borders, add shadows, add captions, and more.

    For more information, read the article on Image formatting in the Advanced WYSIWYG editor.

• Link (): Add a hyperlink. You can also use the Ctrl + K keyboard shortcut.

• Code block (): Insert a code block for technical content. Click within the code block to access the contextual toolbar:

  • Language dropdown: Select the desired language

  • Copy: To copy the code block

• More: Click More to access additional formatting options using the Slash menu.

NOTE

• The Quick Insert menu appears only when the block is empty.

• It disappears automatically when you start typing.

• If you clear the content in a block, the Quick Insert menu reappears.

Start writing with Eddy AI, Pick template, and Import docs

When the article in Advanced WYSIWYG editor is in an empty state, you can start creating your content using the following options:

a. Start writing with Eddy AI

1. Click Start writing with Eddy AI.

2. Enter your desired prompt or topic.

   The AI will generate an initial draft based on the provided input.

NOTE

For more information, read the article on AI Writer.

b. Pick a template

1. Click Pick a template.

   A panel will appear with available templates.

2. Select the desired template and preview it.

3. Click Use this Template to structure your article with pre-defined content.

   The article's name and slug will automatically populate using the template's title.

NOTE

For more information, read the article on Templates.

C. Import document

1. Click Import document.

   The Import panel will appear.

2. Upload a .docx file using drag-and-drop or the Upload a File option.

   The article name and slug will be auto-generated based on the uploaded file's name.

NOTE

• The Start writing with Eddy AI, Pick a template, and Import docs options will appear prominently when the article editor is empty.

• Once you start typing manually, the options disappear.

• If you clear the content in the editor, these options reappear for easy access.

Slash commands

Type / in the editor, and a list of options appears. You can also search for the options by typing the command names. Click the desired command or press the Enter key to select the command.

NOTE

Ensure you type / at the start of a line or after a space. The options will not appear if you type it immediately after a character. You can navigate through each command and section in slash commands using the up, down, right, and left arrow keys.

You can also easily access Eddy AI Writer right from the top of the slash menu. Additionally, the slash command options are categorized into three sections: /

Markdown syntax

The Advanced WYSIWYG editor supports a wide range of Markdown syntaxes; for a detailed list, read the article on Markdown basics.

For example, if you want to add a Heading 2, type the following syntax: ## Markdown syntax. The syntax will be rendered and Heading 2 will be added instantly.

NOTE

• The Markdown syntax will only work when you type it in manually. It will not be rendered when you copy and paste the syntax.

• To view the list of unsupported Markdown syntax, read the article on Advanced WYSIWYG editor basics.

Toolbar

To change the layout or appearance of the content, use the Advanced WYSIWYG editor’s rich formatting options.

While editing in the Advanced WYSIWYG editor, click the Format () icon on the right side of the editor panel.

NOTE

By selecting the Pin () option, you can anchor the toolbar to the right side of the editor interface.

1. Text styles

• Undo (): To reverse the last action.

• Redo (): To reapply the last undone action.

• Clear ( ): To remove all styling from selected text.

• Lettercase (): To change the letter case of the text.

2. Headings

• : To apply the H2 (Heading 2) style to the selected text.

• : To apply the H3 (Heading 3) style to the selected text.

• : To apply the H4 (Heading 4) style to the selected text.

• Paragraph (): To apply the standard paragraph style to the selected text.

3. Typography

• Font family: To select the typeface for the text.

• Font size: To adjust the size of selected text.

NOTE

• When you insert the content within Advanced WYSIWYG editor, the font type will be set to Verdana by default. To change the font settings throughout your knowledge base, navigate to Settings () > Knowledge base site > Customize site.

• From the Site font dropdown, select the desired font.

4. Palette

• Font color: To change the color of the selected text.

• Background color: To set a background color for the selected text.

5. Formatting & Lists

• Bold (): To bold the selected text.

• Italic (): To italicize the selected text.

• Underline (): To underline the selected text.

• Strikethrough (): To apply a strikethrough to the selected text.

• Inline code (): To add inline code to the text.

• Align left (): To align the text content with the left margin.

• Center (): To center your text content.

• Align right (): To align the text content with the right margin.

• Justify (): To distribute the text content evenly between the margins.

• Bullet list (): To add a list denoted with symbols for each item.

• Numbered list (): To add a list denoted with numbering for each item.

• Check list (): To add a list denoted with checkboxes that users can mark as complete or incomplete.

6. Controls

• Increase indent (): To move the content farther away from the margin.

• Decrease indent (): To move the content closer to the margin.

• Subscript (): To lower the text below the baseline.

• Superscript (): To raise the text above the baseline.

• Line height (): To choose the spacing between the lines.

• Letter space (): To change the spacing between the letters.

• Line break (): To switch to the next line.

• Page break (): To specify where to end the current page and begin the next page while exporting content as PDF.

Find and replace

To use the Find and Replace feature in the Advanced WYSIWYG editor:

1. Click the More () icon in the top-right corner.

2. Select Find and replace from the menu.

NOTE

For more information, read the article on Find and replace.

Creating FAQs templates in Advanced WYSIWYG editor

1. Navigate to the desired article in the Advanced WYSIWYG editor.

2. Use the Slash command /FAQs and select FAQs from the list.

   Three FAQ accordion templates will be inserted into your article.

3. In the inserted FAQs templates, you can perform the following options:

   1. Settings (): Click to customize the FAQ templates according to your preferences.

   2. Expand/Collapse (): Click to expand or collapse the FAQ accordions.

   3. Delete (): Click to remove the entire FAQ section.

   4. Add question (): Click between the FAQs to insert additional custom FAQs.

NOTE

• FAQs templates is different from AI FAQ generator.

• For more information, read the article AI FAQ generator.

Code view ()

• Allows you to view and edit the content in HTML code format.

• Switching to Code View enables you to add custom HTML elements, apply inline styles, or make precise adjustments.

• Use Ctrl + F to perform a persistent search in Code view:

  • Press Enter to navigate to the next occurrence of the search term.

  • Press Shift + Enter to navigate to the previous occurrence.

• In the Code view panel, the More () icon is disabled.

NOTE

• You must click the Save button to save the changes made in the code view.

• Ordered and Unordered list misses out on sequential ordering.

• Nested list types are not supported in the following scenarios:

  • When the content is copied and pasted.

  • In certain content migration scenarios.

Adding an inline comment in Advanced WYSIWYG editor

1. Navigate to your desired article in the Knowledge base portal.

2. Select the desired text to add a comment, and a floating menu will appear.

3. Click on the Comment () icon from the floating menu.

4. Use basic formatting tools such as bold and lists, and by using @ you can mention your project team members if needed.

5. Once done, click on the Send () icon.

NOTE

To turn off this mode, navigate to the Knowledge base portal, Documentation ()> Content tools > Workflow designer. Hover over the desired status and click on the Edit (✎) icon and turn off the Read only toggle.

To view all the comments in an article:

1. Navigate to the desired article.

2. Click on the Comment () icon located on the right side near the publish button.

3. The Comments panel will appear. Use the dropdown at the top to filter the options, such as All comments, mentioned comments, open comments, and resolved comments.

Here, you can reply to the comments.

NOTE

Only the user who created the inline comment can edit, resolve, or delete it.

Formatting choices for pasting from Microsoft Word

You can choose to retain or clear formatting when pasting content from Microsoft Word, including elements like lists, tables, indentations, and fonts.

1. Click Paste with formatting to retain the content’s format from Microsoft Word.

2. Click Paste as plain text to clear the content’s format from Microsoft Word.

Troubleshooting

Unable to edit article section due to unsupported HTML tags

This issue occurs when an article is converted from the WYSIWYG editor to the Advanced WYSIWYG editor, leading to unsupported HTML tags.

Steps to resolve:

1. To prevent this issue, avoid converting articles from the standard WYSIWYG editor to the Advanced WYSIWYG editor.

2. Instead, import or copy-paste content directly into the Advanced WYSIWYG editor to prevent formatting issues.

3. If the issue has already occurred, review the article’s code view and remove any unsupported HTML tags. These tags are typically wrapped within the <editor360-custom-block> tag. Removing this tag will restore editing functionality and resolve the issue.