Start page / Template development / WebEdit / Easy-Edit / InplaceEditBeginEnd

WEBeditInplaceEditBegin / End

Easy-Edit – editing window with input components

The areas of the preview page which are to be highlighted in colour on passing over them with the mouse pointer are defined within the WEBeditInplaceEditBegin and WEBeditInplaceEditEnd render format templates. Therefore, they must be added within the HTML body area and below $CMS_RENDER(template:"WEBeditInplaceEditContainer")$.

The editing window opens on the preview page in the position of WEBeditInplaceEditBegin. At the same time, WEBeditInplaceEditBegin defines the size and pull-down direction (expansion direction) of the editing window. The editing window contains the input components defined for the highlighted area. In addition, the display of the border and highlighting colours can be configured for the Easy Edit area on passing over it with the mouse cursor.

The render format templates WEBeditInplaceEditBegin and WEBeditInplaceEditEnd can be used in page, section and table templates. Each WEBeditInplaceEditBegin expression must be closed again by a WEBeditInplaceEditEnd expression. Nesting should not be used at all: each WEBeditInplaceEditBegin should be closed again with WEBeditInplaceEditEnd first before the next WEBeditInplaceEditBegin.

<body>
  $CMS_RENDER(template:"WEBeditInplaceEditContainer")$
    ...
    $CMS_RENDER(template:"WEBeditInplaceEditBegin", width:640, height:480, orientation:"left")$
    ...
    $CMS_RENDER(template:"WEBeditInplaceEditEnd")$
</body>

Layout of the editing window

The layout of the editing window can be affected by optional parameters.

For example, the width and height parameters can be used to specify a fixed size. If no values are given for width and height, the editing window takes up the exact size of the area surrounded by the output of WEBeditInplaceEditBegin and WEBeditInplaceEditEnd on the page and therefore completely overlays it. The width and height are then, i.e. among other things dependent on the HTML specifications for this area, the quantity of text entered in the corresponding input components, the width and height of added pictures, etc. If the input components it contains higher and/or wider than the editing window it is assigned vertical and/or horizontal scroll bars.

The orientation parameter can be used to specify the pull-down (expansion) direction of the editing window.

Animation and upload progress indicator

The borderless parameter can be used to hide the border displayed on passing over the window with the mouse pointer. This is important, e.g. for CSS layouts with pixel precision, which would be destroyed by the additional addition of the border which is 1 pixel wide.

In addition, the backgroundColorHover, backgroundColorNormal, borderColorHover, borderColorNormal parameters can be used to define start and end colour values for changing the background and border colour of Easy Edit areas on passing over them with the mouse pointer (onmouseover) and leaving them (onmouseout).

The loaderCss parameter enables a CSS class to be given for the upload progress indicator. As a default

the CSS class weie_loader_ps (upload progress indicator in mint green) is used for content from the Page Store,
the CSS class weie_loader_cs (upload progress indicator in light brown)

is used for content from the Content Store (data sets). This are contained in the stylesheet with the reference name "WE_css" (Media Store, "WebClient Media (EasyEdit)" folder, reference name "WEBeditInplace"). If other CSS classes are to be used, they must be added to and stored in a separate stylesheet.

However, these parameters are only evaluated if, in the render format template WEBeditInplaceIncludeJS, the animated parameter is not set to false.

Editing functions

The functions available for editing Easy Edit areas are determined on the basis of the respective content which can be entered in the area. For example, for content entered

using input components from page templates, the only functions available are the "Edit" function
added via input components from section templates, all functions
added using input components from table templates, and the "New", "Delete" and "Edit" functions

No other parameters have to be given for WEBeditInplaceEditBegin for these types of content.

Only for content output using the contentSelect function do the additional content and index parameters have to be given. The UID of the table template on which the data source (content) with the required data record is based must be given as the value for content in double inverted commas. The data record ID is given directly in double inverted commas as the value for index or e.g. is given dynamically via the system object #row or the $CMS_VALUE(...)$ instruction.

Optional parameters

Parameter	Explanation / Example
width	Specifies the width of the editing window in pixels, e.g. width:400 The pixel value given here already includes the width for the border of 1 pixel. If the parameter is not given, the width of the editing window depends on the width of the output of the area surrounded by WEBeditInplaceEditBegin and WEBeditInplaceEditEnd on the preview page.
height	Specifies the height of the editing window in pixels, e.g. height:400 The pixel value given here already includes the height for the border of 1 pixel. If the parameter is not given, the width of the editing window depends on the height of the output of the area surrounded by WEBeditInplaceEditBegin and WEBeditInplaceEditEnd on the preview page.
loaderCss	Influencing the upload progress indicator by specifying a CSS class, e.g. loaderCss:"weie_loader_cs" As a default, the CSS class weie_loader_ps (upload progress indicator in mint green) is used for content from the Page Store, the CSS class weie_loader_cs (upload progress indicator in light brown) is used for content from the Content Store (data sets).
backgroundColorNormal	Specification of a start and/or end colour in hexadecimal mode for the background of an Easy Edit area on leaving it or passing over it with the mouse pointer, e.g. backgroundColorNormal:"#59c3ef" This value is used as the start value on passing over the area with the mouse pointer and as the end value on leaving it. If the parameter is not given, white (#ffffff) is used as the default background colour.
backgroundColorHover	Specification of a start and/or end colour in hexadecimal mode for the background of an Easy Edit area on leaving it or passing over it with the mouse pointer, e.g. backgroundColorNormal:"#59c3ef" This value is used as the start value on leaving the area with the mouse pointer and as the end value on moving over it. If the parameter is not given, mint green (#ebf0e7) is used as the default background colour for content from the Page Store and light brown (#efeae6) is used as the default background colour for content from the Content Store.
borderColorNormal	Specification of a start and/or end colour in hexadecimal mode for the border of an Easy Edit area on passing over it or leaving it with the mouse pointer, e.g. borderColorNormal:"#59C3EF" This value is used as the start value on passing over the area with the mouse pointer and as the end value on leaving it. If the parameter is not given, white (#ffffff) is used as the default border colour. This parameter has no effect if the optional borderless parameter is set to true (see below).
borderColorHover	Specification of a start and/or end colour in hexadecimal mode for the border of an Easy Edit area on leaving it or passing over it with the mouse pointer, e.g. borderColorHover:"#000000" This value is used as the start value on leaving the area with the mouse pointer and as the end value on moving over it. If the parameter is not given, violet (#961a59) is used as the default border colour. This parameter has no effect if the optional borderless parameter is set to true (see below).
borderless	Show and hide a border on passing over an Easy Edit area with the mouse pointer, e.g. borderless:true true hides the border. The parameters borderColorNormal and borderColorHover therefore have no effect. If the parameter is not given, the border is displayed as a default.
orientation	Specification of the direction in which the editing window is expanded (pulled down). As a default, the editing window is expanded to the right (orientation:"right"). If the section to be edited is located, e.g. at the right-hand edge of the page, the window can be expanded to the left with the help of orientation:"left".
content	Specification of the table template's UID, e.g. content:"Products.press_releases" This parameter must be used together with the index parameter.
index	Specification of the data record's ID, e.g. index:#row.getId() This parameter must be used together with the content parameter.

Special case CMS_INPUT_CONTENTAREALIST und FS_LIST

Notes about the use of the input components CMS_INPUT_CONTENTAREALIST and FS_LIST see here.

Print version | Page start