> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-for-govcms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-for-govcms/content-editing/wysiwyg.md). # WYSIWYG The rich text editor is used in the **Content** field and in the body of many components. It is available to Authors and above. See the typography page on the demo site: ![The editor](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-6b41f850550e6e5dd0e18101f1d0b0f87518d141%2Fwysiwyg.png?alt=media) ![The toolbar](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-b04c4f1e75f5555df1a134c1a60143cadca7b1a3%2Fwysiwyg-toolbar.png?alt=media) Pasting from Word or Google Docs keeps headings, lists and links but drops fonts and colours. Check the result, especially headings. ## Buttons | Button | Function | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![Bold](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-4f17a5d4ab6582569befd246cb6b57f36da0393f%2Fwysiwyg-bold.png?alt=media) | **Bold**. Use for emphasis only; the site's styles handle headings and labels. | | ![Italic](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-911a7ec9e5f7351ade8877d30258125ffd45b1e5%2Fwysiwyg-italic.png?alt=media) | *Italic*. | | ![Text alignment](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-74debacf0f4c4dabf52b18b045a2a3a8d7d0be71%2Fwysiwyg-alignment.png?alt=media) | Align text left, centre, right or justified. | | ![Underline](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-f3158d7ab2ba7591e06e005cf4922f859d34b93d%2Fwysiwyg-underline.png?alt=media) | Underline. Avoid — underlined text looks like a link. | | ![Strikethrough](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-2f76ab7d57b5904e323c6eba800142f5c0768c75%2Fwysiwyg-strikethrough.png?alt=media) | Strikethrough. | | ![Remove format](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-eda88b6cd554630d0f57b68a31aefa2f7f17582d%2Fwysiwyg-remove-format.png?alt=media) | Remove formatting from the selection. Useful after pasting. | | ![Superscript](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-22aa0047a69f9917351838b59d857ed9e707bca8%2Fwysiwyg-superscript.png?alt=media) | Superscript — text above the line. | | ![Subscript](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-6efe5d09f6e16aaac0e2a252f9e025e058285adc%2Fwysiwyg-subscript.png?alt=media) | Subscript — text below the line. | | ![Heading](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-fc4960dd9da765543da521ef23c8f772f563057c%2Fwysiwyg-heading.png?alt=media) | Paragraph or heading level. Use *Heading 2* for main sections and *Heading 3* for sub-sections; the page title is already Heading 1. Headings drive the [On this page](/convivial-for-govcms/concepts-and-tools/on-this-page.md) list and are how screen reader users navigate. | | ![Styles](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-7d848f13cfc896a32bec7305037666a2a48317ef%2Fwysiwyg-styles.png?alt=media) | Cosmetic styles — introduction text, buttons, lead paragraphs — that do not change the HTML structure. | | ![Link](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-432fc3b0514f1da0e46f6f70c030eca9cbb8e73a%2Fwysiwyg-link.png?alt=media) | Link and unlink text. See below. | | ![Table](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-a22a369a1c8119865e07ea6e7c99184d844b5e36%2Fwysiwyg-table.png?alt=media) | Insert a table. See below. | | ![Bulleted list](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-c845ecb188fac1fe276da9db3ab438e895d9ef13%2Fwysiwyg-bulleted-list.png?alt=media) | Bulleted list. | | ![Numbered list](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-1c2132b749106d3e64b35e49423cc1acd7da7119%2Fwysiwyg-numbered-list.png?alt=media) | Numbered list. | | ![Decrease indent](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-0aa16ec0b9960750bf67f00667202dc4e9249471%2Fwysiwyg-outdent.png?alt=media) | Decrease indent. | | ![Increase indent](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-f99335990dcaeb61df2a9d955a12682afadf2250%2Fwysiwyg-indent.png?alt=media) | Increase indent — nests a list item under the one above. | | ![Block quote](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-7718e5b8a0339e2194b722630addda976b2dadf0%2Fwysiwyg-block-quote.png?alt=media) | Block quote. | | ![Insert image](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-da286dcbb1ff8e0922d76d1acec570fc36c50330%2Fwysiwyg-image.png?alt=media) | Insert an image from a URL. For anything reusable, use Insert Media instead. | | ![Insert media](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-1052705f8a0de9a9d6351fafe9e16969b15cafd5%2Fwysiwyg-media.png?alt=media) | Insert an image, document, video or 3D model from the media library. See [Embed media](/convivial-for-govcms/content-editing/editing-a-page.md#embed-media). | | ![Code](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-89bb1af620fb048a4aca504d7c8cb33de534cff7%2Fwysiwyg-code.png?alt=media) | Inline code. | | ![Source](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-a0e746f51eef5f34af0ab29c9b5172e0ed775aea%2Fwysiwyg-source.png?alt=media) | Edit the HTML source. Advanced use only. | ![Heading levels](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-3e905b2e1c6501de5a76332053b4d791aefa49d5%2Fwysiwyg-heading-dropdown.png?alt=media) ## Links Select the text and click **Link**. A panel opens below the selection. ![The link panel](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-f433fd7e83792360520637c0014deefbf5a4f26c%2Fwysiwyg-link-balloon.png?alt=media) * To link to a page on the site, start typing its title and pick it from the suggestions. The link follows the page if its address changes later. * To link to another site, paste the full address including `https://`. * Click an existing link to edit or remove it. Write link text that describes the destination: *read the annual report*, not *click here*. ## Tables Click **Insert table** and choose the number of rows and columns in the grid. ![Inserting a table](https://3733701002-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3fBWwpuJPUqPpT2ulMXp%2Fuploads%2Fgit-blob-64d768cbc53536389871f4d01bc3b019cf129fc8%2Fwysiwyg-table-dropdown.png?alt=media) Click inside the table to show its toolbar, which adds and removes rows and columns, merges and splits cells, and sets the header row and column. Use tables for tabular data only, never for layout, and always set a header row. For large data sets use the **Datatable** component, which adds sorting and searching.