Moritz Weinmann
54d9194d22
Toolbar-Presets liefern jetzt frische Arrays (Factory-Pattern), damit mehrere Editor-Instanzen auf einer Seite sich nicht gegenseitig beeinflussen. Resize-Modul und CSS angepasst. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
109 lines
4.1 KiB
JavaScript
109 lines
4.1 KiB
JavaScript
/**
|
|
* Geteilte Toolbar-Presets für Quill-Editoren (Wiki, Forum).
|
|
*
|
|
* Jeder Preset ist eine Factory-Funktion, die ein frisches Array
|
|
* liefert. Grund: Quill kann das Modules-Objekt während der Init
|
|
* mutieren — bei mehreren Editor-Instanzen auf einer Seite (z.B.
|
|
* Wiki mit Sprach-Tabs) würden sie sich sonst gegenseitig
|
|
* verändern.
|
|
*
|
|
* Verwendung pro Editor:
|
|
*
|
|
* container: window.QuillToolbarPresets.full()
|
|
*
|
|
* Bewusst nicht enthalten: `code` (inline) — nur `code-block`,
|
|
* weil Multi-Line-Code die häufige Nutzung ist.
|
|
*/
|
|
(function (global) {
|
|
'use strict';
|
|
|
|
global.QuillToolbarPresets = {
|
|
// Vollständige Toolbar — Goldstandard für Wiki und Forum
|
|
full: function () {
|
|
return [
|
|
[{ header: [1, 2, 3, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ script: 'sub' }, { script: 'super' }],
|
|
[{ color: [] }, { background: [] }],
|
|
[{ align: [] }],
|
|
[
|
|
{ list: 'ordered' }, { list: 'bullet' },
|
|
{ indent: '-1' }, { indent: '+1' }
|
|
],
|
|
['link', 'image', 'video'],
|
|
['code-block', 'table'],
|
|
['clean']
|
|
];
|
|
},
|
|
|
|
// Compact-Toolbar — wie full(), aber OHNE Image und Video.
|
|
// Genutzt in Modulen, die kein Image-Backend haben (Tasks, Products).
|
|
compact: function () {
|
|
return [
|
|
[{ header: [1, 2, 3, false] }],
|
|
['bold', 'italic', 'underline', 'strike'],
|
|
[{ script: 'sub' }, { script: 'super' }],
|
|
[{ color: [] }, { background: [] }],
|
|
[{ align: [] }],
|
|
[
|
|
{ list: 'ordered' }, { list: 'bullet' },
|
|
{ indent: '-1' }, { indent: '+1' }
|
|
],
|
|
['link'],
|
|
['code-block', 'table'],
|
|
['clean']
|
|
];
|
|
},
|
|
|
|
// Better-Table-Modul-Konfiguration. Identisch über alle Editoren —
|
|
// deutsche Operations-Menu-Labels und der Hintergrundfarben-Picker
|
|
// für Tabellenzellen.
|
|
betterTableConfig: function () {
|
|
return {
|
|
operationMenu: {
|
|
items: {
|
|
insertRowUp: { text: 'Zeile oberhalb einfügen' },
|
|
insertRowDown: { text: 'Zeile unterhalb einfügen' },
|
|
insertColumnLeft: { text: 'Spalte links einfügen' },
|
|
insertColumnRight: { text: 'Spalte rechts einfügen' },
|
|
mergeCells: { text: 'Zellen zusammenführen' },
|
|
unmergeCells: { text: 'Zellen teilen' },
|
|
deleteRow: { text: 'Zeile löschen' },
|
|
deleteColumn: { text: 'Spalte löschen' },
|
|
deleteTable: { text: 'Tabelle löschen' }
|
|
},
|
|
color: {
|
|
colors: [
|
|
'#f8f9fa', '#e9ecef', '#dee2e6', '#ced4da',
|
|
'#adb5bd', '#6c757d',
|
|
'green', 'red', 'yellow', 'blue',
|
|
'white', 'black', 'orange'
|
|
],
|
|
text: 'Hintergrundfarbe'
|
|
}
|
|
}
|
|
};
|
|
}
|
|
|
|
// Vorlage für künftige Erweiterungen — derzeit nicht aktiv:
|
|
//
|
|
// compact: function () {
|
|
// // wie full, aber ohne 'table' — z.B. für Comment-Felder
|
|
// var t = this.full();
|
|
// var idx = t.findIndex(function (row) { return row.indexOf('table') > -1; });
|
|
// if (idx > -1) t[idx] = ['code-block'];
|
|
// return t;
|
|
// },
|
|
//
|
|
// minimal: function () {
|
|
// return [
|
|
// [{ header: [2, 3, false] }],
|
|
// ['bold', 'italic', 'underline'],
|
|
// [{ list: 'ordered' }, { list: 'bullet' }],
|
|
// ['link'],
|
|
// ['clean']
|
|
// ];
|
|
// }
|
|
};
|
|
})(window);
|