Propojení WYSIWYG editoru TinyMCE s formulářem v presenteru

BaruCepa

Zdravím, snažím se v rámci administrace stránek jednoho projektu zapojit WYSIWYG editor TinyMCE pro jednodušší správu obsahu stránek. Samotný formulář je v EditorPresenteru :

<?php
protected function createComponentEditorForm(): Form
	{
		$form = new Form;
		$form->addText('id', 'id');
		$form->addText('titulek', 'Titulek')
				->setRequired();
		$form->addText('menu', 'Menu');
		$form->addText('nadrazeny', 'Nadřazená stránka');
		$form->addInteger('poradi_admin', 'Pořadí v administraci')
				->setRequired();
		$form->addTextArea('obsah', 'Obsah')
				->setAttribute('cols', 80)
				->setAttribute('rows', 15)
				->setHTMLAttribute('class', 'tinyarea')
				->setRequired();

		return $form;
	}
?>

A zde šablona, ve které WYSIWYG má bežet :

{block content}
<div class='alert alert-secondary' role='alert'><h1>Editace stránky: {$page->id}</h1></div>
	{control editorForm}
	<button class= 'btn btn-primary' name="ulozit"><i class="fa-solid fa-floppy-disk"></i> Uložit</button>
{/block}

{block scripts}
	<script src="{$basePath}/www/tinymce/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
	<script type="text/javascript">
		tinymce.init({
			selector: '.tinyarea'
		});
	</script>
{/block}

Snažím se TinyMCE přišpendlit na TextArea přes class, ale při rozjetí na localhostu žádná změna, TinyMCE editor neběží, stále vizuál standardního formuláře.
Co mi uniká, co chybí?

nightfish

@BaruCepa
Zkontroloval bych, že:

textarea ve vygenerovaném HTML má vskutku třídu tinyarea
načítá se javascript tinymce
v JS konzoli v prohlížeči se nevypisuje žádná chyba

BaruCepa

nightfish napsal(a):

@BaruCepa
Zkontroloval bych, že:

textarea ve vygenerovaném HTML má vskutku třídu tinyarea

načítá se javascript tinymce

v JS konzoli v prohlížeči se nevypisuje žádná chyba

Takže

je v pořádku, dle DevTools třída sedí
přiznám se, že nevím, jak vyhodnotit, v DevTools v místě kódu, kde by měl být odkaz na tinymce.min.js je
src=‚/editace?id=uvod&_tracy_bar=js&v=2.10.3&XDEBUG_SESSION_STOP=1‘
opět nevím, kde přesně hledat JS konzoli, mohu poprosit o navigaci?

nightfish

@BaruCepa
Pojďme na bod 3 – JS konzole je v Developer Tools (v Google Chrome po zmáčknutí F12, záložka Console/Konzole; ve Firefoxu taktéž F12, záložka Console/Konzole).

