Developing portal content using the page editor

Stay organized with collections Save and categorize content based on your preferences.

This page applies to Apigee and Apigee hybrid.

View Apigee Edge documentation.

Using the page editor, you define your portal content using Markdown or HTML.

Exploring the page editor

Access the page editor by clicking the name of a page when viewing the list of pages, as described in Managing the pages in your portal.

The page editor opens:

The page editor lets you:

• Edit portal content and add Angular Material components in the left pane
• Use the quick edit toolbar to apply formats or insert markdown tags quickly
• Edit page details, such as name, path, and description, in the right pane
• Manage the visibility for a page in the right pane
• Preview the portal content
• Publish or unpublish a page (see Publish your portal content)
• Manage the page in your navigation menus (see Set up navigation)
• View the amount of time since the page was last published
• Delete a page

Editing content in the page editor

Markdown is a simple formatting language that uses plain text markup that is both easy to read and write. Its syntax is specified using punctuation characters. Markdown is converted to HTML before rendering in your browser.

The quick edit toolbar at the top of the page editor provides shortcuts for applying formats (such as bold, italic, and so on) or inserting Markdown tags (such as lists, images, links, and so on).

For a quick summary of Markdown syntax, in the quick edit toolbar:

The Markdown syntax quick reference is displayed.

To undo or redo the last edit, press Command+z or Command+Shift+z, respectively.

Markdown is recommended if you want to keep your formatting workflow simple. However, it is not intended to replace HTML. There is a wide range of formatting you can do in HTML that you cannot do in Markdown. For example, you can specify a CSS class for an element in HTML; you cannot do this in Markdown:

   <p class="class1">

You can insert HTML anywhere within the content body by simply entering the HTML tags.

For information about HTML tags, see the HTML5 specification.

Adding Angular Material components

Angular Material provides a state-of-the-art UI component library. Angular Material components enable you to quickly and easily construct consistent, responsive, and accessible user interfaces utilizing modern design principles.

Available components

The portal experience is built using Angular Material, and a limited set of Angular Material components may be used in pages, summarized in the following table.

<a mat-raised-button
   href="quickstart">
   Quick Start
</a>

<button mat-icon-button
   color="warn">
   <mat-icon aria-label="Example warning">warning</mat-icon>
</button>

<mat-card
   href="apis">
   <mat-card-header
      color="primary">
         <mat-icon>
            class
         </mat-icon>
         <h1>
            APIs
         </h1>
   </mat-card-header>
   <mat-card-content>
      <p class="home-page-card-content-text">
         Learn about and try our APIs.
      </p>
   </mat-card-content>
   <mat-card-actions>
      <button mat-button>
          View APIs
      </button>
   </mat-card-actions>
</mat-card>

<mat-icon>
   check_circle
</mat-icon>

<mat-toolbar color="primary">
   <span>My Store</span>
   <span class="space-buffer"></span>
   <mat-icon>add_shopping</mat-icon>
</mat-toolbar>

Managing the visibility for a page in your portal

Managing the visibility of a page in your portal is described in Managing the visibility of a page in your portal.

Previewing portal content

To preview the portal content:

1. Access the page editor as described in Managing the pages in your portal.

2. Preview the page.

   Cloud Console UI (Preview)

   1. Click Save.
   2. Click Preview.

   Classic UI

   1. Click Preview in the page editor toolbar.
   2. Navigate through other pages in your portal to preview the content, as desired.

Publishing portal content

Publishing and unpublishing portal content is described in Publishing your portal content.

Deleting a page

Deleting pages from the portal is described in Deleting pages from your portal.