Using Source Editor

Level 9 or Level 10 administrators have the ability to edit in source code view. The Source Editor defaults to syntax highlighting for HTML/CSS/JavaScript. There are a variety of other code types that can also be selected. When editing with the Source Editor, code complete automatically completes the closing tag of an HTML or XML element. Selecting No Syntax Highlighting from the syntax drop-down disables the feature as well as code complete.

Additionally, privileges can be granted or restricted at other user levels:

  • A Level 9 assistant administrator can be restricted from Source Editor access
  • Users Level 1 through Level 8 can be allowed access to the Source Editor

Both of these settings can be configured by a level 10 admin via the User Restrictions section of Users settings.


Next Page


Accessing the Source Editor

To access the Source Code editor to edit source code, choose one of the following:

  • From the Content > Pages view, check out the page and then click the Edit Source icon.
    Source Editor Icon
  • Click the linked file name for the page, and then click on the Source button.
    Source Button
  • Check out the page or click the Edit button, and then click on the Edit Full Page (HTML Code Only) button at the bottom of the page.
    Edit Full Page Source

This source editor is different from the HTML Source Editor available through the WYSIWYG Editor that allows the user to view and edit the source of only the editable region that is currently open.

Source Code Editor (with Dark Theme Highlighting)

Source Editor


Previous PageNext Page


Setting User Configurations

Level 10 administrator privileges are required.

To restrict a level 9 assistant administrator from Source Editor access:

1. Navigate to Setup > Users.

2. Under User Restrictions, select the No Full HTML checkbox and Submit the changes.

User Restrictions Level 9

To enable users Level 1 through Level 8 access to the Source Editor:

1. Navigate to Setup > Users.

2. Under User Restrictions, select the Allow Source checkbox and Submit the changes.

Allow Level 8 Source Editor Access


Previous PageNext Page


Using the Source Editor Toolbar

The Source Editor contains a modified toolbar, which has different functions than those within the WYSIWYG Editor.
Source Editor Tools

The tools available are:

Save as: This allows the user to change the name, path, and extension of the file in order to save a copy. This is an alternative way to create a new file in the OU Campus system.

Source Editor Save As

Source Editor Search Icon  Search: Allows the user to search for text or coding within the source code. This feature also contains the ability to replace with different text or code. Searches with regular expression syntax are allowed. For more information about regex:

Regular Expressions Reference

Source Editor Search Replace Dialog

Source Editor Go To Line Icon  Go To Line: Allows the user to navigate to a particular line within the code. Keep in mind that the line numbering will change with line wrap on.

Source Editor Undo & Redo Icons Undo and Redo: Allows the user to undo or redo changes that were just made.

 Syntax: Allows the user to select the code syntax based on code type.

Source Editor Syntax Dropdown


Source Editor Syntax Toggle Syntax Highlight: Two syntax highlighting themes are available: either default or backboard style may be chosen.

Line Wrap Toggle Line Wrap: Allows the user to toggle between line wrap being on and off. The line numbering changes based on this setting. The line wrap feature can be extremely useful when working with larger source documents that require horizontal scrolling.

File Path Icon  File Path: Allows a user to select a path to be inserted into a command. If Dependency Manager is enabled, Dependency tag linking is supported. File paths can also be chosen from any configured servers (e.g., staging, production, auxiliary sites, and alternative publish targets.)

Asset Icon Asset: Allows the user to select and insert an Asset.

Inserting an Asset with Source Code Editor

  1. From the toolbar, click the Asset icon.
  2. From the Asset Browser, click on the asset to be inserted.
  3. The content of the asset is shown in the preview window.
  4. Click the Select Asset button.
  5. The asset tag is inserted and shown in the source view.

Performing a Save-in-Place

Like the WYSIWYG editor, the Source Editor includes a save-in-place feature. This allows content to be saved without exiting the editor.

To perform a save-in-place, use the keyboard shortcut CTRL+S (CMD+S for Macintosh). This saves any changes made in the editor to the staging server while allowing the user to continue working. After initiating this type of save, there is a very brief spinning indicator. Once the spinning indicator disappears, the user may resume editing the contents of the page.


Previous PageNext Page


Syntax Highlighting, Linking & Broken Links

The Source Editor in OU Campus automatically determines the correct type of document based upon the file extension. However, the need may arise to override the automatic behavior and display a document in a different style. When a user selects a different code syntax, the displayed highlighting is specific for that code base.

Here is a list of code syntax types available in the drop-down menu:

  1. --No syntax highlight--  (.txt) The first option, when selected, displays the the code without syntax highlight and without code complete.
  2. HTML CSS JavaScript (.html, .tmpl, .jsp)
  3. XML (.xml, .pcf, .tcf, .xsl, .rss, .xslt, .xsd, .dtd)
  4. CSS (.css)
  5. JavaScript (.js)
  6. PHP (.php, .php3)
  7. Python (.py)
  8. VBScript (.vbs)
  9. Perl (.pl, .cgi)
  10. MySQL (.sql)
  11. C# (.cs)

Linking to Files and Directories

After Dependency Manager has been activated and the scan run, Dependency Manager can track links added via the Source Editor. Links are inserted by clicking the File Path icon and navigating to a file or directory and clicking it. File paths can also be chosen from any configured servers (e.g., staging, production, auxiliary sites, and alternative publish targets). However, when the link is inserted, it will appear with a Dependency tag, which will start with a "d" or an "f". These are similar in appearance to Asset tags.

Note: Dependency Manager only pertains to pages maintained within OU Campus.

Tags will appear as follows:

  • {{d:####}} Directory tag
  • {{f:####}} File/Page tag
  • {{a:####}} Asset tag

Linking to a File or Directory

  1. From the toolbar, click the File Path icon.
    Source Editor Tools
  2. Use the File Browser to find the appropriate page or directory to which the link should be pointed. Note that one may also choose between sites and servers.
    File Browser
  3. Click the file or directory. The Dependency Manager tag is inserted in the editor window.

    This process will not insert the code. For example, for HTML links an a href element would be required:

    <a href="http://{{f:1520}}">Soccer Team Home Page</a>

Once inserted the Dependency tag appears as a tag in the source, regardless of how the source is viewed (either through the WYSIWYG Editor or the Source Editor).

Source Editor Dependency Manager Tag


Identifying Broken Links in Source Editor

Dependency Manager functionality also includes tracking and reporting broken links within the Source Editor. If a Dependency tag is identified as broken, it is reported above the window and in-context. The above the window text includes the identifying string: "Broken links" and the offending Dependency tag. The in-context reporting consists of red highlighting regardless of the the currently employed theme.

Example of Broken Link


Previous Page


Was this page helpful?

Additional Comments:

(Include your email address if you would like a reply)

Procede to