WYSIWYG editor
  • 18 Nov 2022
  • 8 Minutes à lire
  • Contributeurs
  • Sombre
    Lumière
  • PDF

WYSIWYG editor

  • Sombre
    Lumière
  • PDF

There is no French content available for this article, You are viewing the fallback version (English).

WYSIWYG (What You See Is What You Get) is also known as HTML editor. It is one of the two editor options available in Document360. This editor allows you to view content precisely as it will appear on a published Article/category page on the Knowledge base.

Unlike the Markdown editor, the WYSIWYG editor makes use of a single editing pane since the content being written is already in preview mode.

9_Screenshot_WYSIWYG editor pane1

You cannot switch to the Markdown editor from the WYSIWYG editor. The articles switched from Markdown editor to WYSIWYG editor cannot be returned to Markdown editor again.
But you can switch to WYSIWYG editor from Markdown editor.
Know more →


WYSIWYG toolbar

The WYSIWYG toolbar is similar to toolbars found in other word processing applications, such as Word or Google Docs.

There are five categories of options in the toolbar.

1_Screenshot_WYSIWYG_toolbar3

1. Heading options

10_Screenshot_Headings1

The below heading options are available:

  • Normal
  • Heading 2
  • Heading 3
  • Heading 4

11_Screenshot_Headings List1

2. Text formatting

The below text styling options are available:

  • Bold: To Bold the text
  • Italic: To Italicize the text
  • Underline: To Underline the text
  • Strikethrough: To Strikethrough the text

12_Screenshot_Formatting options1

  • More text: To update Font size, Font family, Text color, Background color, Subscript, Superscript, and Clear formatting

3. Paragraph formatting

The below paragraph formatting options are available:

  • Unordered list: Make a list denoted with the following symbols - •, ○, ◘. Disc and Default symbols are the same

2_Screenshot_Unordered List1

  • Ordered list: Make a list denoted with numbering for each item. You can use numbers, alphabets, Roman numerals, and Greek numerals. Default refers to numbers

3_Screenshot_Unordered List1

  • More paragraph: To update alignment, line height of paragraphs, indentations, and quote text

4. Insert options

The below insert options are available:

  • Insert link: Add a hyperlink from a provided URL or a Knowledge base article to the selected text

For example, you can add an article reference to understand the content better. Read more →


  • Insert codeblock: To add a Code block to your article

For example, you want to add a JavaScript snippet example in an article. Read more →


  • Insert image: To insert an image from the URL, local storage, or Drive

For example, you can add a screenshot of the user interface to understand the product better. Read more →


  • Insert file: To insert a File from the Drive

For example, you can add a word or PDF file to understand the product better. Read more →


  • Insert callouts: To insert an editable blue info box, yellow warning box, and red error box

For example, you can add additional information in the blue info box, important information in the yellow warning box, and essential information in the red error box.


  • Private notes: To insert an editable purple internal comment box that will only be visible to logged-in team members

For example, you can add internal feedback to the respective team members. Read more →


  • Insert LaTeX: To add expressions and equations
    • Click the Insert LaTeX option and a Insert latex expression window appears
      Inserting_latex_syntax

    • Type in your desired LaTeX syntax and click Insert

    • Click here to view the basic latex commands used in latex syntax

How to edit the latex syntax of an expression/equation?

Editing_latex_syntax

- Click on the desired expression/equation, and you can find the Edit (Pencil) icon
- Click the Edit (Pencil) icon, and an Insert latex expression window appears
- Make the required changes in the syntax and click Update
- The expression/equation is updated as per the latest change

How to delete the LaTeX syntax of an expression/equation?

Removing_latex_syntax

- Click on the desired expression/equation, and you can find a Remove (Trashbin) icon
- Click the Remove (Trashbin) icon to delete it


  • Find & Replace: To search a text within your article and replace it with another text. You can also use this to find the occurrences of the text content in the article. This is particularly handy in long articles

  • Content reuse: To reuse the content across the project. Two content reuse options are available:
    a. Variable: You can add only text content Read more →
    b. Snippet: You can add text, image, table, code blocks, etc., Read more →

  • Insert video: To embed a video from YouTube, Wistia, Streams, or Vimeo. You can embed a video for a better understanding of the product or service

  • More rich: To add table, horizontal line, or emoticons in the article
    • Insert table: To add a table to the article. Click More richInsert table. Select the desired rows and columns

    • Insert horizontal line: To insert a line in the article. Click More richInsert horizontal line

    • Emoticons: To insert emoticons. Click More richEmoticons. Select the desired emoticon


