# Implement and customize the HTML Text Editor

The HTML Text Editor is a tool to edit HTML-based text directly in your 4ALLPORTAL, e.g. when writing an email notification for an eTicket.
It's a WYSIWYG editor (What You See Is What You Get) that makes changes like font size, color or indention directly in HTML. Thus, the text you see in the editor resembles exactly the text as it will outcome, e.g. in a recipients email, or your web shop.

The editor opens in a pop-up window. Its default menu items to format text are:

style sheets (headlines, paragraph, preformatted)
font sizes and rendered fonts
font color
bold, italic, underlined, strikethrough
bullet point and number lists
alignments (indent, justified, centered)

The HTML Editor is part of our 4App CoreEngine. To access this tool, you must implement and configure it first. It is per default embedded in the DAM's eTicket and can be used with the 4App HTML Renderer to edit HTML contents directly in a metadata field from type <CEText> (configuration).

# 4App HTML Renderer

In order to render HTML in a metadata text field (i.e. to see your edited text), you additionally need our 4App HTML Renderer. With it, you can add field type <html> to your field renderer and display strings from your database as HTML. The editor is a tool that is accessed by the Renderer App.

For all details, take a look at its documentation.

# What to use it for

Rendering and editing HTML in your 4ALLPORTAL is always useful if you want to work with formatted text and to check how the real outcome will be in HTML.

The editor is used by default when sending eTickets and download packages. Here, too, you can see how the ticket or package notification will look like for your recipient.
Every field you enter rich text, like long product descriptions or specially structured metadata are good to display with HTML, especially if you use your contents in a web shop and want to edit and check the text outcome in your 4ALLPORTAL.
It is necessary if you want to import assets (from a third party system) that already come with HTML structured metadata which you want to keep, e.g. a bullet point list.

Like for any other text field, the changes made in this field can be audited and checked in an asset's change history, although not rendered.

# How to implement

To add the HTML Text Editor to a metadata field, you need to:

customize your field renderer with type <html>
have an installed 4App HTML Renderer (required to embed type <html> to field renderer and to display HTML in a metadata field)

# Example

<field_renderer>
  <type>html</type>
  
  <field>
    <name>My-html-content-field</name>
    <type>CEText</type> --> choose unlimited CEText for HTML contents
  </field>

</field_renderer>

Please note: <type>CEText</type> mustn't actually be added, it comes automatically when choosing field renderer type <html>.

For more information on creating a metadata field with rich text, take a look at our object renderer documentation here.

# How to customize

The editor comes with a default range of menu items (see above). You may replace, add or remove certain options (like we did for our eTicket editor for example).

Customizing is supported for the three value options. If you want to customize them, make your changes in value option files wysiwyg_format, wysiwyg_font_families, and wysiwyg_font_sizes. When adding or editing keys, make sure you use the actual css values (Example: <entry key="key">Arial, Helvetica, sans-serif</entry>).

Please note: If you customize value options, future upgrades of our default editor may not reach you with a Core upgrade. Keep your changes in mind to act accordingly during upgrades.

# Style sheets

The default style sheets are:

headlines h1 - h4
paragraph
preformatted

You may remove elements from here or add two further headlines (HTML supports headlines h1 - h6) if you need them.

# Font

The six default fonts are:

Arial
Arial Black
Georgia
Source Sans Pro (default font of the 4ALLPORTAL)
Times New Roman
Verdana

You may remove or add fonts (e.g. your company's corporate font) if you need them. You may also define fallback fonts in the font-family.

Please note: If you add a font here, make sure your 4ALLPORTAL can access it. It must be installed on all computers where the 4ALLPORTAL is used.

# Font size

The default comes with 18 font sizes to choose from (range 6 pt to 72 pt). You may remove or add in-between sizes if you need them.

Please note: Always define your font size in points. Pixels may not be supported in every case.

If you want to further customize the editor's default (e.g. hide an option like "strikethrough"), take a look here.

# Security and exceptions

By allowing to edit HTML in the 4ALLPORTAL, a user could potentially write malicious code, e.g. to access user data. To keep your system secure, we use integrated third party software DOMPurify (opens new window) to automatically filter out all insecure contents by default.

If you explicitly want to make exceptions and allow some potentially insecure contents (e.g. iframes or extra styling), you need to add additional attributes to your field renderer. For this, take a look at the object renderer documentation of our 4App HTML Renderer here (opens new window).

← Icons Labels and Translations →