Text Field / Text Field View
The "Text Box" input control and the "Text Box View" view control are among the basic controls.
You can enter multi-line text in text fields. There is no limit on the length of the input. Text fields can only be linked to data fields with the "Text" data type. In addition to entering plain, unformatted text, the text field can also be configured as a Markdown or TinyMCE editor.
The "Text Field View" is used solely to display data entered in a data field with the "text" data type. When you create the element—and even later—you can link it to the desired data field.
In the image above, you can see the text field where you can enter any text. This entry can be saved by clicking the corresponding button, provided that a data field is linked to the text field.
You can find the text field element in the "Applications" module under "Elements. " You can create a new text box by dragging and dropping the element from here onto the workspace.
For more information on creating elements, click here.
The Properties dialog box for a text field element opens automatically when a new text field is created. You can open the Properties dialog box for an existing text field by double-clicking the element on the workspace, selecting "Properties" from the context menu, or choosing "Edit / Properties" from the main menu, provided the text field is selected on the workspace.
Text field (input element)
General
Title
Enter the title of the text field here. For more information on multilingual titles and the use of language constants, click here.
Show Titles Under Control
This setting causes the title to appear in the input field when the page is displayed in the browser.
Input Required
With this setting, an input field becomes a required field.
Read-only
This setting prevents input.
Extract Hashtags
You can create hashtags in the text by typing a # before the desired characters (e.g., MyTag). When the text is saved, hashtags are extracted and saved as well. The hashtags are displayed by the " Tagging - Bookmarks" view element. The text can contain any number of hashtags.
View Suggested Tags
When text begins with the # character, a tooltip displays suggestions based on existing tags. Clicking on a suggestion inserts it into the text as a hashtag.
With this setting, the "Use TinyMCE" and "Use Markdown Editor" options cannot be selected in the next step on the "Options" tab. Tag suggestions cannot be displayed in the editors.
Options
No editor
This option allows you to capture plain text in the browser. In the lower-right corner, you can resize the text box by dragging it with the mouse.
Intrexx Version 12.0.1
The TinyMCE editor is available in a Light version and an Advanced version. You can find more information here:
Maximum input length
This setting limits the number of characters that can be entered in the text field.
Using TinyMCE
The text field becomes an HTML editor in the browser. At the top, you'll find a variety of buttons that can be used to format the text. In the lower-right corner, you can resize the editor by dragging with the mouse.
In the configuration, you can select the buttons you want.
Available / Selected Buttons
In the "Available Buttons" column, you'll find all the buttons you can select in the editor. All buttons included in the "Selected Buttons" column are also visible in the editor. The dotted line is used to visually group buttons together. This will help you keep track of things in the editor. The solid line is used to create an additional toolbar below the previous one.
Move to the right / left
The selected button will be moved to the left or right column.
Load Default Configuration
Clicking this button resets the settings to a basic configuration with only the most essential buttons or to the default configuration. If you click the arrow to the right of it, a corresponding menu will open.
Delete Configuration
Moves all items from the "Selected Buttons" column back to the "Available Buttons" column
Edit Additional Configuration
You can find all the information on this topic here.
Move up / down
Changes the order of the buttons in the editor. The rule is: the higher up a button is in the list, the further to the left it will appear in the editor's toolbar.
Enable file uploads
With this setting, files can be uploaded using the text editor, for example, when inserting an image.
Enable the creation of directories
Allows the creation of directories.
Insert a simple line break by pressing the Enter key
Inserts a simple line break when the Enter key is pressed in the editor.
Show Menu
Displays the editor menu.
Show Footer
Causes the status bar at the bottom of the editor to display which HTML element is currently being edited, depending on the cursor's position.
Use the Editor in Inline Mode
In inline mode, no iframe element is used. The content is therefore displayed exactly as it will appear later on the portal. For more information about inline mode, click here.
Inline mode, when used in conjunction with tooltips, can cause issues with the display of the editor toolbar. Alternatively, you can use the Quickbars plugin. You can find out how to integrate this plugin here.
You can find an example of the plugin here.
You can find another option for inline mode here.
Intrexx Version 12.0.1
TinyMCE Light
The Light version does not support external sources (links, images, HTML code, media)—neither in buttons nor in the menu or context menu. The following buttons are not supported:
-
link (Insert/edit link)
-
unlink (Remove link)
-
image (Insert/Replace Image)
-
code (Edit HTML source code)
-
media (embed/edit multimedia)
In the configuration, you can select the buttons you want.
Available / Selected Buttons
In the "Available Buttons" column, you'll find all the buttons you can select in the editor. All buttons included in the "Selected Buttons" column are also visible in the editor. The dotted line is used to visually group buttons together. This will help you keep track of things in the editor. The solid line is used to create an additional toolbar below the previous one.
Move to the right / left
The selected button will be moved to the left or right column.
Load Default Configuration
Clicking this button will reset the settings to their default configuration. If you click the arrow to the right of it, a corresponding menu will open.
Delete Configuration
Moves all items from the "Selected Buttons" column back to the "Available Buttons" column
Edit Additional Configuration
You can find all the information on this topic here.
Move up / down
Changes the order of the buttons in the editor. The rule is: the higher up a button is in the list, the further to the left it will appear in the editor's toolbar.
Enable file uploads
This setting has no function in the TinyMCE Light editor.
Enable the creation of directories
Allows you to create directories.
Insert a simple line break by pressing the Enter key
Inserts a simple line break when the Enter key is pressed in the editor.
Show Menu
Displays the editor menu.
Show Footer
Causes the status bar at the bottom of the editor to display which HTML element is currently being edited, depending on the cursor's position.
Use the Editor in Inline Mode
In inline mode, no iframe element is used. The content is therefore displayed exactly as it will appear later on the portal. For more information about inline mode, click here.
Inline mode, when used in conjunction with tooltips, can cause issues with the display of the editor toolbar. Alternatively, you can use the Quickbars plugin. You can find out how to integrate this plugin here.
You can find an example of the plugin here.
You can find another option for inline mode here.
Intrexx Version 12.0.1
TinyMCE Advanced
The TinyMCE editor is available in the Advanced version, which, as before, supports external sources. In addition to the standard configuration, you can also select a basic configuration here that includes only the most essential buttons.
Enable file uploads
With this setting, files can be uploaded using the text editor, for example, when inserting an image.
Images or files embedded in HTML are visible to all users in the Intrexx portal and are not subject to the Intrexx data record's permission check. This feature is therefore only suitable for files that are publicly visible. In other cases, please use a file field in the data group and add a file selection to the page.
All other settings in the editor's properties are the same as those found in TinyMCE Light.
File Manager
If file uploads are enabled in the settings, you can access the file manager in your browser by clicking " 
" "Insert / Edit Media" in the editor's toolbar. In the next dialog box, click " 
" under "Source." You can then manage the desired files in the file manager—in a folder structure, if desired.
Use a Markdown Editor
Starting with Intrexx version 11.3.0, the Content Editor is available for Markdown. You can find all the information here.
Additional TinyMCE Configuration
Additional configuration options for initializing the TinyMCE editor can be specified here. There must be no comma in the last line of the code.
Please note that INTREXX GmbH does not provide support for additional configurations. No liability is assumed for incorrect adjustments.
Examples of Editor Configuration
Add Custom Buttons
If you want to customize the "setup" property in the advanced configuration, you must define the functions under "additionalSetup." When adding buttons, you must also add additional buttons to the existing toolbar as 'additionalButtons: "Button1 Button2"' (or via toolbar2: "Button1 Button2").
branding: false,
entity_encoding: "raw",
convert_urls: true,
relative_urls: false,
plugins: "pagebreak anchor charmap hr image link emoticons code table insertdatetime preview media searchreplace print paste directionality fullscreen noneditable visualchars nonbreaking template lists",
browser_spellcheck: true,
image_advtab: true,
resize: "both",
template_replace_values: {},
languages: "de,en,fr,nl",
additionalButtons: 'myCustomToolbarButton',
base url: '/script/dist/tinymce',
suffix: '.min',
additionalSetup : function(ed) {
ed.ui.registry.addButton('myCustomToolbarButton', {
text: 'My Custom Button',
onAction: function(){alert('Button clicked!')}
});
}
Add images to the editor using drag-and-drop, and upload them automatically
branding: false,
entity_encoding: "raw",
convert_urls: true,
relative_urls: true,
plugins: "pagebreak anchor charmap hr image link emoticons code table insertdatetime preview media searchreplace print paste directionality fullscreen noneditable visualchars nonbreaking template lists",
browser_spellcheck: true,
image_advtab: true,
resize: "both",
template_replace_values: {},
languages: "de,en,fr,nl",
automatic_uploads: true,
paste_data_images: true
Edit images in the editor using the imagetools plugin
branding: false,
entity_encoding: "raw",
convert_urls: true,
relative_urls: true,
plugins: "pagebreak anchor charmap hr image imagetools link emoticons code table insertdatetime preview media searchreplace print paste directionality fullscreen noneditable visualchars nonbreaking template lists",
browser_spellcheck: true,
image_advtab: true,
resize: "both",
template_replace_values: {},
languages: "de,en,fr,nl"
Load and Include an External Plugin
branding: false,
entity_encoding: "raw",
convert_urls: true,
external_plugins: {
'tinycomments': 'https://cdn.tiny.cloud/1/no-api-key/tinymce/5/plugins.min.js?tinycomments=sdk' },
relative_urls: true,
browser_spellcheck: true,
image_advtab: true,
resize: "both",
template_replace_values: {},
languages: "de,en,fr,nl",
toolbar1: false,
toolbar: 'bold italic underline | addcomment',
menubar: 'file edit view insert format tools tc',
menu: {
tc: {
title: 'TinyComments',
items: 'addcomment showcomments deleteallconversations' }
},
plugins: 'paste tinycomments',
tinycomments_mode: 'embedded',
tinycomments_author: 'Author'
The example uses a paid premium plugin. This example won't work unless you've specifically purchased this plugin. Adapt the example to the plugin you want to load and integrate.
The Quickbars plugin replaces the toolbar
branding: false,
entity_encoding: "raw",
convert_urls: true,
relative_urls: true,
menubar: false,
plugins: [
'autolink',
'codesample',
'link',
'lists',
'media',
'powerpaste',
'table',
'textcolor',
'image',
'quickbars' ],
toolbar: false,
toolbar1: false,
quickbars_insert_toolbar: 'quicktable image',
quickbars_selection_toolbar: 'bold italic | h2 h3 | blockquote quicklink',
contextmenu: 'inserttable | cell row column deletetable',
powerpaste_word_import: 'clean',
powerpaste_html_import: 'clean'
The editor is displayed in inline mode; the menu and toolbar are hidden.
The Quickbars plugin replaces the toolbar.
Here are some more examples: https://www.tiny.cloud/docs/demo/
Text Field View
General
As with the view field, only the title can be edited for the text field under "View" on the "General" tab in the Properties dialog box. You can find information about multilingual titles and the use of language constants here.
Options
"HTML" format
With this option, text is interpreted as HTML.
Advertisement
The display settings are accessible when the text field is not located within a table.
Maximum text length
Here, you can limit the number of characters displayed. If the value is -1, all characters are displayed.
Ellipsis (omission mark)
The ellipsis entered here is appended to the last character displayed when the maximum text length is reached.
Line break
Here you can select the type of line break.
Extras
Enable Cross-Site Scripting Protection
Prevents information from a context where it is not considered trustworthy from being inserted into another context where it is considered trustworthy.
Show Syntax Highlighting
Enables syntax highlighting when displaying source code in the text field for the HTML and Markdown options.
Column Display in View Tables
You can find all the information here.
"Text" Format
Displays unformatted text.
Replace line breaks with <br>
Inserts the HTML tag <br> for each line break.
Advertisement
The display settings are accessible when the text field is not located within a table.
Maximum text length
Here, you can limit the number of characters displayed. If the value is -1, all characters are displayed.
Ellipsis (omission mark)
The ellipsis entered here is appended to the last character displayed when the maximum text length is reached.
Line break
Here you can select the type of line break.
Column Display in View Tables
You can find all the information here.
"Wiki" Format
This option enables the interpretation of wiki syntax.
Wiki
Data fields and pages from a wiki application can be embedded here.
Wiki Syntax
|
Link |
|
|---|---|
| Links to posts: |
The double square brackets indicate that this is a link to an article within the wiki: [[Article1]] If there is no article with this headline yet, a link to a new post will be displayed. If the article is available, you can jump directly to this post.
[[Article|Display name in the text]] You can use the "|" character to assign display text to a link. The alias text is used instead of the heading. |
| Click on the images: |
The keyword "Image:" indicates that this is an image display. [[Image:myImage.png]], [[Image:http://www.intrexx.com/images/meinBild.png]] This is how you can link to an image located in the "htmlroot" directory. Of course, you can also specify subfolders or links to external websites.
[[Image:myImage.png|alt tag]] You can add an alt tag to an image using the "|" character. |
| Links on websites: |
The simple square bracket indicates that this is a link to an external website: [http://www.intrexx.com] This is how a link to the Intrexx website is created.
[http://www.intrexx.com|The Intrexx website] The "|" character can be used to display a web link with alternative text within the article. |
|
Text Formatting: Lists |
|
|---|---|
|
Spelling |
Presentation |
* one * two ** two-one ** two-two * three |
|
|
List Types |
|
|---|---|
° with a circle symbol |
 one |
- with a rectangle icon |
|
1. numbered list |
|
a. alphabetically numbered list (in lowercase letters) |
|
A. Alphabetically numbered list (in uppercase letters) |
|
i. numbered list (lowercase Roman numerals) |
|
I. Numbered list (Roman numerals, uppercase) |
|
|
Combining List Types |
|
|---|---|
1. one ii. two-one ii. two-two III. two-two-one III. two-two-two ii. two or three 1. three |
|
|
Joining List Entries |
|
|---|---|
|
If a line ends with a \, it is possible to to link a list entry to the next line. Example:
1 List entry, line 1\ List entry, line 2\ List entry, line 3 1 List entry, line 1\ List entry, line 2\ List entry, line 3 |
|
Special Features
Styles or list generation can be prevented by escaping characters with the '\' character (to output the '\' character, you must type '\\').
Example:
\1. Text does not become a list
or
\& becomes &
\< becomes <
\> becomes >
Text of the one in [[! !]] is ignored.
Example:
[[! == Heading 1 == !]] is rendered as == Heading 1 ==.
Tagging
In the "View" text field, you can enter hashtags (e.g., #MyPage) in addition to regular text.
Enable tags
This setting enables tags to be displayed as links. If this setting is not enabled, normal text is displayed.
Jump to
When tags are enabled, you can specify a page as the jump destination that will load when a tag link is clicked.
Landing Page Options
You can find information on this topic here.