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

Only level 9 and 10 users can edit source code, by default. Level 10 users can grant access to level 1 through 8 users and restrict access to level 9s via user settings.

There are three ways to edit the source code of a page from Content > Pages, as follows:

  • Click to open your page, click Source in the page actions toolbar.
  • Check out your page, click More ActionsMore Actions Menu, click Edit > Properties. 
  • Click to open your page, scroll to the page footer, click Edit Source.

A screenshot showing 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, different from the What You See Is What You Get (WYSIWYG) toolbar.

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 a copy.
  3. Undo/Redo
  4. Find/Replace: Search the source code content, and/or replace what you're searching for. This field accepts regular expression (regex).
  5. Go To Line: Enter a line number in the text field, click Go, and the cursor is taken to that line.
  6. Line Wrap: Enable or disable text wrapping.
  7. Insert File Path: Insert a path to another page.
  8. Insert Asset: Insert a path to an asset.
  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

Use the following shortcuts in the source code editor:

  • Ctrl (Windows)/Cmd (Mac) + S: Save the text onto the staging server but remain in the editor and make further changes.
  • Ctrl/Cmd + A: Select all text in the editor.
  • Ctrl/Cmd + D: Delete the entire line of text 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: Bring up the Find and Replace tool.
  • Ctrl/Cmd + /: Comment out the currently-selected line(s) of text. This function is syntax-specific; the format of the comment depends on the language selected in the "Syntax" dropdown menu.
  • Shift + Tab: Auto-indent all selected text according to the nesting of elements.
  • Ctrl/Cmd + [: Indent all selected text by one tab less.
  • Ctrl/Cmd + ]: Indent all selected text by one tab more.
  • Ctrl + Q: Fold the element on the current line, hiding child elements and other content, making the code easier to read.

Other FeaturesLink to this section

The source editor provides auto-complete suggestions as you type, depending on the syntax you select:

  • 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 from the Images and Youtube Gadgets into source code as you would in the WYSIWYG editor. Adding an image or video via these gadgets inserts a simple <img> or <iframe> tag. Then you manually add description, alignment, or dimensions.

Related Content
Related Content