agorum.clipboardButton

Mit diesem Widget stellen Sie eine Schaltfläche dar, die Inhalte in die Zwischenablage des Browsers kopieren kann.

• Das System kopiert den Inhalt der Parameter clipboardText und/oder clipboardHtml in die Zwischenablage.
• agorum.clipboardButton verhält sich ansonsten wie eine normale Schaltfläche, siehe agorum.button, agorum.menuItem.

Verwendung

---

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy HTML',
  clipboardHtml: '<b style="color:green">A text in bold with green color</b>'
});

button;

Events

---

Dieses Widget erbt alle Events von agorum.button, agorum.menuItem und enthält zusätzlich die folgenden Events.

copied

Löst aus, sobald:

• ein Benutzer auf die Schaltfläche geklickt hat
• das System den Inhalt der Parameter clipboardText und/oder clipboardHtml in die Zwischenablage gelegt hat

 

Rückgabewerte

Sie erhalten den Parameter success mit true oder false zurück.

Wert	Beschreibung
true	Das Kopieren war erfolgreich.
false	Das Kopieren war erfolglos.

Beispiel

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy html',
  clipboardHtml: '<b style="color:green">A text in bold with green color</b>'
});

button.on('copied', success => {
  console.log('copy finished, success? ', success);
});

button;

Parameter

---

Dieses Widget erbt alle Parameter von agorum.button, agorum.menuItem und enthält zusätzlich die folgenden Parameter.

clipboardText

Definiert den reinen Textinhalt, den das System in die Zwischenablage kopiert.

• Verwenden Sie diesen Parameter, wenn Sie nur Text ohne HTML-Formatierung kopieren möchten.
• Das System legt den Textinhalt in die Zwischenablage.

clipboardHtml

Definiert den HTML-Inhalt, den das System in die Zwischenablage kopiert.

• Der Inhalt muss HTML-Code sein.
• Das System legt den HTML-Code als HTML-Element in die Zwischenablage und fügt den Code beim Einfügen in ein HTML-fähiges Programm (etwa MS Office oder einen E-Mail-Client) korrekt wieder mit allen angegebenen Formatierungen ein.

Beispiel mit clipboardText und clipboardHtml

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy',
  clipboardText: 'Reiner Text ohne Formatierung',
  clipboardHtml: '<b style="color:green">Formatierter Text in Grün</b>'
});

button;

html

Alias für clipboardHtml.

• Dieser Parameter existiert aus Kompatibilitätsgründen und verhält sich identisch zu clipboardHtml.
• Für neue Implementierungen empfehlen wir die Verwendung von clipboardHtml und clipboardText.

Beispiel mit einem Link

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy link',
  clipboardHtml: '<a href="https://www.agorum.com" target="_blank">Link to agorum Website</a>'
});

button;

• Der kopierte Link muss ein HTML-Element sein.
• Programme, etwa MS Office, stellen diesen HTML-Code als Link dar.
• Fügen Sie den Inhalt in eine Browserzeile oder einen Texteditor ein, so fügt das System nur den Text ein ohne HTML-Code.

Beispiel: Den „rohen“ Link in die Zwischenablage kopieren

let aguila = require('common/aguila');

let button = aguila.create({
  type: 'agorum.clipboardButton',
  text: 'copy link',
  clipboardText: 'https://www.agorum.com'
});

button;

Funktionen

---

keine

Beispiele

---

Komplettes Beispiel mit verschiedenen Links

Das folgende Beispiel zeigt zusätzlich, wie eine Rückmeldung an den Benutzer erfolgen kann, wenn der Benutzer den Link kopiert hat.

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  width: 300,
  height: 400,
  items: [
    {
      type: 'agorum.textDisplay',
      text: 'Some samples for copying to browser clipboard.'
    },
    {
      type: 'agorum.clipboardButton',
      text: 'copy text',
      name: 'testCopyText',
      clipboardText: 'This text should be in the clipboard now'
    },
    {
      type: 'agorum.clipboardButton',
      text: 'copy link',
      name: 'testCopyLink',
      clipboardHtml: '<a href="https://www.agorum.com">The agorum website</a>'
    },
    {
      type: 'agorum.clipboardButton',
      text: 'copy raw link',
      name: 'testCopyRawLink',
      clipboardText: 'https://www.agorum.com'
    },
    {
      type: 'agorum.clipboardButton',
      text: 'copy html',
      name: 'testCopyHtml',
      clipboardHtml: '<b style="color:green">A text in bold with green color</b>'
    }
  ]
});

registerEvent('testCopyText');
registerEvent('testCopyLink');
registerEvent('testCopyRawLink');
registerEvent('testCopyHtml');

function registerEvent(name) {
  let clipboardButton = widget.down(name);

  // when copy is done, the copied event is called, with a success info
  clipboardButton.on('copied', success => {
    // remember the original text of the button
    let origText = clipboardButton.text;
    
    // set the button text to copied, to inform the user, that the copy is done
    clipboardButton.text = success ? 'copied' : 'error';

    // reset back the button text after 2 seconds
    clipboardButton.setTimeout(() => {
      clipboardButton.text = origText;
    }, 2000);
  });
}

widget;

Beispiel zur Verwendung mit form in einer list

let aguila = require('common/aguila');

let form = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 500,
  height: 400,
  readOnly: true,
  elements: [
    {
      type: 'agorum.composite.form.element.list',
      name: 'listField',
      maxItems: 5,
      label: 'List',
      template: [
        {
          type: 'agorum.composite.form.element.text',
          name: 'col1',
          label: 'Inhalt',
          flexible: true,
          hidden: false,
          validation: [
            {
              required: true,
            },
          ],
        },
        {
          type: 'agorum.clipboardButton',
          name: 'col2',
          readOnlyHidden: false,
          text: 'copy',
        },
      ],
      value: [
        {
          col1: 'Something to copy',
          col2: {
            type: 'custom',
            clipboardText: 'Something to copy',
          },
        },
      ],
    },
  ],
});

form;