Create an InContext Editing editable region

An InContext Editing editable region is a pair of HTML tags that includes the ice:editable attribute in the opening tag. The editable region defines an area on the page that a user can edit directly in a browser.
Note: If you are adding an InContext Editing editable region to a page that’s based on a Dreamweaver template, the new InContext Editing editable region must exist within a region that is already editable.

  1. Do one of the following:

    • Select a div, th, or td tag that you want to transform into an editable region.

    • Place the insertion point where you want to insert a new editable region on the page.

    • Select exactly one editable region in a Dreamweaver template (DWT file).

    • Select other content on your page that you want to make editable (for example, a block of text).

  2. Choose Insert > InContext Editing > Create Editable Region.

  3. Your options vary, depending on your selection.

    • If you selected a div, th, or td tag, Dreamweaver transforms the tag into an editable region without any further steps.

    • If you’re inserting a new, blank editable region do one of the following:

      • Select Insert New Editable Region at the Current Insertion Point and click OK. Dreamweaver inserts a div tag in your code with the ice:editable attribute in the opening tag.

      • Select Transform the Parent Tag Into an Editable Region if you want Dreamweaver to make the parent tag of the selection the container element for the region. Only certain HTML tags are transformable: div, th, and td.

        Note: This second option is only available when the parent node meets the exact criteria for transformation. For example, it must be one of the listed transformable tags, and it must not be subject to any of the errors listed in InContext Editing Error messages.

    • If you selected a Dreamweaver template editable region, click OK in the Create Editable Region dialog box. Dreamweaver wraps the template editable region with a div tag that acts as a container for the new InContext Editing editable region.

    • If you selected other content that you want to make editable, do one of the following:

      • Select Wrap Current Selection With a DIV Tag and Then Transform It if you want to wrap whatever you selected with a div tag and turn it into an editable region. The div tag with which Dreamweaver wraps the content acts as the container for the editable region.
        Note: Adding div tags to pages might alter page rendering and the effects of CSS rules. For example, if you have a CSS rule that applies a red border around div tags, you would see a red border around your current selection when Dreamweaver wraps it with a div tag and transforms it. If you want to avoid this type of conflict, you can rewrite the CSS rules that affect the current selection, or you can undo the transformation (Edit > Undo), and then select and transform a supported tag that Dreamweaver doesn’t need to wrap with a div tag.

      • Select Transform the Parent Tag Into an Editable Region if you want Dreamweaver to make the parent tag of the selection the container element for the editable region. Only certain HTML tags are transformable: div, th, and td.

  4. In Design view, click the blue tab of the editable region to select it if it’s not already selected.
    Note: If you are working in a Dreamweaver template, be sure to select the InContext Editing editable region (the container region), and not the Dreamweaver template editable region.

  5. Select or deselect options in the Editable Regions Property inspector. The options you select will be available to a user when they edit the contents of the editable region in a browser. For example, if you select the Bold option, the user will be able to make text bold; if you select the Numbered List and Bulleted List option, the user will be able to create numbered and bulleted lists; if you select the Link option, the user will be able to create links; and so on. Hover over the icon of each option to see a tooltip of what the option enables.

  6. Save the page.

    If this is the first time you’re adding InContext Editing functionality to a page, Dreamweaver informs you that it is adding InContext Editing supporting files to your site: ice.conf.js, ice.js, and ide.html. Be sure to upload these files to the server when you upload your page, otherwise InContext Editing functionality will not work in a browser.