HTML Content module (user-defined content)

The HTML Content module enables users to view content provided for them. If the corresponding rights are available, selected users can create and edit the content themselves and thus make it available to other users.

It is also possible to create an HTML Content page in the Process Dashboard as a Widget as a widget.
Contact your administrator for this.

Access rights

In order for a user to be able to access or work in the module, the necessary rights must be assigned in the administration area:

loadModule_htmlcontent

Users with this right can access the module.

htmlcontent_editor

Users with this role can edit content by clicking on the icon in the BPC toolbar.

htmlcontent_editor_<MODUL_ID>

Users with this role can only edit content with this module ID by clicking on the icon in the BPC toolbar.
Example: The role htmlcontent_editor_123 allows the editing of content in the HTML content module with the ID 123.

Settings

Parameters for the HTML content module can be preset in the administration area.
These are mainly general settings for the module as well as settings for the markup, e.g. link colors or individual text formats.

HTML content settings in the administration area
Setting (Key) Description Example

Module_Description
(moduleHeader_description)

Can be used as a subtitle or description.

User-defined content

Module_Header
(moduleHeader_enabled)

Setting whether module title (Module_Name) and subtitle (Module_Description) are displayed or not.

true (is displayed)

Module_Icon
(module_iconCls)

Individually selectable icon that is displayed in front of the module title.
If no icon is to be displayed, a character must still be entered. If the field is empty, a standard icon is selected.

[NOTE] ==== The module icon does not automatically correspond to the icon in the navigation bar. This is defined in the navigation settings in the administration area. ====

x-fal fa-books
or e.g. B. "0", so that no symbol is displayed

Module_name
(module_name)

Name or title of the module

HTML content module

Content
(content)

An overview of the content displayed in the HTML content module. The overview is updated automatically if users (with editing authorization) make changes directly in the module.
Each content element consists of a title, a language and the desired HTML content.

 
[
    {
        "editorTabTitle": "German",
        "language": "de",
        "content": "<h1>Deutscher Inhalt</h1>"
    },
    {
        "editorTabTitle": "English",
        "language": "en",
        "content": "<h1>English content</h1>"
    }
]

EditorCustomCSS
(editorStyles)

CSS stylesheet in which user-defined CSS classes are defined. These can be integrated into the text editor via the EditorOptions setting.

 
 .TitleClass{
     font-size: 30px;
     font-weight: 400;
     color : black;
}
 .LinkClass{
     font-size: 15px;
     font-weight: 100;
     color : blue;
}

EditorOptions
(editorOptions)

JSON object with 2 attributes ("inlineClasses", "linkStyles").
It has the CSS class name from the setting EditorCustomCSS as an attribute.
As a value, it has the name under which the CSS class can be accessed in the editor (see User-specific CSS classes).

 
{
  "inlineClasses": {
  "TitleClass": "Custom Title"
},
  "linkStyles": {
  "LinkClass": "Custom Link"
}
}

User-specific CSS classes

Once a CSS class has been defined in the setting EditorCustomCSS, it can be referenced in the setting EditorOptions.

Inline CSS classes

If the CSS class name (e.g. TitleClass) is under the attribute (e.g. inlineClasses), this can be addressed in the editor as follows and applied to each element.

Inline CSS classes

Adding a link

If the CSS class name (e.g. LinkClass) is under the attribute (e.g. linkStyles), this refers to a link and can be addressed as follows in the editor:

Add link

Assigning a link class

Clicking on the newly inserted link opens a tooltip in which the 2nd menu entry from the left contains a list of our LinkStyles:

Link class

User interface

When you call up the module, you are initially in read mode.

Read mode

Edit content

To create and edit content, you need the appropriate rights.

The function icon for editing is located in one of these 3 places: * in the BPC toolbar on the left * in the BPC toolbar on the right * in the module header

Clicking on the icon takes you to the Edit mode.

Edit page

Edit mode

