Adobe InContext Editing Web Developer Guide

Adobe InContext Editing is an online hosted service that lets users make simple content changes within a web browser. To change a web page, users simply browse to the page, log in to the InContext Editing service, and edit the page. The editing options are simple and elegant, and using them requires no previous knowledge of HTML code or web editing.

Before you enable users to make live changes on the web, however, you normally use Dreamweaver to make your HTML pages editable. You do this by specifying regions on the page that you want to allow users to edit. For more information, see the Adobe Dreamweaver InContext Editing documentation.

Note: InContext Editing does allow you to create editable regions without the use of Dreamweaver. However, the functionality of editable regions created in this manner is limited. For more information, see Create editable regions in a browser.

This InContext Editing Web Developer Guide provides instructions for navigating and using the InContext Editing Administration Panel. The InContext Editing Administration Panel is where you can add and delete websites to and from the InContext Editing service, view the websites that you've added, manage website users, and make websites active or inactive.

In addition to this documentation, Adobe also provides a number of other resources to help you work with InContext Editing:

Note: Adobe InContext Editing does not function correctly under certain conditions. For a list of specific network, browser, page, and editing limitations, see www.adobe.com/go/incontextediting_limitations.

Note: Adobe AIR does not support Adobe InContext Editing. If you use the AIR Extension for Dreamweaver to export an application that contains InContext Editing regions, the InContext Editing functionality will not work.

About InContext Editing roles

InContext Editing supports three user roles: web developer, publisher, and editor. Anyone registered with the InContext Editing service can sign in to the InContext Editing Administration Panel, but your ability to perform certain operations in the Administration Panel depends on your specific user role.

The following table shows some common tasks, and who can perform them in InContext Editing.

Task Web Developer Publisher Editor
View websites for which you are registered Yes Yes Yes
Add a new website Yes Yes Yes
Change configuration of an existing website Yes No No
Assign user roles Yes Yes No
Invite users Yes Yes No
Disinvite users Yes Yes No
Delete users Yes Yes No
Edit website pages Yes Yes Yes
Publish website pages Yes Yes No
Make website active/inactive Yes No No

You perform most of the above tasks in the InContext Editing Administration Panel. Some of the tasks, however, like editing and publishing, are performed in the editable browser window for a particular page.

Sign in to the InContext Editing Administration Panel

  1. Browse to http://incontextediting.adobe.com.
  2. Enter your Adobe ID (email address) and password, and click Sign In.

View InContext Editing websites

You can view websites that you've registered with the InContext Editing service. The Manage Sites page displays the name of the website, the website's activation status, the website's URL, the date the website was added to the service, and your role as it relates to that website (web developer, publisher, or editor). All users can view the InContext Editing websites for which they've registered, however, only web developers and publishers can manage the site's users, and only web developers can manage the site's settings.

  1. Sign in to the InContext Editing Administration Panel.
  2. On the Administration Panel home page, click the Manage Sites button in the Actions panel. The Manage Sites page opens, listing all of the websites for which you are registered.
  3. If you want to open a website and edit its content, click the website's URL.

Add and configure a website

You add websites to the InContext Editing service through the InContext Editing Administration Panel. When you configure the site, you provide all of the necessary FTP information InContext Editing needs to connect to your site and make the pages editable.

The user who configures the FTP settings for a newly-added website automatically becomes the web developer for that site. (There is only one web developer per site.) The web developer can invite other users to edit the site, and set users' roles (as publishers and editors).

