Content highlighting

Content highlighting overview – DOM Editor example

The "content highlighting" function links editorial maintenance in the FirstSpirit JavaClient with the output in the preview. The highlighting of content in the preview forms a bridge between the maintenance of content and its output on the website. This enables the editor to be clearly shown how and where changes to content in JavaClient affect the website. This is achieved using the integrated JavaClient preview (in the 3rd screen column): The template developer can configure the project so that, when an input component is clicked in the workspace (middle screen column), the content concerned is highlighted in colour in the integrated preview. Also, by clicking an element of the Page Store tree structure (left-hand screen column), the content concerned can be highlighted in the integrated preview.

Content highlighting also works the other way around: If the editor clicks an element in the preview, for example, a text passage or a picture, the corresponding section is automatically opened in the tree structure and in the workspace and the input component concerned is highlighted. Navigation and search for specific content in the JavaClient and switching between JavaClient and the preview in the web browser is therefore no longer necessary. Texts and pictures can be quickly and easily found and changed.

The following highlighting can be realised:

Page Store: Input components

Highlighting of input components

If an input component is clicked in the workspace, the content concerned can be highlighted in colour in the integrated preview.

If a text passage or picture is clicked in the integrated preview, the assigned input component can be marked in the workspace. The tree structure opens up to the level of the section containing the input component.

FirstSpirit components do not all completely support the "content highlighting" function. This is especially true for multi-valued components, for example, CMS_INPUT_CONTENTAREALIST.

In the Figure, for example, the input component with the content "sustainability for your own home" of the "sustainability" section in the "content center" content area of the "Mithras Homepage" is surrounded with a border in the workspace and in the integrated preview.

For further information on highlighting input components, see Chapter WEBeditInplaceAttributeBegin / End.

Page Store: Sections

Highlighting sections

If a section is clicked in the tree structure, the contents of this section (and therefore all the section's input components) can be highlighted in colour in the integrated preview. The section, with the input components it contains, is opened in the workspace.

In the Figure, for example, the content of the "sustainability" section is surrounded with a border in the "content center" content area of the "Mithras Homepage" page. In this case, this includes

• the heading "sustainability for your own home",
• the text "There are many options,...",
• the link "more information" and
• the picture.

For further information on highlighting sections, see Chapter WEBeditInplaceEditBegin / End.

Page Store: Content areas

Highlighting content areas

If a content area is clicked in the tree structure, the contents of this content area can be highlighted in colour in the integrated preview. This includes all sections and input components which exist in this content area.

In the Figure, for example, the content of the "Content left" content area (i.e. the left-hand content column, including the "Press release teasers", "Contact" and "FirstSpirit" sections) of the "Mithras Homepage" page is surrounded with a border.

For further information on highlighting content areas, see Chapter WEBeditInplaceBody.

Page Store: Pages

Highlighting page content

If a page is clicked in the tree structure, the content maintained in this page can be highlighted in colour in the integrated preview.

It is advisable to surround an area containing input components or a central sub-area only with a border, rather than the whole page.

In the Figure, for example, the contents of the "Mithras Homepage" page (including the input components for the heading "Welcome to Mithras Energy" and the text "Solar energy is the future...") are surrounded with a border.

For further information on highlighting pages, see Chapter WEBeditInplaceEditBegin / End.

Content Store: Input components

Highlighting input components in datasets

If the input component of the dataset of a data source (content) is clicked in the workspace, the contents of this input component can be highlighted in colour in the integrated preview.

If content which originates from a data set is clicked in the integrated preview, the corresponding dataset is opened in the workspace and the input component concerned is highlighted in colour.

FirstSpirit components do not all completely support the "content highlighting" function. This is especially true for multi-valued components, for example, CMS_INPUT_CONTENTAREALIST.

Datasets can be output on different pages, depending on the project. As a result, the link between the integrated preview and the respective dataset or the input components it contains is not unique. In the case of multiple use, the template developer must "manually" establish this link by specifying special parameters.

In the Figure, for example, the content of the press release teaser with ID 128 ("In a ceremony, ...") is surrounded with a border.

For further information on highlighting datasets, see Chapter WEBeditInplaceAttributeBegin / End and WEBeditInplaceEditBegin / End.

Global Content Area

Highlighting global pages

If a global page is clicked in the tree structure, the content output in the integrated preview can be highlighted in colour, if previewed from the Page or Site Store beforehand, and the input components defined for the global page open in the workspace.

If the content of a global page is clicked in the integrated preview, the tree structure below the "Global Store" root node opens, up to the page containing the marked content.

In the Figure, for example, the contents of the global page "general header" (including the input component CMS_INPUT_LINKLIST with the lettering "Global Link") are surrounded with a border.

For further information on highlighting global content (Global Content Areas), see Chapter WEBeditInplaceGCA.