A "What you see is what you get" (WYSIWYG) editor is available wherever content is created or edited. The editor is a solution to create HTML / Javascript pages quickly and effectively.

The overall approach in the wiki is that page designs should remain simple and linear so they are easy to build and maintain. As much as possible please use the editor without editing the source code of the page. 
 

Overview of the editor

Editor.png

The editor you will see anywhere text can be created or edited should look more or less like what you see in the image copied above. Let's explore the options available below. We'll first look at the top row of the image, and then at the bottom row. 

Top row: 

1  Level of text: It allows you to quickly define the different parts of your text. It is VERY important to use this instead of custom styling, as there are implications on styling and navigation. A regular paragraph or any other text element should use the "normal" level. A top level title in your document will use the "Heading 1" level, and lower levels of titles will use Heading 2, then Heading 3 (for titles in a Heading 2 sections), and so on. 
 

2  Quick formatting: quick ways to bold, indent, underline or strike-through text. 

3  Copying / removing formatting: select an section of existing text to copy its formatting (and then apply it to another section of text) or to remove all existing formating.  

4  Lists: Create bulleted lists or ordered lists. The simplest way to modify the hierarchy of lists is to use the Tab key to move items to the right side, and Shift+Tab to move items to the left. 

5  Text alignment: Align your text to the right side, the center, the right or justify your text across the width. 

6  Links: create links (to web pages, wiki pages or documents), remove links or create anchors in your document to create links within a page.

Bottom row: 

A  Upload and/or manage images on your page

B  Insert and/or manage tables

C  Include a quick horizontal rule, to create a separation on the page. 

D  Insert a predefined macros. Macros are ways you can insert or format predefined content elements, such as a table of content of styled boxes. 

E  Import a word document. This tool should be used as it cleans the formatting that is specific to Word while keeping essential formatting / layout. 

F  Smiley and icons (to be used with moderation 😁) 

G  Styles: apply quick styling to sections of your text.

H  Quick quote: This button applies style that highlights

I  Text color: set a color to the text or the background of the text. The palette has been customized to match UNICEF's brand colors. 

J  Search / Replace: Quickly find specific words and/or replace them. 

K  Undo / Redo: Equivalent to Ctrl+Z and Ctrl+Y

L  Source of the page: Switch to the source of the page. IMPORTANT: you'll need to click again on the button before saving or you will see an error message. 

M  Full page editor: You need more space to work? Click on that button! 

Tags:
Created by Abel Henry on 2020/12/26 06:04