Note: If you want to change the web developer for an already-configured website (for example, if you want to transfer ownership of the site to the site owner after development), the person who is to become the new web developer must log into the InContext Editing Administration panel and add the website again. When you add a new website to the service, you become the web developer for that site, and the previous web developer is deleted from the account.

  1. Sign in to the InContext Editing Administration Panel.
  2. On the Administration Panel home page, click Add Site in the Actions panel.
  3. Note: The Manage Sites page of the Administration Panel also includes an Add Site button that opens the Add Site wizard.

  4. In the Add Site wizard, complete the following options:
  5. Site Name and URL screen

    Site Name The name of your website as it appears in the InContext Editing Administration Panel.

    Site Address (URL) The URL of your site root. For example, http://www.mysite.com/.

    FTP Settings screen

    Connection Method The connection method that you want InContext Editing to use when connecting to the web server. You can select either FTP or SFTP (Secure FTP).

    Use Passive FTP Select this option if you want to use passive FTP when connecting. For more information on passive FTP, see the Adobe website.

    FTP HostThe hostname of your FTP server. Your FTP host is the full Internet name of a computer system, such as ftp.mysite.com. Enter the full host name without any additional text. In particular, don’t add a protocol name in front of the host name.

    If you do not know your FTP host, contact the web company that hosts the website.

    Note: Port 21 is the default port for receiving FTP connections, however server administrators sometimes change the port setting to another port to prevent unauthorized FTP access. In those situations, you can append a colon and the port number to the FTP host entry. For example, if the port is 29, you would enter ftp.mysite.com:29.

    Username Your FTP username.

    Password Your FTP password.

    You can click the Test Connection button to make sure your settings are correct before proceeding.

    Assets screen

    Host Directory The host directory (folder) on the FTP server where you store your web pages. If you're adding a site that you built with Dreamweaver, the host directory in the Add Site wizard should be the same host directory that you specified in the Dreamweaver Site Settings dialog box. For more information, see the Dreamweaver documentation.

    Tip: Click the Browse button to browse to the folder you want to use.

    Media Directory The folder where you want to store site assets, such as images and other documents. You should define this directory relative to the host directory.

    Tip: Click the Browse button to browse to the folder you want to use.

    Default Page(s) The default page that displays when the user requests a directory (for example, index.html, or index.cfm). InContext Editing pre-populates the field with a list of default pages.

    Note: If your site does not yet contain any InContext Editing include files (for example, if you did not create editable pages using Dreamweaver and upload the required include files to the server), InContext Editing gives you a message stating that the files required for making your site's content editable have been saved in a folder called "includes/ice", and copied to your site's host directory.

  6. Click Close to close the wizard. You can also begin editing the site right away or inviting users by clicking the appropriate buttons.

Once you've completed the site configuration, the website appears on the Manage Sites page of the InContext Editing Administration Panel.

Note: If you've reached the maximum number of active sites (i.e. 100), InContext Editing adds the site but makes it inactive. To activate the site, you must de-activate another site first. For more information, see Set activation status for a website.

Change website configuration

Once you've registered a website with the InContext Editing service, you can edit the configuration settings at any time.

Note: Only web developers can edit website configuration settings.

  1. Sign in to the InContext Editing Administration Panel.
  2. On the Administration Panel home page, click the Manage Sites button in the Actions panel.
  3. On the Manage Sites page, locate the website whose configuration you want to change, and then click its Manage Users and Settings button (in the right-most column). When you do so, the Manage Users page for that website opens.
  4. Note: The Manage Users and Settings button does not appear unless you are a web developer for that website.

  5. On the Manage Users page, click the Configure Site tab.
  6. Reconfirm your password and make changes to the website configuration. (See the previous section for a description of all options.) Then click Test Connection to test the connection with the new settings or click Save to save your changes.
  7. Note: You can click Revert to Saved to discard any changes that you've made. InContext Editing will re-save the configuration as it was before you made changes.

Set activation status for a website

At any given time, you can have up to 100 sites active with the InContext Editing service. The number of sites you add to the service, however, is unlimited. For example, you might add 150 sites to the service and manage them through the Administration panel, but only the 100 sites that you set as active would be editable by publishers and editors.

When you de-activate a website, all user information is retained. Users do not need to re-register or be re-assigned roles when you activate a website again.

