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

Content Regions

The editable content regions on a page mirror the visual design. For example, a standard interior page sets the main page content as one editable region, and then additional sidebar content as another editable region. A more complicated page design such as a landing page or a home page may have several different, consecutive editable regions. With content divided this way, the content editing process is more intuitive for users.

Editable content is blocked out using the <ouc:div> tag. The type of editor can then be specified by nesting it inside, whether it is a WYSIWYG editor, MultiEdit, or source code.

<ouc:div label="maincontent" group="Everyone" button-text="Main Content">
<ouc:editor/>
<p>Gallena's Recreation Center offers both an outlet for those who would prefer the arena of serious competition and a relaxed atmosphere for those that just want to unwind.</p>
</ouc:div>

If an <ouc:div> exists with no nested tag, by default it is still an editable region with the WYSIWYG editor.

<ouc:editor>Link to this section

The <ouc:editor> tag sets the region as a WYSIWYG-editable region. It also specifies additional editor options, including styling and toolbar. Users can add these additional editor options by adding attributes to the <ouc:editor> tag sets. For example:

<ouc:div label="maincontent" group="Everyone" button-text="Main Content">
<ouc:editor csspath="/_resources/ou/editor/wysiwyg.css" cssmenu="/_resources/ou/editor/styles.txt" toolbar="toolbar-name"/>
<h4>Time to get moving</h4>
<p>Want to get involved at Gallena University? Join one of the many Gopher Athletic Teams or just follow your favorite ones. </p>
</ouc:div>
  • csspath="/_resources/ou/editor/wysiwyg.css" specifies the location of the CSS file that styles the WYSIWYG editor.
  • cssmenu="/_resources/ou/editor/styles.txt" specifies the text file that displays the Styles menu options.
  • toolbar="toolbar-name" specifies the custom toolbar for that editable region.

<ouc:multiedit>Link to this section

The <ouc:multiedit> tag builds form fields for page editors to input content, similar to page properties. Define the questions for content editors, including the type (text box, checkboxes, dropdown, etc.) and any instructional text or default content. The page editor then fills out the form with content, which is inserted into the page source code to be transformed along with the rest of the page content by the XSL on save.

The following is an example of a MultiEdit region, used for a faculty member's profile page:

<profile>
<ouc:div label="name" group="Everyone"><ouc:multiedit type="text" prompt="Full Name"/>Benita Hara</ouc:div>
<ouc:div label="position" group="Everyone"><ouc:multiedit type="radio" options="Professor:Professor;Assistant Professor:Assistant Professor"/>Professor</ouc:div>
<ouc:div label="email" group="Everyone"><ouc:multiedit type="text" prompt="Office Email"/>bhara@gallenauniversity.com</ouc:div>
<ouc:div label="hours" group="Everyone"><ouc:multiedit type="text" prompt="Office Hours"/>MWF 10:00am - 12:00pm</ouc:div>
<ouc:div label="bio" group="Everyone"><ouc:multiedit type="textarea" editor="yes" rows="4" prompt="Profile Bio"/>Benita Hara was born and raised in beautiful Flowergate, a small town found in the state of New Hampshire. Benita studied Chemistry at Whitebank University in Whitebank, New Jersey. Benita has enjoyed teaching for 17 years. Author of <strong>No Use Crying Over Spilled Milk: A Day's Jaunt Through Chemistry</strong>, Benita is well-versed on this subject. Benita enjoys hobbies such as golfing, bird watching, and lawn tennis. </ouc:div>
<ouc:div label="image" group="Everyone"><ouc:multiedit type="image" path="/_resources/images/faculty" lockout="no" prompt="Profile Image"/><img src="https:gallena.edu/_resources/images/faculty/bhara.jpg" alt="Benita Hara"/></ouc:div>
</profile>

Note that the image location can either be hard-coded, or if binary management is turned on, a dependency tag.

That code would then create the following MultiEdit form on a page:

A screenshot of an editable form for a page, including entering information for a faculty profile such as Name, Title, biography, and profile image