Du viser støtteinnhold for versjon:

Once your page is created (either new or as part of a launch or live copy) you can edit the content to make the updates you require.

Content is added using components (appropriate to the content type) that can be dragged onto the page. These can then be edited in situ, moved or deleted. The actual mechanics of editing a page depends on the UI you are using.

Merk:

Your account needs the appropriate access rights and permissions to edit pages; for example, adding, editing or deleting components, annotating, unlocking.

If you encounter any problems we suggest you contact your system administrator.

Touch-Optimized UI

Forsiktig!

When using the touch-optimized UI links in the content are visible, but not accessible in Edit mode. Use Preview mode if you want to navigate using your links.

Merk:

If your page and/or template has been appropriately set up, then you can use responsive layouting when editing.

Page Toolbar

The page toolbar offers access to the appropriate functionality, dependent on the page configuration.

ec3
ec5

The toolbar available when editing a page holds the following options and information:

  • Toggle Side Panel
    This opens/closes the side panel, which holds the Asset and Component browsers.
  • Emulator
    Can be used to emulate the look-and-feel of the page on another device (mobile).
  • Page Information
    Provides access to information about the page and actions that can be taken on the page; including, for example, viewing and editing page information, publishing/unpublishing the page.
  • ContextHub
    Opens the context hub.
  • Page Title
    This is purely informational.
  • Select another mode
    Allows you to select another mode; for example edit, scaffolding, targeting, developer.
  • Preview
    Allows you to select preview mode; this displays the page as it will appear when published.
  • Annotate
    Allows you to add annotations to the page; for example, when reviewing a page. After the first annotation, the icon will switch to a number indicating the number of annotations on the page.

Component Placeholder

The component placeholder is an indicator to show where a component will be positioned when you drop it - above the component you are currently hovering over.

  • When adding a new component to the page (dragging from the component browser):

    ec28
  • When moving an existing component:

    ec29

Inserting a Component

Inserting a Component from the Components Browser - Touch-optimized UI

You can add a new component by using the component browser. The component placeholder shows you where the component will be positioned:

  1. Make sure that your page is in Edit mode.

  2. Drag the required component to the required position.

  3. Edit the component.

Inserting a Component from the Paragraph System

You can add a new component by using the Drag components here box of the paragraph system:

  1. Make sure that your page is in Edit mode.

  2. Either:

    • Select the Insert Component option (+) from either the toolbar of an existing component or the Drag components here box.
    • Double-click on the Drag components here box.

    The Insert New Component dialog will open to allow you to select your required component:

    ec27
  3. The selected component will be added to the bottom of the page. Edit the component as required.

Inserting a Component using the Assets Browser

You can also add a new component to the page by dragging an asset from the assets browser. This will automatically create a new component of the appropriate type (and containing the asset).

This is valid for the following asset types (some will be dependent on page/paragraph system):

Asset Type Resultant Component Type
Image Image
Document Download
Product Product
Video Flash
Content Fragment Content Fragment

Merk:

This behaviour can be configured for your installation; see Configuring a Paragraph System so that Dragging an Asset Creates a Component Instance for further details.

To create a component by dragging one of the above asset types:

  1. Make sure that your page is in Edit mode.

  2. Open the asset browser.

  3. Drag the required asset to the required position. The component placeholder shows you where the component will be positioned.

    A component, appropriate for the asset type, will be created at the required location - it will contain the selected asset.

  4. Edit the component if required.

Edit/Configure/Copy/Cut/Delete/Paste

Selecting a component will open the toolbar. This provides access to various actions that can be performed on the component (actions will be shown as appropriate).

Merk:

If you are authoring Target components you can find information here.

