Ik vraag mij af hoe ik het onderstaande stukje php als pure tekst kan plakken binnenin een bestaand element in html via javascript. ik heb momenteel een cms systeem waarbij ik vanuit een pagina een import wil hebben naar een extern bestand. handmatig in de code aanpassen wil ik niet doen. Hoop dat het duidelijk is wat ik bedoel. Ik heb al geprobeerd om het stuk php in een localstorage variable op te slaan, maar dat kreeg ik qua syntax niet voor elkaar. Heeft iemand een idee hoe ik dit voor elkaar kan krijgen? het chat gpt zelfs al geprobeerd, maar kwam er niet aan uit.
stel ik heb dus onderstaande stukje html. daarin moet dus de php komen.
<p id="test">hier zou het stuk php moeten komen</p>
onderstaande moet in bovenstaande stukje html element als het ware geplakt worden
<?php
INCLUDE '../../headers/online/index.html';
?>
Ik denk dat je mijn vraag niet heb begrepen. maar het volledige php gedeelte (zie hieronder) moet in zijn geheel worden opgeslagen in een javascript localstorage. vervolgens dient de inhoud daarvan dus in het dokument worden ingevoegd!
<?php
include '../../headers/online/index.html';
?>
via een invoeg functie binnen javascript moet dus de inhoud van deze local storage in het p element met id "test". worden geplakt.
Ik heb het php gedeelte al opeslagen als volgt. maar dat werkt niet!
var test = `<?php
INCLUDE '../../forms/form_output/paul2.html';
?>`;
Precies waar ik voor vreesde in mijn bewerkte bericht. :P
Het is ook vrij logisch dat dit niet werkt. Want PHP draait op de serverlaag, en localstorage op de onderliggende cliënt laag. Die heeft geen weet van PHP.
[size=xsmall]Toevoeging op 13/03/2025 19:10:07:[/size]
Opsich heeft de uitvoer van PHP al plaatsgevonden. Dus het zou moeten werken. Al snap ik niet waarom je het zo complex maakt. Ik ken simpele CMS structuren. Heb je ooit een templatesysteem (bijv. Twig of Smarty) overwogen?
nou het cms systeem is al bijna klaar. heb ook en formbuilder. maar wil vanuit html nog een link maar naar een formulier. kan dit doen via shortcodes. op zich werkt dat goed. alleen ik krijg de shortcode nog niet goed in de pagina geplakt als het ware. wellicht dat ik hier toch maar even verder induik om dit goed te krijgen. dacht met php import dat het eenvoudig met copy en paste te doen zou zijn.
bedankt voor jullie reacties. Ben toch maar met shortcodes aan de gang gegaan. mest de shortcode gewoon copy paste doen. ook nog een apart javascript aangemaakt die de shortcodes op de pagina uitleest en een php import van alle formulieren. de shortcode geeft het formulier dan netjes weer. moet aleen nog even het script aanpassen zodat ik het formulier kan uitlijnen en fontkleur tekst kn aanpassen etc.. Dat komt goed. aan de andere kant zou ik toch willen proberen al is het voor andere doeleinden hoe ik een php import in de html kan plakken. had dit voor elkaar, maar op 1 of andere manier werkt de import niet. na ja in ieder geval heb nu een andere oplossing
Ikzelf ben momenteel ook bezig met een systeem om met shortcodes widgets in pagina's toe te voegen. Het moet met de volgende shortcodes gaan werken, die uiteraard eenvoudig via een config-file uitbereidbaar zijn:
Zelf gebruik ik CKeditor 4, en met wat aangepaste instellingen (die ik even moet opzoeken op een andere computer) worden deze tags binnen de editor geaccepteerd. Ook moeten er dan widgets voor komen die je in de WYSIWYG-weergave ziet, een placeholder dus met een plaatje van een X, Youtube-logo, poll etc, of misschien zelfs dynamisch met de juiste data. Dan heb je meteen een overzicht dat er in ieder geval een widget gebruikt wordt.
Misschien kan jij of kunnen anderen er wat mee. Als ik een testcase werkend heb (staat niet op een hoog pitje hier) dan zal ik eens kijken of ik het op Github kan zetten. Ik vind het fijn om mooie projecten daar op te plaatsen.
onderstaande het stukje javascript voor uitlezen van shortcodes binnenin het document. Wellicht heb je er wat aan.
<script>
document.addEventListener("DOMContentLoaded", function() {
replaceShortcodes();
});
function replaceShortcodes() {
alert("laatste nieuwe shortcodefunctie");
const regex = /\[(form|content) id="(form_\w+|content_\w+)"\]/g;
// Zoek alle tekstknopen in het document die mogelijk shortcodes bevatten
document.querySelectorAll("body, body *:not(script):not(style)").forEach(node => {
if (node.childNodes.length === 1 && node.childNodes[0].nodeType === 3) { // Check of het een tekstknoop is
let text = node.childNodes[0].nodeValue;
let match;
while ((match = regex.exec(text)) !== null) {
const elementId = match[2]; // Haal ID uit shortcode
const element = document.getElementById(elementId);
if (element) {
// Maak een tijdelijke div en plaats de nieuwe content erin
let tempDiv = document.createElement("div");
tempDiv.innerHTML = element.outerHTML;
// Vervang de tekstnode met de echte HTML
node.replaceChild(tempDiv.firstElementChild, node.childNodes[0]);
}
}
}
});
}</script>
[size=xsmall]Toevoeging op 15/03/2025 12:32:47:[/size]
tijdens het script worden alle shortcodes beginnende met form_ en content_ doorgelopen.
Maar waarom eigenlijk in javascript, en niet serverside? Ik heb best wel mijn twijfels of dit wel goed is voor de SEO? En ook de accessibility (denk aan screenreaders) zullen het hier heel moeilijk mee hebben.