In edit mode, the editor is opened and new content can be created or existing content can be edited.

By default, the content is offered in English and German. Each available language is displayed in a separate tab.

Language tabs

The number and selection of languages can be customized. Please contact your administrator.

Functions in the editor

In the editor, you have the option of creating and customizing texts and adding further content such as links or graphics. The functions of the editor are available via icons in a toolbar:

Button Description

Undo

Undoes the last action.

Redo

Restores the action.
(The button can only be used if an action was previously undone)

Help

Opens a window with key combinations that can be helpful in the editor.

Make bold

Makes the text bold.

Italicize

Marks the text in italics.

Underline

Underlines the text.

Mark strikethrough

Marks the text as strikethrough.

Mark subscript

Marks the text as subscript.

Mark superscript

Marks the text as superscript.

Selection for text size

Opens a selection for the text size.

Selection for text color

Opens a predefined selection for the text color.
A custom color can be selected via the "HEX Color" field, e.g. "#FFFF00".
Clicking on the icon resets the text color to the default (black).

Selection for background color of the text

Opens a predefined selection for the background color of the selected text.
A custom color can be selected via the "HEX Color" field, e.g. "#FFFF00".
Clicking on the icon resets the text color to the default (black).

Preset formats

Opens a selection of preset formats.

Preset formats

Opens a selection of preset formats.

Delete text formatting

Deletes any formatting of the selected text.

Align links

Aligns the current line or all selected lines to the left.

Align center

Aligns the current line or all selected lines to the center.

Align right

Aligns the current line or all selected lines to the right.

Align in justification

Aligns the current line or all selected lines in justification.

Numbered list

Converts the current line or all selected lines into a numbered list.
Decimal numbers are used by default. You can select other numbering styles by clicking on the arrow next to the button.

Unordered list

Converts the current line or all selected lines into an unordered list.
Black circles are used as list items by default. Click on the arrow next to the button to select additional list styles.

Selection of heading and text styles

Opens a selection of different heading and text styles for the current line or all selected lines.
"Normal text" is used by default.

Text style selection

Opens a selection of different text design options.

Gray

Colors the current line or all selected lines gray.

Bordered

Adds a thin line above and below the current line or all selected lines.
The lines are added for each individual line. If several lines are to be included between the lines, a soft line break (kbd:[Ctrl] + kbd:[Enter]) must be used.

Spaced

The spacing between the letters and characters of the current line or all selected lines is increased.

Uppercase

All letters of the current line or all selected lines are capitalized.

The options can be combined and must be deselected individually to return to normal text.

Line spacing

Opens a selection of different spacing between the lines.

Reduce indent

Reduces the indent of the current line or all selected lines.
The button can only be used if there is an indent.

Increase indent

Increases the indent of the current line or all selected lines.
The button can be used multiple times.

Citation

Opens a selection to mark citations and adjust the citation level.
The citation level is indicated by vertical lines at the beginning of the line and the corresponding text color. A maximum of 3 different levels are possible; from the 4th level onwards, additional lines appear, but the text color remains the same.

Insert link

Opens a window in which the URL of a website and the text displayed in the link can be entered.
It is also possible to open the link in a new window by ticking the option.

Insert graphic

Opens a window in which the URL of a graphic can be entered.

Insert table

Opens a window in which a table can be created by selecting the number of columns and rows.

Emoticons

Opens a window in which an emoticon can be selected.
If several emoticons are to be inserted, the button must be clicked several times.

Insert special character

Opens a window in which a special character can be selected.
If several special characters are to be inserted, the button must be clicked several times.

Insert horizontal line

Inserts a horizontal line below the current line.

Display HTML code

The content is displayed as HTML code and can also be edited there.

Complete editing

Once editing has been completed, the generated content can be saved or discarded. In both cases, the editing mode is exited.

Complete editing

In Lesemodus you can view the result of the editing.

Keywords:
Press Esc to exit full screen
Modal image placeholder
Press Esc to exit full screen