ec11
  • Edit (pencil)
    Dependent on the component type this will allow you to edit the content of the component. Often a toolbar will be provided.
  • Configure (spanner)
    Dependent on the component type this will allow you to edit and configure the properties of the component. Often a dialog will be opened.
  • Copy (two sheets of paper)
    This will copy the component to the clipboard ready for pasting. After the paste action the original component will still remain.
  • Cut (scissors)
    This will copy the component to the clipboard ready for pasting. After the paste action the original component will be removed.
  • Delete (trash can)
    This action will require your confirmation, before the component is deleted from the page.
  • Insert Component (plus symbol)
    Open the dialog to add a new component.
  • Paste (clipboard) (visible when you have a component in your clipboard)
    This will paste the component from the clipboard to the page. Whether the original remains, depends on whether you used copy or cut.
    With the touch-optimized UI you can paste to the same, or a different page; if you paste to a different page that was already open before the cut/copy operation you will need to refresh that page.
  • Multi-select (two boxes within a frame)
    This allows you to select multiple components at once.

Edit (Content)

There are two methods of adding and/or editing content in components:

Component Edit Dialog

You can open a component to edit the content using the Edit (pencil) icon of the component toolbar.

The exact edit options will depend on the component (and for some components all actions will only be available in full screen mode). For example:

  • Image component

    ec19

    Merk:

    Editing does not work on an empty image component.

    You must drag or upload an image (using Configure) before you can start to edit it.

  • Components such as Text & Image (constructed from more than one basic component) first ask you to confirm which set of edit options you want:

    ec20

Drag and Drop Assets into Component

For specific component types you can drag and drop assets from the asset browser directly into the component to update the content:

Asset Type Component Type
Image Image
Document Download
Product Product
Video Flash
Content Fragment Content Fragment

Edit (Content) Full Screen Mode

For all components the full screen mode can be accessed with (and exited from):

ec9

For example, the Text component:

ec10

Merk:

For some components, the full screen mode will have more options available than the basic in-place editior.

Moving a Component

To move a paragraph component:

Merk:

You can also use Cut and Paste to move a component.

  1. Select the paragraph to be moved with either tap-and-hold or click-and-hold.

  2. Drag the paragraph to the new location - AEM indicates where the paragraph can be deposited. Drop it in your desired location.

    ec12
  3. Your paragraph is moved.

Inherited Components

Inherited components can be the product of various scenarios, including:

You can cancel (then re-enable) the inheritance. Depending on the component, this can be available from:

  • Live Copy

    The component toolbar, if the component is on a page that is part of a live copy or launch (based on a live copy). For example:

    ec31

    The Cancel Inheritance option is available:

    ec32

    Or re-enable inheritance if already cancelled:

    ec34

    The Rollout action is also available:

    ec33
  • An Inherited Paragraph System

    The configuration dialog. For example, as with the Inherited Paragraph System within Geometrixx:

    ec30

Live Copy Status

The Live Copy Status page mode allows you a quick overview of the live copy status and which components are/are not inherited:

  • Green border: Inherited
  • Pink border: Inheritance has been cancelled

For example:

ec2

Adding Annotations

Annotations allow reviewers and other authors to provide feedback on your content. They are often used for review and validation purposes.

Previewing Pages

There are now two methods for previewing page:

Merk:

Links in the content are visible, but not accessible in Edit mode. Use either of the publish mechanisms if you want to navigate using your links.

Merk:

The WCM Mode cookie is set for both mechanisms.

Preview Mode

When editing content you can preview the page using the preview mode. This mode:

  • Hides various edit mechanisms to give you a quick view of how the page will appear on publish.
  • Allows you to use links to navigate.
  • Does not refresh the page content.

When authoring with the touch-optimized UI, the preview mode is available using the icon at the top right of the page editor:

ec8

View as Published

The View as Published option is available from the Page Information menu. This opens the page in a new tab, refreshes the content and shows the page exactly as it will appear in the publish environment.

Locking a Page

AEM allows you to lock a page, so that no-one else can modify the contents. This is useful when you are making a lot of edits to one specific page, or when you need to freeze a page for a short while.

Forsiktig!

Locking a page should be used with care as the only person who can unlock a page is the person who locked it (or an account with administrator privileges).

A page can be locked from either:

  • Sites console

    1. Select the page with selection mode.
    2. Select the lock icon.
  • Page Editor

    1. Select the Page Information icon to open the menu.
    2. Select the Lock Page option.

Once locked the console view information is updated and when editing a lock symbol is shown in the toolbar.

Unlocking a Page

