Skip to Content
OU Campus Support Site OU Campus Support
Site Search
Search
Search
Menu

Source Code

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.

An orange arrow points to a blue button below the footer of a page that reads "Edit Source"

Toolbar and ShortcutsLink to this section

The source editor has its own toolbar, which is different from the WYSIWYG toolbars.

A toolbar labeled with the following options: Save (1), Save As (2), forward and back arrows (3), a magnifying glass (4), an arrow in a circle (5), an arrow pointing down and back (6), a link icon (7), two cycling arrows (8), Syntax dropdown (9), Theme dropdown (10), and a large and small uppercase A (11).

  1. Save: Save your changes and exit the source editor. To save without exiting the editor, use Ctrl+S (PC) or Cmd+S (Mac).
  2. Save As: Save your changes on a copy of the original file.
  3. Undo/Redo
  4. Find and Replace: Search the source code content, and/or replace what you're searching for. This field accepts regex.
  5. Go To Line: Enter a line number in the text field and the cursor is taken to that line.
  6. 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.
  7. Insert File Path: Click this to insert a path to another page into the source code.
  8. Insert Asset: Click this to insert a path to an asset into the source code.
  9. Syntax: Select the syntax formatting and highlighting based on the code type. The available languages are: None, HTML, XML, CSS, JavaScript, PHP, Python, VBScript, Perl, SQL, and C#.
  10. Theme: Select a theme that changes the colors of the text and background.
  11. 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.

Other FeaturesLink to this section

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:

  • JavaScript: JS-related methods/syntax
  • HTML: HTML nodes/attributes
  • XML (PCF, TCF, TMPL and XSL): Proprietary OU nodes/attributes such as <ouc:div> and <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 <img> or <iframe> tag is inserted. Any other information, such as description, alignment, or dimensions, must be added manually.

Related Content