Working with Text Input#

This chapter will concentrate on the manipulation and management of text inputs in Imperia templates. We will explore how to effectively integrate, manage, and optimize text inputs using Imperia CMS. We will cover the basics of text integration and provide examples on how to use text inputs in practical ways.

The syntax, usage, and practical examples in this chapter will provide a solid foundation for effectively managing text inputs in Imperia CMS.

Text Integration Basics#

Incorporating text inputs in Imperia CMS is made straightforward with the use of HTML input elements like <input> and <textarea>. These elements allow users to input text content that can be dynamically integrated into the final published webpage.

Please note that when defining text inputs in Imperia, the name attribute should always be the first attribute in the element. Failure to do so might lead to unexpected results or errors.

Let's look at a basic example of how to incorporate a text input and a textarea into a template:

<!--formstart-->

#IF(<!--XX-editmode-->)

<div class="form-group">
  <label for="IMPERIA:title">Title</label>
  <input name="IMPERIA:title" type="text" id="IMPERIA" class="form-control">
</div>

<div class="form-group">
  <label for="IMPERIA:content">Content</label>
  <textarea name="IMPERIA:content" id="IMPERIA" class="form-control"></textarea>
</div>

#ELSE <!--Savemode-->

<h1><!--XX-TEXT:title--></h1>
<p><!--XX-TEXT:content--></p>

#ENDIF

<!--formend-->

In this template, the #IF() condition checks if the template is in edit mode. If it is, an input field and a textarea are displayed where users can input a title and content, respectively.

The <input> tag in this example creates a single-line text input field, and the <textarea> tag creates a multi-line text input field. The name attribute, set as the first attribute to "IMPERIA:title" and "IMPERIA:content" will create an imperia metafield, which stores the entered text when the document is saved.

In the save mode, represented by the #ELSE condition, the inputted text is dynamically replaced with the actual content entered during edit mode. The  and  tags display the entered title and content on the published webpage.

Using the Rich Text Editor (iwe)#

The Imperia Rich Text Editor (iwe) is a powerful tool for content editing based on the CKEditor. It provides a range of formatting options such as bold, italics, hyperlinks, lists, and much more. This is particularly useful when you need to offer more advanced text editing capabilities to your content editors.

Here's how to integrate the Rich Text Editor into your Imperia template:

<!--formstart-->

#IF(<!--XX-editmode-->)

  <?imperia iwe2
      id="content"
      toolbar="Imperiaminimal"
  ?>

#ELSE <!--Savemode-->

<!--XX-TEXT:content-->

#ENDIF

<!--formend-->

In this example, the rich text editor is set up inside an #IF conditional, which means it will only display in edit mode. The name attribute is set to IMPERIA:content as the first attribute (since this is a requirement for it to work properly). The id attribute is set to content, and the toolbar attribute is set to Imperiaminimal, which will provide a minimal set of toolbar options for the editor.

The  directive is used to output the text entered in the rich text editor.

Configuring the Rich Text Editor#

The Imperia Rich Text Editor (iwe) offers a high degree of configurability, allowing you to tailor the editing environment to your specific needs. This can be achieved by invoking a custom configuration (customConfig) and custom toolbar (toolbar).

Here's an example of how to implement these settings:

<!--formstart-->

#IF(<!--XX-editmode-->)

  <?imperia iwe2
      id: content
      customConfig: /assets/iwe/iwe2-config.js
      toolbar: customtoolbar
  ?>

#ELSE <!--Savemode-->

<!--XX-TEXT:content-->

#ENDIF

<!--formend-->

In this example, the customConfig attribute is set to point to a custom JavaScript file iwe2-config.js located under the /assets/iwe/ directory (relative to the Document-Root). The toolbar attribute is set to customtoolbar, which will be defined in the custom config file.

Here's an example of what the content of the custom config file (located at htdocs/assets/iwe/iwe2-config.js) could look like:

CKEDITOR.editorConfig = function(config) {

  config.uiColor = '#ffffff';
  config.extraPlugins = ['autogrow', 'editorplaceholder', 'mamasset'];
  config.autoGrow_minHeight = 100;
  config.autoGrow_onStartup = true;
  config.format_tags = 'p;h2;h3';
  config.contentsCss = '/assets/iwe/styles/typography.css';
  config.editorplaceholder = 'Inhalt eingeben';

  config.toolbar_customtoolbar = [
    ['Format'],
    ['Bold','Italic','Strike'],
    ['MAMAssetLink', 'Link', 'Unlink'],
    ['CopyFormatting', 'RemoveFormat'],
    ['Undo','Redo']
  ];

};

In this custom configuration file, a variety of settings are defined:

The uiColor sets the color scheme of the editor interface.
The extraPlugins adds additional functionality to the editor.
autogrow enable the editor to automatically adjust its height based on the content.
format_tags determines the available format tags.
contentsCss sets the CSS file to be used for styling the content within the editor.
editorplaceholder sets the placeholder text within the editor.

The toolbar_customtoolbar configures a custom toolbar with a specific set of buttons. In this case, it includes options for text formatting, creating links, copy formatting, and undo/redo actions.

Remember, the provided configuration is just an example. You can customize these settings according to your project's specific needs and requirements.