Unlocking a page is very similar to locking the page - once the page is locked the lock options are replaced by unlock actions.

Additionally the toolbar of the page editor shows a lock symbol. This provides both a visual indication that the page is locked and quick access to the unlock action.  

Undoing and Redoing Page Edits

The following icons allow you to undo or redo an action. These are shown in the toolbar when appropriate:

ec6

Merk:

See Undoing and Redoing Page Edits - The Theory for the full details of what is possible when undoing and redoing page edits.

Classic UI

Sidekick - Classic UI

The sidekick is a key tool when authoring pages with the classic UI. It floats when authoring a page, so it is always visible.

Several tabs and icons are available, including:

  • Components
  • Page
  • Information
  • Versioning
  • Workflow
  • Modes
  • Scaffolding
  • Client Context
  • Websites
ec7

These provide access to a wide selection of functionality; including:

Inserting a Component - Classic UI

Inserting a Component - Classic UI

After you open the page, you can start to add content. You do this by adding components (also called paragraphs).

To insert a new component:

  1. There are several methods of selecting the type of paragraph you want to insert:

    • Double-click the area labeled Drag components or assets here... - the Insert New Component toolbar opens. Select a component and click OK.
    • Drag a component from the floating toolbar (called sidekick) to insert a new paragraph.
    • Right-click an existing paragraph and select New... - the Insert New Component toolbar opens. Select a component and click OK.
    ec26
  2. In both the sidekick and the Insert New Component toolbar you see a list of the available components (paragraph types). These may be split into various sections (for example, General, Columns, etc.), which can be expanded as required.

    Depending on your production environment, these choices may differ. For complete details on components, see Default Components.

  3. Insert the component that you want on the page. Then double-click the paragraph, a window opens that allows you to configure your paragraph and add content.

Inserting a Component using the Content Finder - Classic UI

This is comparable to Inserting a Component using the Assets Browser - Touch-optimized UI, just using the Content Finder instead.

Editing a Component (Content and Properties) - Classic UI

To edit an existing paragraph, do one of the following:

  • Double-click the paragraph to open it. You see the same window as when you created the paragraph with the existing content. Make your changes and click OK.
  • Right-click the paragraph and click Edit.
  • Click twice on the paragraph (a slow double-click) to enter the in-place editing mode. You will be able to directly edit the text on the page, instead of inside a dialog window. In this mode, you will be provided with a toolbar at the top of the page. Just make your changes and they will be automatically saved.

Moving a Component - Classic UI

To move a paragraph:

Merk:

You can also use Cut and Paste to move a component.

  1. Select the paragraph to be moved:

    ec25
  2. Drag the paragraph to the new location - AEM indicates where the paragraph can be moved to with a green checkmark. Drop it in your desired location.

  3. Your paragraph is moved:

    ec1

Deleting a Component - Classic UI

To delete a paragraph:

  1. Select the paragraph and right-click:

    ec21
  2. Select Delete from the menu. AEM WCM requests confirmation that you want to delete the paragraph as this action cannot be undone.

  3. Click OK.

Merk:

If you have set your User Properties to show the Global Editing Toolbar you can also perform certain actions on the paragraphs by using the Copy, Cut, Paste, Delete buttons available.

Various keyboard shortcuts are also available.

Cut/Copy/Paste a Component - Classic UI

As when Deleting a Component you can use the context menu to copy, cut and/or paste a component

Merk:

If you have set your User Properties to show the Global Editing Toolbar you can also perform certain actions on the paragraphs by using the Copy, Cut, Paste, Delete buttons available.

Various keyboard shortcuts are also available.

Inherited Components - Classic UI

Inherited components can be the product of various scenarios, including:

You can cancel (then re-enable) the inheritance. Depending on the component, this can be available from:

  1. Live Copy

    If a component is part of a livecopy or launch, it is indicated by a padlock icon. You can click on the padlock to cancel the inheritance.

    • The padlock icon is shown when the component is selected; for example:
    ec22
    • The padlock is also shown in the dialog of components; for example:
    ec23
  2. An Inherited Paragraph System

    The configuration dialog. For example, as with the Inherited Paragraph System within Geometrixx:

    ec24

