The Snippets Gadget is a sidebar gadget that allows users to add previously created snippets into
an editable region from the Gadgets sidebar when using the WYSIWYG Editor and Source Editor. This gadget is useful in that it helps streamline the workflow process when adding
snippets to a page, providing drag and drop functionality to the OU Campus system.
It is important to remember that the Snippets Gadget does not appear in the Gadgets sidebar until an editable region has been opened in the WYSIWYG Editor or when using the Source Editor.
With the Snippets Gadget, users can:
- Filter the list of snippets by snippet category. All snippets are shown by default
once the Snippets Gadget is expanded. Choose a category from the drop-down to view all the snippets
assigned to that particular snippet category.
- Preview a snippet by clicking on the snippet name.
- Insert a snippet into the editable region or Source Editor from its preview.
- Insert a snippet onto a page by double-clicking it.
- Drag a snippet onto the editing area to insert it on a page.
Once a snippet is inserted on a page, it can be edited without modifying the original
When previewing the snippet, the following functionality is available:
- View Rendered - The default view previews the snippet as rendered based on how it will appear when
inserted on the page.
- View Source Code - Shows the underlying markup or text, if it is not then its has been restricted by
- Insert - Click the Insert button to insert the snippet on the page.
Inserting a Snippet Using the Snippets Gadget
- Edit the page with the WYSIWYG Editor.
- If the Gadgets sidebar is not visible, click the Show Gadgets icon to show the sidebar.
- Expand the Snippets Gadget.
- Select either Buttons or UI Elements from the categories drop-down. If the snippets are not categorized, then all snippets
are displayed in the list.
- Select the snippet you want to use. If necessary, you can preview the snippet by clicking
- Add the snippet to the page using one of the following methods:
- Double-click the snippet name
- Drag the snippet onto the page
- Click to preview the snippet and then click Insert.
- The snippet becomes part of the page and can be edited without affecting the original