[marcel-graf]

Folgend ein Beispiel, wie man einen Textbaustein Button in die AgentTicketCompose Oberfäche einbindet.

In der Otobo Console folgendes durchführen:

#— sicherstellen, das der Pfad existiert—

mkdir -p /opt/otobo/Custom/Kernel/Output/HTML/Templates/Standard/

#—die Datei in den Pfad kopieren —

cp /opt/otobo/Kernel/Output/HTML/Templates/Standard/AgentTicketCompose.tt /opt/otobo/Custom/Kernel/Output/HTML/Templates/Standard/

#–die Datei zum bearbeiten öffnen–

nano /opt/otobo/Custom/Kernel/Output/HTML/Templates/Standard/AgentTicketCompose.tt

nach Zeile 343 ( <!– OutputFilterHook_NoTicketOptionsFallback –>) folgenden Code Einfügen

#————————

<!– Beginn Ihrer Textbausteine im OTOBO-Layout –>

<label style=“font-size: 12px;“>Textbausteine:</label>

<select class=“Button“
style=“padding: 2px 5px; font-size: 11px; vertical-align: middle; cursor: pointer; display: inline-block; width: 180px; height: 21px; border: 1px solid #ccc; box-shadow: none; background: #fff;“
onchange=“event.stopPropagation();
if(!this.value) return;

// 1. In Zwischenablage kopieren (Als Fallback)
const tempInput = document.createElement(‚textarea‘);
tempInput.value = this.value;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand(‚copy‘);
document.body.removeChild(tempInput);

// 2. Text in den Editor einfügen (Der Textbaustein wird eingefügt und 2 Zeilenumbrüche werden angehängt)
const htmlContent = this.value.replace(/\n/g, ‚<br>‘) + ‚<br><br>‘;

// Fall A: OTOBO nutzt den alten CKEditor 4
if (typeof CKEDITOR !== ‚undefined‘ && CKEDITOR.instances) {
const activeEditor = CKEDITOR.currentInstance || Object.values(CKEDITOR.instances);
if (activeEditor) {
activeEditor.focus();
activeEditor.insertHtml(htmlContent);
}
}
// Fall B: OTOBO 11 nutzt den neuen CKEditor 5
else {
// Findet das Eingabefeld des CKEditor 5 im aktuellen Formular
const editable = document.querySelector(‚.ck-editor__editable‘);
if (editable && editable.ckeditorInstance) {
const editorInstance = editable.ckeditorInstance;
editorInstance.focus();

// Fügt den HTML-Inhalt an der Cursorposition ein
const viewFragment = editorInstance.data.processor.toView(htmlContent);
const modelFragment = editorInstance.data.toModel(viewFragment);
editorInstance.model.insertContent(modelFragment);
}
}

// Dropdown zurücksetzen
this.selectedIndex = 0;“>
<option value=““ selected disabled>📝 bitte auswählen…</option>
<option value=“Hallo zusammen,

vielen Dank für Ihre Nachricht.

Mit freundlichen Grüßen“>Begrüßung Standard</option>
<option value=“Wir haben Ihr Ticket erhalten und prüfen den Vorfall aktuell in unserer Fachabteilung. Wir melden uns schnellstmöglich wieder bei Ihnen.“>Zwischenbescheid</option>
</select>

<!– Ende Ihrer Textbausteine –>

#————————

#—hier beginnt der vorhandene Code—
<label class=“Mandatory“ for=“RichText“>*[% Translate(„Text“) | html %]:</label>

#—Datei speichern und den Cache löschen

bin/otobo.Console.pl Maint::Loader::CacheCleanup

Wie immer vor Änderungen am System ein Backup machen.

Gruß Marcel

 

[Autor]

Beiträge