Adding Annotations - Classic UI

Annotations allow other authors to provide feedback on your content. This is often used for review and validation purposes.

Previewing Pages - Classic UI

For the classic UI there are two icons in the bottom border of the sidekick:

ec4
  • The pencil icon shows you that you are currently in edit mode where you can add, modify, move or delete content.

    ec13
  • The magnifying glass icon allows you to select preview mode where the page is displayed as it will be seen in the publish environment (a page refresh is sometimes also needed):

    ec14

    In preview mode the sidekick will be reduced, click the down arrow icon to return to edit mode:

    ec15

Find & Replace - Classic UI

For larger scale edits of the same phrase a Find & Replace menu option allows you to search for, and replace multiple instances of a string, within a section of the website.

Locking a Page - Classic UI

AEM allows you to lock a page, so that no-one else can modify the contents. This is useful when you are making a lot of edits to one specific page, or when you need to freeze a page for a short while.

Forsiktig!

Locking a page should be used with care as the only person who can unlock a page is the person who locked it (or an account with administrator privileges).

To lock a page:

  1. In the Websites tab, select the page that you want to lock.

  2. Double-click the page to open it for edit.

  3. In the Page tab of sidekick, select Lock Page:

    ec16

    A message shows that your page is locked to other users. In addition, in the right pane of the Websites console, AEM WCM displays the page as locked and indicates which user has locked the page.

    ec17

Unlocking a Page - Classic UI

To unlock a page:

  1. In the Websites tab, select the page you want to unlock.

  2. Double-click the page to open it.

  3. In the Page tab of sidekick, select Unlock Page.

Undoing and Redoing Page Edits - Classic UI

Use the following keyboard shortcuts while the content frame of the page has focus:

  • Undo: Ctrl-z (Windows) or command-z (Mac)
  • Redo: Ctrl-y (Windows) or command-y (Mac)

When you undo or redo the removal, addition, or relocation of one or more paragraphs, flashing (default behavior) highlights indicate the affected paragraphs.  

Merk:

See Undoing and Redoing Page Edits - The Theory for the full details of what is possible when undoing and redoing page edits.

Undoing and Redoing Page Edits - The Theory

Merk:

Your system administrator can configure various aspects of the Undo/Redo features according to the requirements for your instance.

AEM stores a history of actions that you perform and the sequence in which you performed them. So, you undo several actions in the order that you performed them. Then, you can use redo to re-apply one or more of the actions.

If an element on the content page is selected, the undo and redo command applies to the selected item, such as a text component.

The behavior of the undo and redo commands is similar to that in other software programs. Use the commands to restore the recent state of your web page as you make decisions about content. For example, if you move a text paragraph to a different location on the page, you can use the undo command to move the paragraph back. If you then decide again to move the paragraph, use the redo command.

Merk:

You can:

  • redo actions as long as you have not made a page edit since you used undo.
  • undo a maximum of 20 edit actions (default setting).
  • also use Keyboard shortcuts for undo and redo.

You can use undo and redo for the following types of page changes in both UIs:

Both allow:

  • Adding, editing, removing, and moving paragraphs
  • In-place editing of paragraph content
  • Copying, cutting, and pasting items within a page

The following are also available in the classic UI:

  • Copying, cutting, and pasting items across pages
  • Adding, removing, and changing files and images
  • Adding, removing, and changing annotations and sketches
  • Changes to Scaffold
  • Adding and removing references
  • Changing property values in component dialog boxes.

Form fields that form components render are not meant to have values specified while authoring pages. Therefore, the undo and redo commands do not affect changes that you make to the values of those types of components. For example, you cannot undo the selecting of a value in a drop-down list.

Merk:

Special permissions are required to undo and redo changes to files and images. Also, undo history for changes to files and images lasts for at least 10 hours. Beyond this time, the undo of the changes is not guaranteed. (Your administrator can provide permissions and change the default time of 10 hours.)

Dette produktet er lisensiert i henhold til Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Innlegg på Twitter™ og Facebook dekkes ikke av Creative Commons-vilkår.

Juridiske merknader   |   Regler for personvern på nettet