Fix: /admin/content is nu boom-editor + image-grootte knop + custom syntax

- /admin/content is nu de boom-editor (plugin-file-tree structuur),
  consistent met plugin- en thema-editors. Oude tabelweergave verhuisd
  naar /admin/content-list, bereikbaar via 'Boom weergave'/'Lijst
  weergave' knoppen. /admin/content-files redirect naar /admin/content.
- Image-grootte knop in markdown editor-toolbar: selecteer ![alt](url),
  klik knop, breedte/hoogte dialog, {:width=... height=...} syntax
  toevoegen/vervangen. Bestaande waarden worden in prompts getoond.
- Custom-grootte syntax {:width=...} nu ook correct herschreven naar
  /-media/ endpoint (was alleen gewone ![alt](url) herschreven).
- Handleidingen bijgewerkt (content-beheer.md NL+EN: boom/lijst
  weergave uitleg + image-grootte + images in content sectie)
- Release notes v2.6.2 bijgewerkt
- Pentest 30/30, WCAG 25/25
This commit is contained in:
2026-08-19 12:15:56 +00:00
parent a3b9a81199
commit 6f18a13f90
17 changed files with 171 additions and 81 deletions
@@ -42,6 +42,7 @@
{ cmd: 'quote', icon: 'bi-chat-quote', title: 'Citaat' },
null,
{ cmd: 'hr', icon: 'bi-hr', title: 'Horizontale lijn' },
{ cmd: 'image-size', icon: 'bi-arrows-angle-expand', title: 'Afbeelding grootte' },
null,
{ cmd: 'media', icon: 'bi-images', title: 'Media invoegen' }
],
@@ -152,6 +153,43 @@
modal.show();
}
break;
case 'image-size':
// Set width/height on a markdown image: ![alt](url){:width="W" height="H"}
var selImg = editor.getSelection();
if (!selImg) {
// No selection — ask the user to select an image first
alert('Selecteer eerst een afbeelding in de editor (![alt](url)) om de grootte in te stellen.');
editor.focus();
break;
}
// Match ![alt](url) optionally followed by {:...}
var imgMatch = selImg.match(/^!\[([^\]]*)\]\(([^)]+)\)(\s*\{:([^}]*)\})?/);
if (!imgMatch) {
alert('Selectie is geen afbeelding. Selecteer een afbeelding in markdown formaat: ![alt](url)');
editor.focus();
break;
}
var alt = imgMatch[1];
var url = imgMatch[2];
// Parse existing width/height from the {:...} block
var existingAttrs = imgMatch[4] || '';
var existingW = (existingAttrs.match(/width\s*=\s*"([^"]*)"/) || [])[1] || '';
var existingH = (existingAttrs.match(/height\s*=\s*"([^"]*)"/) || [])[1] || '';
var width = prompt('Breedte (px of %, leeg = niet instellen):', existingW);
if (width === null) { editor.focus(); break; }
var height = prompt('Hoogte (px of %, leeg = niet instellen):', existingH);
if (height === null) { editor.focus(); break; }
// Build the {:width=... height=...} suffix
var attrs = [];
if (width.trim() !== '') attrs.push('width="' + width.replace(/"/g, '') + '"');
if (height.trim() !== '') attrs.push('height="' + height.replace(/"/g, '') + '"');
var replacement = '![' + alt + '](' + url + ')';
if (attrs.length > 0) {
replacement += '{:' + attrs.join(' ') + '}';
}
editor.replaceSelection(replacement);
editor.focus();
break;
}
}