Core | Essentials | DAM (4.37)

# Implement and Customize the HTML Text Editor

The HTML Text Editor is a tool to edit HTML-based text in the 4ALLPORTAL. It is embedded by default in our eTicket editor, but could e.g. be implemented to add and edit a formatted product description.

The editor is a so-called WYSIWYG (What You See Is What You Get): Changes in the editor like font size, color or indention resemble the exact outcome in your metadata field or webshop.

The HTML Editor is part of our 4App CoreEngine. Every CEtext field can be enabled to display HTML formatted text and to add the editor (implementation).

Dependency

Note that when working with Core Engine version 3.10, an additional installation of 4App HTML Renderer (opens new window) is required. From version 4.0 on, all features are included in the Core Engine.

Further documentation

  • For HTML field details, take a look at our object renderer documentation here.
  • For all configuration possibilities, take a look at the WYSIWYG component's documentation here.

# What to Use it For

Displaying 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.
  • 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.

# Default Editor Controls

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

  • style sheets (headlines h1-h4, paragraph, preformatted)
  • six fonts (Arial, Arial Black, Georgina, Source Sans Pro, Times New Roman, Verdana)
  • 18 font sizes (range 6 pt to 72 pt)
  • font color
  • bold, italic, underlined, strikethrough, super- and subscript
  • bullet point and number lists
  • alignments (indent, justified, centered)
  • remove font format
  • hyperlink

You may customize and complement the headlines, fonts and font sizes (more details)

# Implementation

To add the default HTML Text Editor (with all controls like shown above) to a metadata text field, you just need to customize the field in your object renderer with type <html>:

<field_renderer>
  <type>html</type>
  <label>HTML text field</label>
  <field>
    <name>html_field</name>
    <type>CEText</type> --> choose CEText for HTML contents (unlimited)
  </field>
</field_renderer>

Result in the GUI:

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

# Customize the Default Editor

If required, you can narrow down the editor's controls, add security measures, or allow potentially insecure html tags like iframes. For all possible attributes and an XML example, please take a look here.

# Customize Format, Fonts, Font Size

Further customization is supported for the three drop-down controls format, fontFamily and fontSize. Customize them by editing their respective value option files (stored in global).

  • Format

    • edit value option file wysiwyg_format
    • You may remove elements from here or add two further headlines if you need them.

  • Font Family

    • edit value option file wysiwyg_font_families
    • You may remove or add fonts (e.g. your company's corporate font) if you need them. You may also define fallback fonts (more details).
      Please note: If you add a font, make sure your 4ALLPORTAL can access it. It must be installed on all computers where the 4ALLPORTAL is used.

  • Font Size

    • edit value option file wysiwyg_font_sizes
    • 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.

Please note: When adding or editing keys in the value option files, make sure to 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 and act accordingly during upgrades.

# 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 here.

← Import Predefined Data via JSON →

Request missing documentation