The 'Advanced WYSIWYG editor' is lightweight and powerful, with rich text editing capabilities, and supports Markdown syntax. It provides a more visual and intuitive experience than the Markdown editor while still being more flexible than the WYSIWYG editor.

WYSIWYG editor Advanced WYSIWYG editor

You can seamlessly switch between Advanced WYSIWYG editor and WYSIWYG editor when the article is in the Draft/New article state. Document360 does not support this switching in the Publish state.

Markdown editor → Advanced WYSIWYG

The articles switched from the Markdown editor to the Advanced WYSIWYG editor cannot be returned to the Markdown editor again.


Using Advanced WYSIWYG editor

You can use Markdown syntax, block commands, and toolbars to populate the content in the Advanced WYSIWYG editor.

Block commands

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

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.

The following options are available in the block commands:

  • Heading 1: To add heading 1
  • Heading 2: To add heading 2
  • Heading 3: To add heading 3
  • Ordered list: To add a list denoted with numbering for each item
  • Bullet list: To add a list denoted with symbols for each item
  • Checklist: To add a list denoted with checkboxes that users can mark as complete or incomplete
  • Divider: To add a horizontal line
  • Code block: To add a code block
  • Callout: To add callout
  • Attachment: To add a file within the article

Markdown syntax

Type the desired Markdown syntax in the editor, and the output will be displayed. Most of the Markdown syntax is supported in the Advanced WYSIWYG editor. To find the list of supported syntax, check the Markdown basics

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

Limitation

The Markdown syntax will only work when you type in manually. It will not be rendered when you copy and paste the syntax.
To find the list of unsupported Markdown syntax, check the Advanced WYSIWYG editor basics.


Toolbar

The toolbar is categorized into two sections:

  • Format: To change the layout or appearance of the content
  • Insert: To add elements such as images, videos, tables, and more

Format

Font

  1. Font family: To change the font family
  2. Font size: To change the font size
  3. Style: To change the font style
  4. Format: To change the font format
  5. Font color: To change the font color
  6. Background color: To change the background color of the font
  7. Lettercase: To change the letter case of the text

Basic format

  1. Bold: To bold the text
  2. Italic: To italicize the text
  3. Underline: To underline the text
  4. Strikethrough: To strikethrough the text

Spacing

1.Increase indent: To move the content farther away from the margin
2. Decrease indent: To move the content closer to the margin
3. Line height: To choose the spacing between the lines
4. Line break: To switch to the next line
5. Letter space: To change the spacing between the letters

List

  1. Unordered list: To add a list denoted with symbols for each item
  2. Ordered list: To add a list denoted with numbering for each item
  3. Checklist: To add a list denoted with checkboxes that users can mark as complete or incomplete
  4. Accordion: To add a container that can be expanded or collapsed to show or hide its content

Alignment

  1. Align left: To align the text content with the left margin
  2. Center: To center your text content
  3. Align right: To align the text content with the right margin
  4. Justify: To distribute the text content evenly between the margins

Other

  1. Redo: To reapply the last action undone
  2. Undo: To reverse the last action
  3. Clear: To remove the text formatting
  4. Subscript: To lower the text below the baseline
  5. Superscript: To raise the text above the baseline
  6. Find and replace: To search for a specific text and replace it with other text

Insert

  1. Table: To insert a table
  2. Image: To insert an image
Image formatting

You can use the different tools available to format your added image. Click on the image, and the formatting tools appear as a floating menu. You can align, crop, add borders, add shadows, add captions, and more.

  1. Video: To insert a video
  2. Link: To insert a hyperlink. You can also use the "Ctrl + k" keyboard shortcut
  3. Insert file: To insert a file within the article
  4. Notes: To insert private notes
  5. LaTeX: To insert mathematical equations and symbols
  6. Code block: To insert a block of code. Click within the code block, and you can find the following options in the contextual toolbar:
    • Language dropdown - Select the desired language
    • Copy - To copy the code block
    • Delete - To delete the code block
  7. Variables: To insert a variable
  8. Snippets: To insert a snippet
  9. Glossary: To insert a glossary term
  10. Callouts: To insert a callout. An info callout will be inserted when you click this option. To customize the callout, click within the callout, and you can find the following options in the contextual toolbar:
    • Callout info
    • Callout warning
    • Callout error
    • Callout success
    • Callout background color - To change the background color of the callout
    • Callout border color - To change the border color of the callout
    • Delete - To delete the callout
  11. Divider: To insert a horizontal line
  12. Code view: To view the content in HTML code view.
Current limitations
  • You must click the Save button to save the changes made in the code view. Ctrl/Cmd +S will not work in 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 copy-pasted
    • In certain content migration scenarios