5. Other options

Below are the other options available:

  • Code view: To switch to HTML syntax editor.
  • Undo: To undo the previous action
  • Redo: To repeat the previous action
  • View preview: To view the preview of the article in the Knowledge base site

Additional formatting options

Image

Once an image is added to an article, you can access the below options by clicking on the image:

4_Screenshot_Additional Formatting for Image3

a. Replace: To replace the image
b. Align: Add an image caption to align the image
c. Image caption. This will appear at the bottom of the image
d. Remove: To remove the image
e. Insert link: To add a link to the image. After adding the link, you can open, remove, and edit the link
f. Display: To change the display of the image. You can use Inline or Break Text options
g. Style: To change the border style of the image. You can use Rounded, Bordered, and Shadow options
h. Alternative text: To add alternative text for the image. If the image file cannot be loaded, the alternative text will appear in a blank box where the image will appear


Video

Once a video is embedded into an article, you can access the below options by clicking on the left or right of the video in the editor pane:

5_Screenshot_Additional Formatting for Video2

a. Replace: To replace the video
b. Remove: To remove the video
c. Display: To change the display of the video. You can use Inline or Break Text options
d. Align: To align the video
e. Change size: To change the size of the video
f. Autoplay: To enable or disable the autoplay option


PDF

Once a PDF file is added to an article, you can access the below options by clicking on the left or right side near the PDF file in the editor pane:

6_Screenshot_Additional Formatting for PDF11

a. Remove: To remove the PDF file
b. Change size: To change the size of the PDF file


Word file

Once a Word file is added to an article, you can access the below options by clicking on the Word file:

7_Screenshot_Additional Formatting for word2

a. Open link: To download the word file to the local system drive
b. Remove: To remove the word file


Table

Once a table is added to an article, you can access the below options by clicking on the table:

8_Screenshot_Additional Formatting for table2

a. Table header: To enable or disable the table header. Click on this button, and the top row appears on the table
b. Remove table: To remove the table. Click on this button, and the table and the content will be deleted. If you have accidentally clicked on the remove, you can always use the Undo action (Ctrl + Z) to restore the table
c. Row: Place the cursor in any cell of the intended row and click on 'Insert row above' or 'Insert row below' to add rows to the table. Click on the 'Delete row' to remove the current row
d. Column: Place the cursor in any cell of the intended column and click on 'Insert column above' or 'Insert column below' to add columns to the table. Click on the 'Delete column' to remove the current column
e. Table style: To change the table style. You can use Dashed Borders and Alternate Rowsoptions. The alternate rows option would distinguish the row color
f. Cell: Click on this button and select the action to merge or split cells. You can split a cell vertically or horizontally any number of times. The merge option would be enabled only when you select more than one cell horizontally or vertically
g. Cell background: To change the cell's background color. You can select from the color palette available or enter the HEX code
h. Vertical align: To change the vertical alignment of the content in the cell. You can do this for a single cell or multiple selections of cells. If the cell height is bigger than the content fit, then you can choose to align the content at the top, middle, or bottom of the cell
i. Horizontal align: To change the horizontal alignment of the content in the cell. You can do this for a single cell or multiple selections of cells. If the cell width is bigger than the content fit, you can choose to align the content at the left, center, right or justified style
j. Cell style: To change the type of the cell border. You can use the options Highlighted (changes the cell border color), and Thick(increases the cell border thickness) of the selected cell


WYSIWYG (HTML) editor - When, where, and why?

  • For customers who are comfortable with HTML editors
  • Using the WYSIWYG editor will feel similar to using a word processing application
    (For example, Microsoft Word, Google Docs, etc.).
    You can also copy and paste content directly from a Word document or any other source
  • No special syntax required

Cet article vous a-t-il été utile ?