Tinymce 5 inline editor

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jan Kila

Jan Kila

03/10/2019 21:56:18
Quote Anchor link
Al een paar dagen doe ik ernstig m'n best om de TinyMCE 5 inline editor aan het werk te krijgen.
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?
 
PHP hulp

PHP hulp

29/03/2024 13:54:01
 
- Ariën  -
Beheerder

- Ariën -

03/10/2019 21:58:35
Quote Anchor link
Heb je een testcase die we kunnen bekijken en wat relevante code?
 
Jan Kila

Jan Kila

04/10/2019 13:22:19
Quote Anchor link
Dank voor de reactie.
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?
 
- Ariën  -
Beheerder

- Ariën -

04/10/2019 14:06:41
Quote Anchor link
Ik wil dan toch graag een testcase zien om het te zien. Ik kan mij nu geen voorstelling maken wat er gebeurt. En wat relevante code is ook erg handig.
 
Thomas van den Heuvel

Thomas van den Heuvel

04/10/2019 16:30:24
Quote Anchor link
Ah, je wilt de textarea gewoon als textarea blijven gebruiken, naast andere WYSIWYG-velden waar wel de editor wordt toegepast? Ik denk dat dit een kwestie is van initialisatie van TinyMCE is. Je moet TinyMCE dan (nauwkeuriger) vertellen op welke velden deze van toepassing zoud moeten zijn.

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
 
Jan Kila

Jan Kila

04/10/2019 16:56:54
Quote Anchor link
Hoe plaats ik een screenshot?
 
- Ariën  -
Beheerder

- Ariën -

04/10/2019 17:43:25
Quote Anchor link
Via imgBB.com uploaden en de link hier plaatsen.
 
Jan Kila

Jan Kila

04/10/2019 17:54:26
Quote Anchor link
https://ibb.co/TwV7ZgS
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
 
- Ariën  -
Beheerder

- Ariën -

04/10/2019 18:22:51
Quote Anchor link
Als je de verkeerde code plaatst, dan kan je je bericht aanpassen door op Afbeelding 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.
 
Jan Kila

Jan Kila

04/10/2019 18:58:24
Quote Anchor link
In de herhaling:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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>


Toevoeging op 04/10/2019 18:58:50:

OK, dit tenminste leesbaar.
 
Thomas van den Heuvel

Thomas van den Heuvel

04/10/2019 22:55:55
Quote Anchor link
Allereerst: in bovenstaande code zitten dubbele id's. Verdere correcte werking is dus sowieso al discutabel omdat je HTML document niet in orde is.

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)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


ajax.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
header('Content-Type: text/html; charset=UTF-8');

function
escape($in) {
    return htmlspecialchars($in, ENT_QUOTES, 'UTF-8');
}

function
dump($in) {
    if (is_array($in)) {
        $in = print_r($in, true);
    }

    echo '<pre>'.escape($in).'</pre>';
}


if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    dump($_POST);
}

?>
[end]

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
 
Jan Kila

Jan Kila

05/10/2019 12:08:46
Quote Anchor link
Thomas,
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.
 
Thomas van den Heuvel

Thomas van den Heuvel

05/10/2019 14:28:20
Quote Anchor link
Normaal gesproken navigeer je naar een nieuwe pagina wanneer je op een hyperlink klikt of een formulier submit. Stel je zit dus op pagina A met een formulier die je POST naar pagina B. Na submitten zit je op pagina B. Bij een AJAX-request zit je op pagina A en blijf je op pagina A, terwijl in de achtergrond de data wordt gePOST naar pagina B. Dat is het verschil tussen de twee.

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
 
Jan Kila

Jan Kila

05/10/2019 19:14:31
Quote Anchor link
Oeps, dat is een flinke boterham; en dat vraagt om even goed na te denken.
Dank voor de uitgebreide reactie.
 
Thomas van den Heuvel

Thomas van den Heuvel

05/10/2019 22:37:07
Quote Anchor link
Als het slechts één of enkele formulieren betreft kan het eventueel wel wat meer "houtje touwtje" maar het staat wel zo netjes als het formulier, de validatie en de verdere afhandeling gewoon goed in elkaar zit. Plus je hebt dan na afloop wat beter in de vingers hoe je netjes met formulieren zou moeten omgaan.
 
Jan Kila

Jan Kila

06/10/2019 13:18:39
Quote Anchor link
Thomas,
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!
 
Thomas van den Heuvel

Thomas van den Heuvel

06/10/2019 17:06:55
Quote Anchor link
Mijn bovenstaande voorbeeld bestaat uit twee delen: het HTML-document (noem dit index.php oid), en het bestand voor de afhandeling van een AJAX-POST (ajax.php). Een gebruiker roept nooit rechtstreeks ajax.php aan, dit gebeurt indirect, via javascript, op de achtergrond.

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
 
Jan Kila

Jan Kila

07/10/2019 11:20:17
Quote Anchor link
Thomas,
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.
 
Jan Kila

Jan Kila

08/10/2019 13:02:57
Quote Anchor link
Even ter afsluiting.
Dit is de link naar hetgeen ik wilde bereiken: https://ibb.co/QFs94YS

Dit is de code die dat doet:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
        <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; // ======================================================?>

Eenvoudig redelijk snel en voor iedereen te begrijpen; CKEditor is voor mij nog steeds een 'winner'.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.