agorum.composite.form.element.html

Mit diesem form-Element zeigen Sie HTML-Inhalte an, sodass Benutzer diese HTML-Inhalte editieren können. Um HTML editieren oder HTML-Inhalte darstellen zu können, setzen Sie den Parameter value.

agorum.composite.form.element.html erbt alle Grundeigenschaften von element.

Verwendung

---

let aguila = require('common/aguila');
let widget = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 600,
  height: 400,
  elements: [
    {
      type: 'agorum.composite.form.element.html',
      flexible: true,
      value: '<p>Hello World</p>'
    }
  ]
});
widget;

Parameter

---

value

Stellt den HTML-Inhalt der Komponente dar, den ein Benutzer bearbeiten kann und angezeigt bekommt.

flexible

Wert	Beschreibung
true	Berechnet die Höhe und Breite des Elements dynamisch. Das Element verwendet den kompletten zur Verfügung gestellten Platz des übergeordneten Widgets/ Fensters.
false	Berechnet die Höhe und Breite des Elements nicht dynamisch.

Das System gibt eine Mindesthöhe von 150 Pixeln vor, wenn Sie den Parameter nicht setzen.

 

Beispiel zu true

 

Beispiel zu false

security

Stellt diverse Sicherheitsstufen für die Anzeige des HTML-Inhalts ein.

Wert	Beschreibung
none (Standard)	Gibt den Inhalt so wieder, wie er ist. Achtung: Sicherheitslücken durch schädliches HTML möglich. Verwenden Sie nur HTML-Inhalt, dem Sie auch vertrauen.
sanitized	Bereinigt den Inhalt von bösartigem Code und Tags. Das System zeigt den Inhalt danach direkt an.
isolated	Zeigt den Inhalt in einem iFrame an, filtert zusätzlich schädlichen Code heraus und zeigt den Inhalt in einem isolierten Bereich an, der keinen Zugriff auf das Hauptfenster besitzt. Dies ist etwa für die Anzeige von HTML-E-Mails notwendig, da diese oftmals über Stylesheets Anzeigen ändern, die ansonsten Auswirkungen auf die gesamte agorum core-Weboberfläche hätten.

cls

Definiert ein Style-Set für den Parameter value, das das System anzeigt.

• Sie können CSS-Klassennamen übergeben, die Sie zuvor agorum core zur Verfügung gestellt haben.
• Sie können mehrere Klassennamen mit einem Leerzeichen voneinander trennen.

disableDefaultLinkHandling

Wert	Beschreibung
true	Deaktiviert das Standardverhalten bei einem Klick auf einen agorum core-Link in einem HTML.
false (Standard)	Das System ruft bei einem Klick auf den Link die Open-Aktion aus dem agorum core smart assistant konfigurator auf und beim Rechtsklick das Kontextmenü.

Sie können den Wert nur bei der Initialisierung des Widgets definieren.

Beispiel

<a action="open" class="agorum-editor-link" href="#" uuid="df4c1a20-a711-11e9-bb06-02420a0a0007">test linked.html</a>

linkCls

Übergibt ein Array von Strings, die Link-Klassen von HTML-Links enthalten, auf die Sie Klick-Events erhalten möchten.

• Sie können damit Links im HTML definieren, auf die Sie im Widget reagieren können.
• Das System gibt automatisch alle Attribute des Links zurück.
• Sie können den Wert nur bei der Initialisierung des Widgets definieren.

Beispiel

<a action="open" class="my-link" href="#" uuid="df4c1a20-a711-11e9-bb06-02420a0a0007">test linked.html</a>

Wenn Sie bei linkCls die Klasse my-link definieren, so erhalten Sie die Events:

• linkClicked
• linkRightClicked
• linkDblClicked

Das System löst die Events nur im Ansichtsmodus des Elements aus, im Bearbeitungsmodus stehen diese nicht zur Verfügung.

Klassen festlegen

let aguila = require('common/aguila');
let widget = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 400,
  height: 400,
  readOnly: true,
  elements: [
    {
      type: 'agorum.composite.form.element.html',
      name: 'htmlElement',
      linkCls: [
        'my-link'
      ],
      flexible: true,
      value: '<a action="open" class="my-link" href="#" uuid="df4c1a20-a711-11e9-bb06-02420a0a0007">test linked.html</a>'
    }
  ]
});

widget.down('htmlElement').on('linkClicked', link => {
  console.log('link clicked', link);
});

widget.down('htmlElement').on('linkRightClicked', link => {
  console.log('link right-clicked', link);
});

widget.down('htmlElement').on('linkDblClicked', link => {
  console.log('link double-clicked', link);
});

widget;

Funktionen

---

insert

Ermöglicht es Benutzern, HTML-Code an die Stelle des Cursors im Editor einzufügen.

Der Editor muss sich im Bearbeitungsmodus befinden.

Beispiel

widget.down('htmlElement').insert('<b>Beispieltext</b>');

Events

---

linkClicked

Löst aus, wenn ein Benutzer auf einen Link im HTML klickt, dessen class einer der definierten Klassen innerhalb von linkCls entspricht.

Sie erhalten als Übergabe-Parameter folgende Struktur zurück:

{
  linkCls: 'cls-Angabe, wie in linkCls definiert',
  weitere: '....'
}

Parameter	Beschreibung
linkCls	Definiert die Klasse des Links, auf den ein Benutzer geklickt hat.
weitere...	Enthält alle weiteren Attribute des Links, etwa die UUID oder action, sofern beim Link definiert.

linkRightClicked

Löst aus, wenn ein Benutzer auf einen Link im HTML mit der rechten Maustaste klickt.

Ansonsten identisch zum Event linkClicked

linkDblClicked

Löst aus, wenn ein Benutzer auf einen Link im HTML doppelklickt.

Ansonsten identisch zum Event linkClicked