Tinymce 5 inline editor
Dat lukt voor de helft: na het klikken in de div verschijnt de editor op de gewenste manier.
Maar een gewijzigde versie van de inhoud krijg ik met geen mogelijkheid in m'n php script.
Middels gebruik van de <textarea> tag krijg ik de editor permanent te zien, maar dat wil ik nu juist niet vandaar de keuze voor de inline optie.
De inhoudelijke update in het php script werkt echter naadloos.
Kent iemand dit probleem; en nog beter: Hoe kom ik er langs?
Dit is een lastig en complex probeem: de reproductie ervan vereist alle code van het gehele (test) project, dat is veel.
In de kern komt het neer op:
1.
Bij gebruik van een <textarea> doet tinymce 5 z'n werk naar behoren en zorgt ervoor dat hij (zij?) de aangepaste inhoud van het tekstgebied via de super global $_POST naar het PHP-script stuurt. Maar dat betekent dat ik dan drie van die uiterst lelijke editors op m'n HTML-pagina moet dulden; en ik krijg ze met geen mogelijkheid weg. De inline optie is niet beschikbaar voor de <textarea> versie.
2.
Het gebruik van <div> tags levert middels de inline optie een mooie presentatie van de editor. De editor verschijnt pas als je op de betreffende <div> klikt. Helemaal goed en precies wat ik wil. Maar, tot dusver zie ik met geen mogelijkheid kans om de aangepaste inhoud van de editor in een element van $_POST te krijgen. Dat ligt natuurlijk aan mij want ze zullen bij tinymce toch niet zo dom zijn om dit over het hoofd te zien? (Verwacht ik, hoop ik).
Is dit nu typisch een geval van: Als het niet kan zoals ik het wil; dan moet ik het maar willen zoals het kan?
Of, heeft iemand dit al eens vóór mij opgelost?
Of bedoel je dat het niet mogelijk is om meerdere WYSIWYG-velden te tonen, die initieel verborgen zijn onder een knop ofzo? Dat zou ik dan weer meer in de richting van de identificatie en naamgeving van de velden zelf zoeken. Die velden mogen bijvoorbeeld niet allemaal dezelfde naam/hetzelfde id hebben.
Als je je zaken aan de invoerkant oplost dan zou de uitvoer ook goed moeten zijn, lijkt mij.
Aan de andere kant, waarom zou je met twee verschillende varianten blijven werken? Het zou consistenter zijn als alles gewoon ofwel WYSIWYG is ofwel "rauwe" tekst? Heb je (per se) een combinatie nodig?
En zoals @Ariën aangeeft zou een "werkend" voorbeeld handiger zijn, waarbij je aangeeft wat je anders wilt of uitlegt wat niet werkt zoals jij wilt.
Desnoods met screenshots en wat snippets code, je hoeft hier niet alle code te dumpen of ergens een online voorbeeld te hebben. Maar dat zou natuurlijk wel handiger zijn.
Gewijzigd op 04/10/2019 16:31:37 door Thomas van den Heuvel
https://ibb.co/v1JTjV0
Het plaatje zonder zichtbare presentatie van de editor, is zonder dat er op de inhoud van de div is geklikt.
Het plaatje met zichtbare presentatie verschijnt als je op de te wijzigen tekst in de div klikt.
De code die dit feest bereikt is:
Toevoeging op 04/10/2019 17:56:11:
Nou, dit is duidelijk NIET de code die ik heb geplakt.
Gewijzigd op 05/10/2019 11:54:57 door Jan Kila
te klikken, en je kan je code tussen [code] en [/code] plaatsen, zodat deze in een geheel codeblok komt te staan met regelnummering en dergelijke.In de Veelgestelde Vragen staat halverwege een overzicht met alle opmaakcodes die op de site gelden.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<?php
//$sidebar = $_GET['sidebar'];
//$sidebar = 'false';
$excerpt = 'Initiele tekst';
//$excerpt = $_POST['excerpt'];
?>
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE - Setup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TinyMCE Inline Editing Mode Guide</h1>
<?php //echo '<h3>Sidebar: ' . $sidebar . '</h3>'; ?>
<?php
if(isset($_POST) && (!empty($_POST['phpVar']))) {
var_dump($_POST);
};
?>
<form action="index.php" method="post">
<div id="excerpt-container">
<h2>Excerpt:</h2></br>
<div id="excerpt">
<div class='wide-editor' id='excerpt'>
<?php echo $excerpt; ?>
</div>
</div>
</div>
<!--
<textarea class="wide-editor" name="excerpt" id="excerpt">
<?php //echo $excerpt; ?>
</textarea>
</div>
<input type="submit" id="excerpt" value="Edit this Post" >
<?php //if($sidebar === 'false'): ?>
<div id='wide-container'>
<h2>Content:</h2></br>
<div id="wide-content">
<div class='wide-editor' id='wide-content'>
Click here to edit the content!
</div>
</div>
<?php //else: ?>
<div id='container-package'>
<div style="float: left;">
<h2>Content:</h2></br>
<div id="small-content">
Click here to edit the content!
</div>
</div>
<div style="float: left;">
<h2>Sidebar:</h2></br>
<div id="sidebar">
Click here to edit the content!
</div>
</div>
</div>
<?php //endif; ?>
-->
<input type="hidden" name="excerpt" value="<?php echo $excerpt; ?>">
<input type="submit" name="submitBtn" id="SubmitBtn" value="Post It">
</form>
<!-- Put javascript in the footer -->
<script>//alert('js is working')</script>
<script src="js/jquery.min.js"></script>
<script src="js/tinymce/tinymce.min.js"></script>
<script src="js/tinymce/init-tinymce.js"></script>
<script src="js/script.js"></script>
</body>
</html>
//$sidebar = $_GET['sidebar'];
//$sidebar = 'false';
$excerpt = 'Initiele tekst';
//$excerpt = $_POST['excerpt'];
?>
<!DOCTYPE html>
<html>
<head>
<title>TinyMCE - Setup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>TinyMCE Inline Editing Mode Guide</h1>
<?php //echo '<h3>Sidebar: ' . $sidebar . '</h3>'; ?>
<?php
if(isset($_POST) && (!empty($_POST['phpVar']))) {
var_dump($_POST);
};
?>
<form action="index.php" method="post">
<div id="excerpt-container">
<h2>Excerpt:</h2></br>
<div id="excerpt">
<div class='wide-editor' id='excerpt'>
<?php echo $excerpt; ?>
</div>
</div>
</div>
<!--
<textarea class="wide-editor" name="excerpt" id="excerpt">
<?php //echo $excerpt; ?>
</textarea>
</div>
<input type="submit" id="excerpt" value="Edit this Post" >
<?php //if($sidebar === 'false'): ?>
<div id='wide-container'>
<h2>Content:</h2></br>
<div id="wide-content">
<div class='wide-editor' id='wide-content'>
Click here to edit the content!
</div>
</div>
<?php //else: ?>
<div id='container-package'>
<div style="float: left;">
<h2>Content:</h2></br>
<div id="small-content">
Click here to edit the content!
</div>
</div>
<div style="float: left;">
<h2>Sidebar:</h2></br>
<div id="sidebar">
Click here to edit the content!
</div>
</div>
</div>
<?php //endif; ?>
-->
<input type="hidden" name="excerpt" value="<?php echo $excerpt; ?>">
<input type="submit" name="submitBtn" id="SubmitBtn" value="Post It">
</form>
<!-- Put javascript in the footer -->
<script>//alert('js is working')</script>
<script src="js/jquery.min.js"></script>
<script src="js/tinymce/tinymce.min.js"></script>
<script src="js/tinymce/init-tinymce.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Toevoeging op 04/10/2019 18:58:50:
OK, dit tenminste leesbaar.
Ten tweede: als je iets POST via AJAX ($.post) dan moet je natuurlijk het formulier niet alsnog POSTen. Na het uitvoeren van $.post is het nog steeds "business as usual". Dus als je niet aangeeft dat het formulier na afloop niet gesubmit moet worden (omdat je dit dus al via AJAX had gedaan) dan wordt je formulier alsnog gesubmit. En dan zit je POST data in "excerpt" of wat dan ook, en niet in "pvpVar". Het was dus ook niet zo handig om die empty($_POST['phpVar']) conditie op te nemen voor het dumpen van $_POST, je belemmert hier zelf in wezen de debugging van $_POST mee, en dan had je direct gezien dat er dingen misgaan.
Je bent ook niet zozeer geïnteresseerd in het klikken op een button, maar op het submitten van het formulier zelf. DAT moet je afvangen. Een betere check zou dan ook de volgende zijn:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<title>jQuery form submit test</title>
</head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<body>
<form id="myForm" action="ajax.php" method="POST">
<input type="text" name="woops" id="woops">
<button type="submit">go</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#myForm').submit(function(e) { // capture the submit event
e.preventDefault(); // do not go through with default behavior (actually submitting the form)
$.post(
'ajax.php',
{
'ajaxWoops': $('#woops').val()
},
function(data) {
alert('done');
}
);
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<title>jQuery form submit test</title>
</head>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<body>
<form id="myForm" action="ajax.php" method="POST">
<input type="text" name="woops" id="woops">
<button type="submit">go</button>
</form>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$('#myForm').submit(function(e) { // capture the submit event
e.preventDefault(); // do not go through with default behavior (actually submitting the form)
$.post(
'ajax.php',
{
'ajaxWoops': $('#woops').val()
},
function(data) {
alert('done');
}
);
});
});
//]]>
</script>
</body>
</html>
ajax.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Als je dus die "e" en "e.preventDefault()" weglaat dan zul je zien dat er een element "woops" (oorspronkelijke naam in form) en niet "ajaxWoops" in het POST array zit. En je komt ook bij ajax.php uit omdat dat de action was.
Gewijzigd op 04/10/2019 23:23:25 door Thomas van den Heuvel
Dank voor de reactie en de les!
Je zegt onder meer: 'En dan zit je POST data in "excerpt" of wat dan ook, en niet in "pvpVar".'
Ik zit mezelf in de weg, dat is duidelijk. Maar ja: soms weet je niet wat je niet weet.
Ik snap niet alles van wat je schrijft; ik ga er mee aan de slag in het vertrouwen dat het kwartje gaat vallen.
'Ajax', tot dusver kende ik het alleen als voetbalclub.
Nogmaals dank.
Toevoeging op 05/10/2019 12:31:15:
Thomas,
Ik heb je code nagelezen en begrijp wat er gebeurd.
Je laatste zinnen zijn wat cryptisch:
1.
"Als je (dus) die "e" en "e.preventDefault()" weglaat, dan zul je zien dat er een element "woops" (oorspronkelijke naam in form) en niet "ajaxWoops" in het POST array zit."
Wil je dit nog toelichten?
2.
"En je komt ook bij ajax.php uit omdat dat de action was."
Vanzelf sprekend, denk ik dan, dat is immers de bedoeling van dat mechanisme. Of: bedoel je iets anders?
Toevoeging op 05/10/2019 12:48:05:
Thomas,
Nu snap ik ook wel waarom ik nooit bij AJAX ben uitgekomen. Deze link: https://www.w3schools.com/xml/ajax_intro.asp geeft duidelijk aan dat AJAX data van een server haalt; en dat doe ik in mijn applicatie niet.
Het verhaal tot nu toe stijft mij in de overtuiging dat TinyMCE hier iets laat liggen. Of: ik heb het in hun documentatie (of wat daar voor doorgaat) niet gevonden.
Het normale gedrag bij het submitten van een formulier is dat je dus wegnavigeert van A waarbij je alles naar B POST. Ingeval van een AJAX-request moet je dit standaard gedrag dus blokkeren (e.preventDefault()) omdat je in wezen het POSTen zelf handmatig uitvoert via $.post. Als je dus voor de AJAX-aanpak kiest is het dus NIET de bedoeling dat je wegnavigeert van de huidige pagina, anders schiet je namelijk je doel voorbij.
Met AJAX kun je trouwens zowel informatie ophalen als wegschrijven, het verkeer kan beide kanten opgaan. Als je informatie wegschrijft krijg je ook vaak terugkoppeling of dit gelukt is of niet.
Maar de vraag is dus, wil je gebruik maken van AJAX-requests, of wil je de normale "flow" volgen.
Daarbij nog het volgende, als je dan toch van de standaard manier van POSTen gebruik maakt is het een goede gewoonte om na afloop van de verwerking (in pagina B) direct weg te navigeren naar een andere pagina (zeg C). Dit is ook wel bekend als het POST/redirect/GET patroon. Al deze acties (A - het tonen van het formulier, B - het verwerken van het formulier, C - een of andere resultaat- of terugkoppelingspagina) zouden voor de goede orde ook volledig gescheiden moeten zijn.
Dit heeft wel gevolgen voor de administratie. Als je namelijk in de verwerking van je POST-data zit (B) en daar blijkt bij validatie dat de data om een of andere reden niet voldoet, dan zul je deze (onvolledige of niet kloppende) data weer op een of andere manier terug moeten stoppen in je formulier (A) en de gebruiker de melding geven dat deze zijn data moet aanvullen of aanpassen. En hiertoe zul je dus een algemeen stramien moeten introduceren die voorschrijft hoe je omgaat met formulieren en hoe je informatie weer (terug) overhevelt in je formulier indien nodig.
Maar dit is dus een gevolg van het wegnavigeren van een pagina, dit introduceert de noodzaak om informatie te "redden" (tijdelijk opslaan voor later gebruik), want er wordt standaard niets onthouden van een vorig request. Als je van A wegnavigeert naar B dan weet B niet dat je afkomstig bent van A. Je zou dus de informatie in een sessie kunnen stoppen om deze weer in het formulier in te voeren.
En als je hier geen zin in hebt dan zou je dus kunnen opteren voor de AJAX-aanpak, je hoeft hier geen informatie te "redden" omdat je nooit wegnavigeert van de invoerpagina, tenzij dus via de terugkoppeling van het wegschrijven via een AJAX POST het signaal wordt gegeven dat dit is gelukt.
Lijkt me wel dat je eerst voor een van de twee methoden kiest, en dan gaat uitzoeken hoe je dat fatsoenlijk opzet.
Hangt er ook een beetje vanaf hoe groot je applicatie is en hoeveel formulieren je in zijn totaliteit hebt.
Het zou al kunnen helpen als je, los van wat voor techniek dan ook, stap voor stap beschrijft wat alles functioneel zou moeten doen.
Gewijzigd op 05/10/2019 20:59:55 door Thomas van den Heuvel
Dank voor de uitgebreide reactie.
Wat me nog bezig houdt - en voor een vraag stelt:
1.
In ajax.html vul ik in: banaan; en druk op go.
2.
De output van ajax.php is dan:
$_POST:
Array
(
[woops] => banaan
)
[end]
Dat verandert niet als ik in ajax.html de regel: e.preventDefault(); uit-commentarieer.
Hoe zit dat?
Voorts is dit een uitstekende basis om in test-project verder te experimenteren: Dank!
Als je van de AJAX-methode gebruik maakt navigeer je nooit weg van index.php tenzij de javascript je hiertoe instrueert naar aanleiding van de terugkoppeling van de AJAX-POST (de anonieme callback functie function(data) { ... }, het derde argument van $.post).
Ik zou het voorbeeld eventueel kunnen uitbreiden om dit (beter) te demonstreren.
Het geheel is dus een geautomatiseerd samenspel tussen JavaScript aan de client-zijde en PHP aan de server-zijde, terwijl de gebruiker op index.php wacht op terugkoppeling na het invullen en versturen van het formulier.
In de variant zonder AJAX is dit het normale schaakspel tussen browser en server (request en response), waarbij elke volgende stap zich op een "aparte" pagina afspeelt.
In wezen gebeurt in beide varianten precies hetzelfde, wat iets verschilt is wat een gebruiker hiervan ziet.
Gewijzigd op 06/10/2019 17:11:13 door Thomas van den Heuvel
Dank voor de hulp, de les en - vooral - je vasthoudendheid.
Ik laat dit onderwerp nu even voor wat het is en verschuif 'AJAX' naar zijn voor mij oorspronkelijke status (die van van voetbalclub).
TinyMCE versie 5 laat ik definitief voor wat het is; het doet gewoon niet wat het beloofd. Of: ik snap er echt helemaal niets van.
Ik ga CKEditor downloaden en zien of dat "out of the box" wél doet wat ik wil; dan kan ik verder met m'n project. TinyMCE heeft me al een week gekost, nu vind ik het welletjes. CKEditor ken ik van Drupal en ik vertrouw erop dat het nog steeds min of meer het zelfde is.
Dit is de link naar hetgeen ik wilde bereiken: https://ibb.co/QFs94YS
Dit is de code die dat doet:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div id="excerpt-container">
<h3>Excerpt:</h3>
<div class='wide-editor' >
<textarea id="excerpt" name="excerpt" rows="5" cols="100">
<?php echo $excerpt; ?>
</textarea>
<script>CKEDITOR.replace('excerpt', {toolbarStartupExpanded : false})</script>
</div>
</div>
<?php if( empty($sidebar)): // ======================================= ?>
<div id='wide-container'>
<h3>Content:</h3>
<div class='wide-editor' id='wide-content'>
<textarea id="content" name="content" rows="5" cols="100">
<?php echo $content; ?>
</textarea>
<script>CKEDITOR.replace('content',
{toolbarStartupExpanded : false, height: 400})
</script>
</div>
</div>
<?php else: // Now there is a sidebar ================================?>
<div id='container-package'>
<div style="float: left;">
<h3>Content:</h3>
<div id="small-content">
<textarea id="content" name="content" rows="5" cols="100">
<?php echo $content; ?>
</textarea>
<script>CKEDITOR.replace('content',
{toolbarStartupExpanded : false,
width: 920, height: 400})
</script>
</div>
</div>
<div style="float: left;">
<h3>Sidebar:</h3>
<div id="div-sidebar">
<textarea id="sidebar" name="sidebar" rows="5" cols="100">
<?php echo $sidebar; ?>
</textarea>
<script>CKEDITOR.replace('sidebar',
{toolbarStartupExpanded : false,
width: 460, height: 400})
</script>
</div>
</div>
</div>
<?php endif; // ======================================================?>
<h3>Excerpt:</h3>
<div class='wide-editor' >
<textarea id="excerpt" name="excerpt" rows="5" cols="100">
<?php echo $excerpt; ?>
</textarea>
<script>CKEDITOR.replace('excerpt', {toolbarStartupExpanded : false})</script>
</div>
</div>
<?php if( empty($sidebar)): // ======================================= ?>
<div id='wide-container'>
<h3>Content:</h3>
<div class='wide-editor' id='wide-content'>
<textarea id="content" name="content" rows="5" cols="100">
<?php echo $content; ?>
</textarea>
<script>CKEDITOR.replace('content',
{toolbarStartupExpanded : false, height: 400})
</script>
</div>
</div>
<?php else: // Now there is a sidebar ================================?>
<div id='container-package'>
<div style="float: left;">
<h3>Content:</h3>
<div id="small-content">
<textarea id="content" name="content" rows="5" cols="100">
<?php echo $content; ?>
</textarea>
<script>CKEDITOR.replace('content',
{toolbarStartupExpanded : false,
width: 920, height: 400})
</script>
</div>
</div>
<div style="float: left;">
<h3>Sidebar:</h3>
<div id="div-sidebar">
<textarea id="sidebar" name="sidebar" rows="5" cols="100">
<?php echo $sidebar; ?>
</textarea>
<script>CKEDITOR.replace('sidebar',
{toolbarStartupExpanded : false,
width: 460, height: 400})
</script>
</div>
</div>
</div>
<?php endif; // ======================================================?>
Eenvoudig redelijk snel en voor iedereen te begrijpen; CKEditor is voor mij nog steeds een 'winner'.