By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy

 
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