By default, only level 9 and 10 users can edit source code, but access can be granted to level 1 through 8 users, and level 9s can have their access restricted. These settings are configured via user settings.
The source code of a page can be accessed via several ways:
- By clicking the Source button in the page actions toolbar.
- By hovering over a page in Content > Pages and selecting "Source" from the Edit menu.
- By checking out a page and clicking the blue "Edit Source" button at the bottom of the page.
The source editor has its own toolbar, which is different from the WYSIWYG toolbars.
- Save: Save your changes and exit the source editor. To save without exiting the editor, use Ctrl+S (PC) or Cmd+S (Mac).
- Save As: Save your changes on a copy of the original file.
- Find and Replace: Search the source code content, and/or replace what you're searching for. This field accepts regex.
- Go To Line: Enter a line number in the text field and the cursor is taken to that line.
- Line Wrap: This button enables or disables wrap-around text; if disabled, lines of code longer than the width of the window need to be scrolled horizontally to read to the end.
- Insert File Path: Click this to insert a path to another page into the source code.
- Insert Asset: Click this to insert a path to an asset into the source code.
- Theme: Select a theme that changes the colors of the text and background.
- Increase/Decrease Font Size
The following shortcuts are available for use in the source code editor:
- Ctrl (Windows)/Cmd (Mac) + S: Save-in-Place. Saves the content onto the staging server, but allows you to remain in the editor and make further changes.
- Ctrl/Cmd + A: Select All. Selects all content in the Source Editor.
- Ctrl/Cmd + D: Deletes the entire line of code on which the cursor is currently placed.
- Ctrl/Cmd + Z: Undo the last change.
- Ctrl/Cmd + Y: Redo the last undone change.
- Ctrl/Cmd + F: Brings up the Find and Replace tool for the Source Editor.
- Ctrl/Cmd + /: Comments out the currently-selected line(s) of code. This function is syntax-specific; the format of the comment depends on the language selected in the Syntax drop-down menu.
- Shift + Tab: Auto-indent. Takes all selected text and indents it according to the nesting of elements.
- Ctrl/Cmd + [: Indents all selected code by one tab less.
- Ctrl/Cmd + ]: Indents all selected code by one tab more.
- Ctrl + Q: Folds the element on the current line, hiding child elements and other content, making the code easier to read.
Source Editor provides auto-complete suggestions as you type. The suggestions provided vary depending on the option selected in the Syntax drop-down menu. The following syntax options trigger auto-complete functionality:
- HTML: HTML nodes/attributes
- XML (PCF, TCF, TMPL and XSL): Proprietary OU nodes/attributes such as
<ouc:editor>, HTML nodes/attributes, and common XSL nodes/attributes.
- CSS: CSS properties/pseudo classes
You can drag-and-drop content from the Images and Youtube Gadgets into source code as you would in the WYSIWYG editor. When you add an image or video via these gadgets, only a simple
<iframe> tag is inserted. Any other information, such as description, alignment, or dimensions, must be added manually.