The Berkeley Web Builder WYSIWYG (which stands for "What You See Is What You Get") editing toolbar is available across various content types and features, including the "Body" field of Basic pages and News and FAQ items, Text widgets on Custom pages, and more.
The WYSIWYG is an editing interface where you can format text, insert and arrange images and videos and files, create links and tables, and more, and see how the content will appear to site visitors before saving the page. See Figure 1, below, for an example of the full WYSIWYG toolbar on a Basic page.
WYSIWYG toolbar details
The full WYSIWYG editing toolbar contains the following actions and options, listed in order when read from left to right in Figure 1, above. See the full list below, as well as a corresponding annotated screenshot (Figure 2):
- bold
- italic
- unordered list
- ordered list
- blockquote
- text alignment (left, center, right)
- link
- embed image
- embed video
- embed file
- show/hide toolbars
- paragraph/heading text dropdown
- remove format
- decrease/increase indent
- undo/redo
- insert/edit anchor
- HTML source
- horizontal line
- superscript
- subscript
- insert/edit table
Limited WYSIWYG toolbar
Figures 1 and 2, above, show the full WYSIWYG toolbar with many options. There is also a "limited" WYSIWYG toolbar on certain features in Berkeley Web Builder, e.g. on the Summary field when editing/creating pages and the Caption field on Image widgets.
The limited WYSIWYG toolbar allows you to add limited formatting to these text fields, and any un-allowed tags (e.g., heading tags) added via the HTML source option will be stripped upon saving. See Figure 3, below, for an example of the Summary field with the limited WYSIWYG toolbar when editing a Custom page.
The limited WYSIWYG toolbar has a smaller number of actions and options when compared to the full toolbar:
- bold
- italic
- link
- superscript
- subscript
- remove formatting
- undo/redo
- HTML source
Use the WYSIWYG toolbar
You can use the available options in the WYSIWYG toolbar as you add your text and content to your pages by selecting and de-selecting the buttons. For most options, you add text first, then select/highlight the text and then select the desired option in the toolbar. For example, to add bold formatting to text, you would select your text and then select the "B" button (#1 in the list and Figure 2, above) to apply bold to the text; see Figure 4, below.