Pokud tam bude vidět něco jako Uncaught ReferenceError: tinymce is not defined, tak to znamená, že se tinymce.min.js z nějakého důvodu nenačetl. (Dá se v Developer Tools kouknout na záložku „Network“ a podívat se, jestli tam je vidět nějaké načítání souboru tinymce.min.js a jestli neskončí chybou 404.

Pokud v konzoli nebude vidět nic, tak to znamená, že se tinymce načetl a měl by fungovat.

BaruCepa

@nightfish
Tak jsem to tušila správně. Console úplně prázdná, Network taktéž, takže by všechno mělo být v pořádku.
Může mít na toto vliv Docker?

dms

Možná bude jednodušší vložit tiny přes https://www.jsdelivr.com/ nebo jiné cdn s js baličky. Je to myslím že i doporučovaná cesta než hostovat tyhle common knihovny u sebe na serveru

Lumeriol

Nebyl bych si tak jist, že ta inicializace selectoru je správně.
Myslím tím tu tečku v „selector: ‚.tinyarea‘“, jelikož dle dokumentace je třeba uvést buď jméno elementu (tedy selector: ‚textarea‘) a nebo konkrétního elementu

selector: 'textarea.tinyarea' // v případě identifikace přes třídu elementu
// nebo
selector: 'textarea#tinyarea' // v případě identifikace přes ID elementu

Koukal jsem zběžně na dokumentaci v3 a v6, kde je to identicky.

BaruCepa

@dms @Lumeriol
Tak jsem zkusila úpravu dle Lumeriola, do selectoru jsem doplnila element textarea a výsledek žádný.
Zkusila jsem i vložit tiny přes jsDelivr, výsledek opět žádný, DevTools ale nehlásí žádný problém s načítáním JS.
Jelikož jsem podezřívala Docker, našla jsem, že se má TinyMCE přidat rovnou do PHP Dockerfile. Jdu vyzkoušet.

dms

To je kravina – PHP s tím nemá nic společného. Viz tady úplně nejvíc basic example co musí být v HTML aby to fungovalo.

https://jsfiddle.net/jkvrhxq6/

nightfish

@BaruCepa
Zkus upravit

<script type="text/javascript">
    tinymce.init({
        selector: '.tinyarea'
    });
</script>

na

<script type="text/javascript">
    tinymce.init({
        selector: '.tinyarea'
    });
    alert('tinymce init');
</script>

Po načtení stránky by ti mělo vyskočit dialogové okno s nápisem „tinymce init“. Pokud nevyskočí, tak to znamená jednu ze tří věcí:

blok scripts se nevykreslí (tzn. že jej nemáš nikde v layoutu)
blok scripts se vykreslí, ale není v něm volání alert – pak by mohlo stačit smazat nacachované šablony (to je věc, která by potenciálně mohla souviset s Dockerem – že by se nemusel správně detekovat debug mode Tracy; zobrazuje se ti Tracy lišta?)
JS kód spadne již na volání tinymce.init() – v takovém případě by ale mělo být něco vidět v JS konzoli

Pokud alert správně vyskočí, tak nevím.

BaruCepa

@dms
Dobře, rozumím, ale ani tento nejvíc basic example nevyřešil můj problém. Textareu mám definovanou v presenteru v rámci formu, definovala jsem jí třídu ‚tinyarea‘, na kterou se snažím chytit tiny (viz popis úplně nahoře). Vykopala jsem tiny z projektu, snažím se vložit přes cdn, ale výsledek pořád žádný. Projekt je dockerizovaný, nevím, zda má nebo nemá vliv, nejspíš tedy nemá. Zkusila jsem inicializaci i přes ID místo třídy, výsledek nijaký. Určitě je to nějaká úplná blbost, nějaká drobnost, no opravdu nevím, jaká, uniká mi.

BaruCepa

@nightfish
Upravila jsem podle tvé rady, alert se neobjevil. Docker je nejspíš dobře, Tracy lišta se zobrazuje, jak má. JS konzole je čistá. Blok scripts v layoutu opravdu nemám, tam stačí jednoduše include, předpokládám?

Lumeriol

BaruCepa napsal(a):

@nightfish
Upravila jsem podle tvé rady, alert se neobjevil. Docker je nejspíš dobře, Tracy lišta se zobrazuje, jak má. JS konzole je čistá. Blok scripts v layoutu opravdu nemám, tam stačí jednoduše include, předpokládám?

To možná bude ono. Pokud nemáš v Layoutu definovaný block Scripts, nemůže se do něj propsat blok ze šablony, kterou používáš (stejně jako máš definovaný blok Content v layoutu).
Tím pádem se ti nenačte obsah toho bloku a nikde ve stránce se nezavolá javascript s TinyMCE.

Editoval Lumeriol (6. 11. 2023 12:21)

BaruCepa

@Lumeriol
Super, to je to, co mi utíkalo. Akorát když jsem includovala scripts do layoutu, Nette latte mi vyhodí chybu undefined block

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Administrace</title>

	<link rel="stylesheet" href="{$basePath}/css/admin.css">

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>

	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
</head>
<body>
	<div class="admin-body">
		{include content}
		{include scripts}
	</div>
</body>
</html>

Nejsem si jistá, jestli to nedávám do blbýho místa, ačkoliv dle editor.latte by to mělo být pod blokem content. Případně proč vyhodnotil blok scripts jako nedefinovaný.

nightfish

@BaruCepa Mělo by stačit do layoutu místo {include scripts} dát {block scripts}{/block}.

EDIT: viz dokumentaci k layoutu/blokům

Editoval nightfish (6. 11. 2023 12:55)

BaruCepa

Paráda, konečně tiny funguje :) Moc děkuji za pomoc, rady a vysvětlení, zase jsem o něco chytřejší :)

nightfish

@BaruCepa Abys byla ještě chytřejší, tak si dovolím jednu radu k „Network taktéž, takže by všechno mělo být v pořádku“.

Panel Network právěže prázdný být nesmí. Musí tam být vidět, co všechno se načetlo. Je s ním drobný problém – když načteš stránku a pak až otevřeš DevTools, tak se v Network panelu nic neobjeví. Je potřeba nejdřív otevřít DevTools (stačí na libovolné záložce) a pak teprve načíst stránku.

Dalším důvodem, proč by byl DevTools prázdný, může být aktivní filtr (např. si zafiltruješ na AJAX požadavky a v rámci vykreslení stránky se žádný AJAX nezavolá).

Obecně bych doporučil kouknout na nějaké video k tomu, jak Network panel funguje a co se s ním dá dělat – umí to být velmi užitečné jak při hledání problémů s načítáním knihoven/stylů, tak i debuggováním AJAX požadavků.

BaruCepa

@nightfish
Díky moc, já se pak v DevTools ještě hrabala a zjistila jsem, že záložku Network jsem měla nejdřív prázdnou, protože jsem ji neaktivovala stisnutím ctrl+R, jak mě vybízela. Když jsi dal tip s alertem, konečně jsem si i začala pořádně všímat, co všechno Network ukazuje, nekoukala jsem jen po kódu 4xx, který by poukázal na nějaký problém a zjistila, že právě tiny se tam vůbec nenačetl, protože se nedostal do layoutu, samozřejmě. Teď už tam je všechno pěkně vidět, i tiny. Každopádně děkuji za odkaz na video i dokumentaci, určitě projdu, ať chyby neopakuju :) Občas je to porod, než v hlavě všechno zapadne na své místo, ale stojí to za tu radost, když pak všechno funguje, jak má. Jsem opravdu vděčná, jak tohle fórum funguje, kolik vás tu je připravených pomoct, poradit i podat kritiku.