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.

Using Advanced WYSIWYG editor

Assigning an article name

When you create an article, you provide a name for it. In the Advanced WYSIWYG editor, the article title appears at the top of the article content area. Click the title to edit it. You will see the following options:

Suggest Title:

1. Eddy AI suggests three title options for your article. Choose the desired title, and edit if needed.

2. Click Generate more suggestions to see additional title options.

3. Use the like () and dislike () buttons to provide feedback on Eddy AI’s suggestions.

URL & Description:

1. URL: Edit the article’s URL in this field. By default, Document360 creates the URL (also known as a slug) based on the article title at the time of creation. For example, if the article title is "What is Document360?", the URL becomes what-is-document360.

   NOTE

   For more information, read the article on Change the URL of an article.

2. Description: Enter a short description of the article.

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 a template, and Import docs

When the article in the 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:

NOTE

Tables

When selecting /table from the slash menu, a sub-menu appears with a grid-style palette:

• The default selection is a 3 × 3 table.

• You can insert up to a 10 × 10 table using the palette.

• Use the keyboard keys or mouse to modify the selection.

• After table creation, you can add more rows and columns using the + icon. For more information, read the Tables in Advanced WYSIWYG editor.

Dividers

When selecting /divider from the slash menu, a sub-menu appears showing three divider styles:

• Solid (default)

• Dotted

• Dashed

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.

• Format painter ():  To copy and apply formatting from one part of the text to another.

• 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 () in the left navigation bar.

• In the left navigation pane, navigate to 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 a PDF.

PRO TIP

To change the level of your bulleted or numbered list, you can either use the Increase indent () or Decrease indent () controls from the toolbar. Alternatively, use the keyboard shortcuts Tab to increase indent or Shift+Tab to decrease indent.

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 FAQ templates in the 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.

   Document360 adds three FAQ accordion templates to 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 are 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 the 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 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 the Send () icon.

NOTE

To turn off this mode, navigate to the Knowledge base portal, Documentation () in the left navigation bar.

In the left navigation pane, navigate to Content tools > Workflow designer. Hover over the desired status and click 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 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

For information, read the article on Reviewing an article using Inline comments

Using numbered lists in the Advanced WYSIWYG editor

To create a numbered list, use one of the following methods:

1. Type 1., a., or i. followed by space.

2. Use the slash command /numbered list.

3. Select the desired content and press Ctrl + Shift + O.

Continuing numbered list after a break:

After inserting an image, page break, or other element within a numbered list, a spark () icon appears next to the list item that follows.

Select the spark () icon to choose from the following options:

• Continue numbering: Continues the list from the previous number. Existing indentation is preserved.

• Restart numbering: Starts the list from 1 and resets the indentation.

• Set numbering value: Manually enter a starting number or use the ↑ or ↓ arrows to set a value. This retains only the first-level indentation.

NOTE

The spark () icon appears only for the first new numbered list item after a break or block element.

Adjusting indentation in numbered lists

• To increase the indentation, press Tab. If you are in a numbered list, the numbering format will change accordingly. For example:

  1. Numbers

     1. Letters

        1. Roman numerals

• To decrease the indentation, press Shift + Tab.
  This reduces the indent for the current item. If a higher-level indentation exists, the structure adjusts for the entire list.

Drag and drop: Adjusting numbering order

When you drag a block into a different position within a numbered list, the numbering can be updated to reflect the new order.

Example:

• Block A is the first block.

• Block B continues numbering from Block A.

• Block C is unrelated and has no numbering.

If you drag Block C between A and B, and then choose Continue numbering for Block C, the list updates as: A, C, B

This ensures the numbering reflects the visual flow of content.

Format painter in the Advanced WYSIWYG editor

The Format painter in Document360 helps you quickly copy and apply text formatting from one section to another, saving time and ensuring consistency across your content.

You can access the Format painter from the following locations in the Advanced WYSIWYG editor:

• Format menu

• Bubble menu that appears when you select text

Using the format painter

To use the format painter:

1. In the Advanced WYSIWYG editor, select the source text whose formatting you want to copy.

2. Click the Format painter () icon from the format or bubble menu.

3. The cursor will change to a paintbrush icon, indicating that the Format painter is active.

4. Apply the copied formatting by:

   • Clicking on a word or letter in the target text (applies to the whole word only).

   • Dragging the mouse to highlight a selection.

   • Selecting an entire block of text.

Once the formatting is applied or the Format painter is cancelled, the cursor will return to normal.

Formatting that will be copied

Only text-level formatting will be copied. This includes:

• Font type, size, and color

• Bold, Italic, Underline, Strikethrough

• Letter spacing

• Background color (highlight)

NOTE

• For headings, the heading tag will also be copied, but only if the entire block is selected.

• The copied style is based on the first character of the selected source text.

Cancelling the format painter

The format painter will be deactivated if you:

• Click anywhere outside the editor.

• Press Esc.

• Perform any other action in the editor or Categories & Articles pane.

• Click the active format painter icon in the format menu.

NOTE

• Press Ctrl + Z or click the Undo () icon in the Format menu to undo the applied formatting.

• Press Alt + Shift + V or click the Clear () icon in the Format menu to clear formatting from the selected text.

Keyboard shortcuts for format painter

The keyboard shortcuts for using format painter are:

Formatting choices for pasting from Microsoft Word

When pasting content from Microsoft Word, you can retain or clear formatting, 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 the 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.