Note: Only web developers can set the activation status for a website.

  1. Sign in to the InContext Editing Administration Panel.
  2. On the Administration Panel home page, click the Manage Sites button in the Actions panel.
  3. On the Manage Sites page, locate the website whose activation status you want to set, and then select Active or Inactive from the pop-up menu in the Activation Status column.

Remove a website

You can remove a website from the InContext Editing service if you are both a web developer for the website and the website's only registered user. If you have other users associated with the site, or still have invitations pending, you must delete or disinvite those users before you can remove the site.

  1. Sign in to the InContext Editing Administration Panel.
  2. Note: You must use an InContext Editing web developer user account for a given website in order to have the ability to remove the website.

  3. On the Administration Panel home page, click the Manage Sites button in the Actions panel
  4. On the Manage Sites page, locate the website that you want to remove, and then click its Manage Users and Settings button (in the right-most column). When you do so, the Manage Users page for that website opens.
  5. The Remove Site button is enabled if you are the only registered user for the website. Click the Remove Website button to remove the website from the InContext Editing service.

Manage website users

The Manage Users page of the InContext Editing Administration Panel lets you perform a number of user-management tasks.

To open the Manage Users page:

  1. Sign in to the InContext Editing Administration Panel.
  2. Note: You must use an InContext Editing web developer or publisher user account for a given website in order to gain access to that site's Manage Users page.

  3. On the Administration Panel home page, click the Manage Sites button in the Actions panel. (There's also a link to the Manage Sites page at the top of the Administration Panel home page.)
  4. On the Manage Sites page, locate the website whose users you want to manage, and then click its Manage Users and Settings button (in the right-most column). When you do so, the Manage Users page for that website opens.

Once you are on the Manage Users page, you can perform a number of actions.

Change user roles

  1. Make sure you are on the Manage Users page. (See above for instructions.)
  2. Select the user whose privilege you want to change.
  3. Select Publisher or Editor from the Privileges pop-up menu.

When you change a user role, the user receives a notification e-mail.

Invite a user

  1. Make sure you are on the Manage Users page. (See above for instructions.)
  2. Click the Invite User button in the upper-right corner of the browser window.
  3. Complete the invitation dialog box and click Invite. All fields are required.
  4. (Optional) Select Send Me a Copy of the Invitation if you'd like to receive a copy of the invitation yourself.

The invited user appears as pending on the Manage Users page until the invitee accepts the invitation. The invitation is valid for 30 days. You'll receive an e-mail when the user either accepts or declines the invitation.

Note: You can only invite publishers and editors. For information on changing the site's web developer, see Add and configure a website.

Disinvite a user

  1. Make sure you are on the Manage Users page. (See above for instructions.)
  2. Select the user you want to disinvite. You must select a user with a pending invitation. Users who have already accepted invitations must be deleted. (They cannot be disinvited.)
  3. Click the Delete Invitation button in the upper-right corner of the browser window.

Delete a user

  1. Make sure you are on the Manage Users page. (See above for instructions.)
  2. Select the user you want to delete.
  3. Click the Delete User button in the upper-right corner of the browser window.

When you delete a user, the user receives a notification e-mail.

Note: You cannot delete yourself from a website.

Configure website

You also have the option of configuring a website from the Manage Users page. To do so, follow the instructions in Change website configuration.

Return to the Manage Sites page

To return to the Manage Sites page at any time, click the Manage Sites link at the top of the browser window.

Edit, administer, and publish pages in the browser

If you are a web developer or publisher, you can administer and publish pages directly in the editable browser.

  1. Browse to the web page that you want to administer.
  2. Tip: You can easily open a registered website from the Administration Panel by clicking the website's URL on the Manage Sites page, or by clicking the View/Edit Site button on the Manage Users page.

  3. Press Control+E (Windows) or Command+E (Macintosh) to sign in to the InContext Editing service.
  4. In the Sign In dialog box, enter your Adobe ID (email address) and password, and click Sign In.
  5. Note: You must use an InContext Editing web developer's or publisher's user account in order to see the publish and discard draft options.

  6. Select from any of the following options, located at the top-right and bottom-right of the page:
  7. Edit Page Lets you edit the current page. When you click the Edit button, the page becomes editable. When you save changes, InContext Editing creates a draft version of the page.

    Duplicate Page Creates a duplicate of the current page. When you click the Duplicate Page button, InContext editing asks you to enter a title and file name for the duplicate file.

    Discard Draft Discards the current draft. The current draft is the draft last-edited and saved by any user.

    Publish Draft Publishes the current draft to the live site. Once the page is published, the draft process for that page begins anew.

  8. If you edited the page, click Save Draft to save your changes to the draft, or click Done to exit Edit mode.
  9. When you're finished editing, discarding, publishing, or duplicating, click the Sign Out button to return to the live version of the page.

Create editable regions in a browser

InContext Editing lets you create editable regions in a browser without the use of Dreamweaver. This functionality is designed as a quick-start offering and is limited in that you cannot define repeating regions or properties for each editable region.

Before you begin, make sure the site you want to work with is registered with the InContext Editing service. For more information, see Add and configure a website.

Note: Only web developers can create editable regions in a browser.

  1. Sign in to the InContext Editing Administration Panel.
  2. On the Administration Panel home page, click the Manage Sites button in the Actions panel. The Manage Sites page opens, listing all of the websites for which you are registered.
  3. Open the website that you want to work with by clicking that website's URL.
  4. When prompted, sign into the InContext Editing service.
  5. Navigate to a web page to which you want to add an editable region.
  6. Click the Edit Page button.
  7. A dialog box appears telling you that you have no editable regions defined. Click the Define Regions button.
  8. Select the region or regions that you want to make editable.
  9. Regions that are eligible for transformation are surrounded by dotted lines. Only DIV, TD, and TH tags that have a unique ID are eligible for transformation.

    When you select a region, it becomes shaded, and a check box is selected in the upper-left corner of the region. To de-select the region, de-select the check box.

  10. Click Save.
  11. The Browser returns you to regular Edit mode.

  12. (Optional) Edit the content of your new editable region and click Save Draft.
  13. Click Done to exit Edit mode.
  14. At this stage you can either publish or discard the draft. If you publish the draft, you will not be able to return to this page to create or delete editable regions. Once you publish the draft, you can only customize the editable regions further using Dreamweaver CS4.

Change the default editing command

The default keyboard shortcut command for invoking the InContext Editing service in a browser is Control+E for Windows, and Command+E for Macintosh. You can, however, customize this command.

Note: These instructions apply to users who have used Dreamweaver to create InContext Editing pages. If you're using the InContext Editing service independently from Dreamweaver, you'll need to download the includes/ice folder to your computer to make the changes specified.

  1. Open the InContext Editing configuration file ice.conf.js. The file resides in the includes folder that Dreamweaver adds to your site when you create InContext Editing pages. The default path to the file is siteRoot/includes/ice.
  2. Change the default values for the keyboard shortcut command according to your liking. The following table shows acceptable values.
  3. Valid separators +
    -
    Valid modifiers (PC and Macintosh) CTRL
    CTRL+ALT
    CTRL+SHIFT
    CTRL+SHIFT+ALT
    Valid modifiers (Macintosh only) CMD
    CMD+ALT
    CMD+SHIFT
    CMD+SHIFT+ALT
    Valid keyboard shortcut commands [Modifier][Separator][Letter A-Z]

    Note: Deleting the value completely from the configuration file will disable the command.

  4. Don't forget to upload the ice.conf.js file to the server after you've changed it.

Edit account settings

You can edit the name, email address, and password on your account at any time.

  1. Sign in to the InContext Editing Administration Panel.
  2. On the Administration Panel home page, click the My Account button.
  3. When prompted, reconfirm your password.
  4. In the Change Account Information dialog box, make the changes you want to make and click Update.

Note: You can also edit account settings from an InContext Editing editable browser window. The My Account button appears at the top of the window whenever you make a page of your website editable.