# Rich-Text Editor “WYSIWYG”

The rich text editor or the WYSIWYG (What You See Is What You Get) allows you to format the text inside the site as needed. Admins can also upload images, add links, and much more. The table below displays the tools along with the action it provides.

<figure><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/e8AwWfvGzzvq4T4eStFb/image.png" alt=""><figcaption><p>WYSIWYG</p></figcaption></figure>

| Icon                                                                                                                                                                            | Function (From left to right)                                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>Text Functions</p><p><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/hKbsfMCSrGOCNDkrh0NE/image.png" alt="" data-size="original"></p>               | <ul><li>Undo</li><li>Redo</li></ul>                                                                                                                                     |
| <p>Media Functions</p><p><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/dnyWd39zjXcP63Ez5XY7/image.png" alt="" data-size="original"></p>              | <ul><li>Media library: to select existing image</li><li>Blockquote</li><li>Insert horizontal line</li><li>Insert table </li></ul>                                       |
| <p>Linking Functions<br><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/XM9DM0j4kBSNRJEX0kHp/image.png" alt=""></p>                                    | <ul><li>Link: to link internal / external content</li><li>Anchor link</li></ul>                                                                                         |
| <p>Special Functions<br><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/xPnLbdXyKrJfTlFn9jO6/image.png" alt=""></p>                                    | <ul><li>Code</li><li>Insert code block</li><li>Source: to view source code</li></ul>                                                                                    |
| <p>Predefined Styles & Headings</p><p><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/J6I9U22VbENh5iiewi17/image.png" alt="" data-size="original"></p> | <ul><li>List of predefined text styles (shown below)</li><li>List of headings (shown below)</li></ul>                                                                   |
| <p>Text Formatting</p><p><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/1rL4SZbswekOAAFFzrLU/image.png" alt="" data-size="original"></p>              | <ul><li>Bold</li><li>Italic</li><li>Change text color</li><li>Underline</li><li>Strikethrough</li><li>Subscript</li><li>Superscript</li><li>Remove formatting</li></ul> |
| <p>Text Formatting</p><p><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/kxbq153vOMhjRe9uESt4/image.png" alt="" data-size="original"></p>              | <ul><li>Add/Remove numbered lists</li><li>Add/Remove bullet point lists</li><li>Decrease Indent</li><li>Increase Indent</li></ul>                                       |
| <p>Text Formatting</p><p><img src="https://content.gitbook.com/content/0NVNo0YmQjrLSa4Sn1ic/blobs/exPGMIPax7BYGRm5UkkZ/image.png" alt="" data-size="original"></p>              | <ul><li>Text alignment:  left/center/right</li><li>Text direction: left to right/right to left</li></ul>                                                                |

The predefined text styles and the headings can be applied as below:

| Option                                                                                                               | Predefined style                                                                                                                                                                                                                       |
| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p>Heading styles:</p><p><mark style="background-color:red;">\[Include screenshots from your project]</mark><br></p> | <p><mark style="background-color:red;">Change this as per your project</mark></p><ul><li>Normal: the text without a heading format</li><li>Heading 2</li><li>Heading 3</li><li>Heading 4</li><li>Heading 5</li><li>Heading 6</li></ul> |
| <p>Text styles:<br><mark style="background-color:red;">\[Include screenshots from your project]</mark></p>           | <p></p><p><mark style="background-color:red;">Change this as per your project</mark></p><ul><li>Light grey border</li><li>Green border</li><li>Yellow border</li><li>Dark grey border</li></ul>                                        |
|                                                                                                                      |                                                                                                                                                                                                                                        |