CKEditor a nefunkční JS validace

honzakuchar napsal(a):

Pokud se to odešle, tak PHP validace fungovat bude.

jj, diky, myslel jsem si že ano. Nicméně mě zaráží, že nefunguje ta JS validace. Mám pocit, že tu snad bylo nějaké takové podobné vlákno, ale nemohl jsem to najít. Mám dojem, že se tam psal něco o tom, že si to ten CKEditor nějak cachuje (jinými slovy, že do odeslání nenaplňuje fyzicky tu textarea). Tedy by se to snad měl dát nějak zjistit obsah CKEditoru nějakou jeho funkcí a ten obsah pak předat našmu JScriptu? Zdá se mi to ale celé nějaké složité a raději bych, aby to fungovalo standartním způsobem..

Nevíte někdo jak to provést?

Editoval Endrju (5. 3. 2010 15:07)

V továrničce můžeš ke konci definice formuláře s editorem přidat:

<?php
$form->getElementPrototype()->onsubmit('CKEDITOR.instances["'.$form['content']->getHtmlId().'"].updateElement()');
?>

kde $form[‚content‘] je nějaká textarea. Dělá to přesně to, co je zapotřebí – ještě před JS validací to uloží obsah editoru do textarea, které nahrazuje. Pak JS validace funguje. Předpokládá to vytváření instance CKEditoru nahrazením textarea podle jejího id.

Trochu jsem jeste patral v samples dodanych u CKEditoru a zjistil jsem nasledujici:

V souboru /ckeditor/_samples/api.html je nasledujici JS funkce, ktera vraci obsah editoru:

function GetContents()
{
	// Get the editor instance that we want to interact with.
	var oEditor = CKEDITOR.instances.editor1; // editor1 predstavuje ID textarea - tedy muj 'content'

	// Get the editor contents
	alert( oEditor.getData() );
}

Kdyz tuto funkci upravim pouzitim funkce getText(), tak bude vracet inner text tech HTML prvku.

Ovsem v popisu metody mimo jine sotji: Only in IE (which uses innerText) nebude to pusobit potize v jinych prohlizecich? (ve Firefoxu mi to jde)

Kod pak bude vypadat takto:

function GetContents()
{
	// Get the editor instance that we want to interact with.
	var oEditor = CKEDITOR.instances.editor1;

	// Get the editor contents
	var html = oEditor.getData();

	if  (html == '')
	{
  		alert( 'Editor neobsahuje zadny text (zadejte text)' );
	}
	else
	{
	    var element = CKEDITOR.dom.element.createFromHtml( oEditor.getData() );
		alert( element.getText() );  // "Sample text."
	}
}

Ted ale jak tohle zpracovat (upravit), abych to mohl v tovarnicce na formular pouzit nejak takto:

$form->onSubmit[] = array($this, 'GetContents');

Dekuji za napady

Editoval Endrju (5. 3. 2010 16:43)

No a nemuze byt spatne ten zapis:

$form->getElementPrototype()->onsubmit('CKEDITOR.instances["'.$form['content']->getHtmlId().'"].updateElement()');

protoze, kdyz se podivam do HTML zdroje, tak pak mam ve formulari vygenerovano toto:

<form ... onsubmit="CKEDITOR.instances[&quot;frm-content&quot;].updateElement()" name="frm-newsForm">

Endrju napsal(a):

No a nemuze byt spatne ten zapis:

$form->getElementPrototype()->onsubmit('CKEDITOR.instances["'.$form['content']->getHtmlId().'"].updateElement()');

protoze, kdyz se podivam do HTML zdroje, tak pak mam ve formulari vygenerovano toto:

<form ... onsubmit="CKEDITOR.instances[&quot;frm-content&quot;].updateElement()" name="frm-newsForm">

použij '. Tj.

$form->getElementPrototype()->onsubmit('CKEDITOR.instances[\''.$form['content']->getHtmlId().'\'].updateElement()');

Editoval honzakuchar (5. 3. 2010 17:10)

Updatoval jsem příspěvek #11

honzakuchar napsal(a):

Updatoval jsem příspěvek #11

Jo, upravil jsem to tak a vysledne HTML je:

<form ... onsubmit="CKEDITOR.instances['frm-content'].updateElement()" name="frm-newsForm">

Ale porad to nefunguje.

Kdyz v API je u updateElement() napasno, ze by kod mel byt CKEDITOR.instances.editor1.updateElement();, tak nemelo by to vysledne HTML vypadat spise takto:

<form ... onsubmit="CKEDITOR.instances.frm-content.updateElement()" name="frm-newsForm">

Nicmene tohle jsem zkousel taky a nic.

Tak jsem zkusil takovy experiment a napsal do tovarnicky na formluar:

$form->getElementPrototype()->onsubmit('alert(\'ahoj\');');

coz vygeneruje:

<form ... onsubmit="alert('ahoj');" name="frm-newsForm">

ale po submit formulare to tento alert stejne nevypise. Neni neco spatne uplne nekde jinde? Nebo cela myslenka?

Hmm, tak jsem zjistil, že ani má situace není ideální. S tím zápisem mi to pozná, že obsah toho elementu není prázdnej (asi teda nějak záhadně, budu muset prozkoumat, co se tam vlastně děje), ale složitější validační pravidla (jako třeba minimální délka textu) mi taky nefungují. Ještě se na to teda taky blíž podívám.

nějak jsem si to spojil s jiným příspěvkem, takže jsem do toho zamíchal i ajax.. takže co sem napsal je asi blbost. Nicméně se zeptám, nepoužíváš ajaxové formuláře? Pokud ne, je opravdu divné, že se ti nespustí ani ten alert v onsubmit.

Endrju :

Zkoušel sem to na Nette 1.0dev s CKEditorem 3.2 a funguje to naprosto bez problému.

Tharos napsal(a):
Hmm, tak jsem zjistil, že ani má situace není ideální. S tím zápisem mi to pozná, že obsah toho elementu není prázdnej (asi teda nějak záhadně, budu muset prozkoumat, co se tam vlastně děje), ale složitější validační pravidla (jako třeba minimální délka textu) mi taky nefungují. Ještě se na to teda taky blíž podívám.

To že ti nefunguje minimální délka textu a další věci je naprosto normální a není na tom moc co zkoumat. Pokud napíšeš v CKEditoru jen jedné písmeno „A“ tak se validace bude chovat následovně.

Min 3 znaky - Projde
Max 5 znaků - Neprojde
Min 8 znaků - Projde
Min 9 znaků - Neprojde

K validaci přijdou data už jako html tedy A = <p>A</p> v tom je celá nesrovnalost.

Trochu jsem porovnaval vygenerovane HTML zdrojaky a pak zkousel upravovat tovarnicku na formular. Zjistil jsem, co dela problem (coz vola po dalsim reseni – viz. tucny text na konci prispevku..).

Vsimete si v kodu toho, co jsem zakomentoval (->setValidationScope(NULL)):

	protected function createComponentNewsForm()
	{
		$form = new AppForm;

		$renderer = $form->getRenderer();
		$renderer->wrappers['label']['container'] = NULL;

		$form->addTextArea('content')
			->addRule(Form::FILLED, 'Vyplňte aktualitu prosím.');

		$form->addSubmit('save', 'Uložit')->getControlPrototype()->class('default');
		$form->addSubmit('cancel', 'Zrušit');//->setValidationScope(NULL);

		$this->template->textareaId = $form['content']->getHtmlId();

		$form->getElementPrototype()->onsubmit('CKEDITOR.instances["'.$this->template->textareaId.'"].updateElement()');

		$form->onSubmit[] = callback($this, 'newsFormSubmitted');


		$form->addProtection('Odešlete formulář znovu prosím (bezpečtnostní token vypršel).');
		return $form;
	}

To, ze je na tlacitko „Zrusit“ nastaveno setValidationScope(NULL); zpusobi, validacni JS je mapovan na submit tlacitko „Pridat“ na udalost onClick. HTML pak kod vypada takto:

<form action="/SK_Celadna/document_root/admin/news/add/?do=newsForm-submit" method="post" onsubmit="CKEDITOR.instances[&quot;frm-content&quot;].updateElement()" name="frm-newsForm">
	<table>
		<tr class="required">
			<label class="required" for="frm-content">
			</label>
			<td>
				<textarea cols="40" rows="10" name="content" id="frm-content"></textarea>
				<!-- Zde na tomto miste je kod CKEditoru ... ten k tomu co chci ukazat nepotrebujem -->
			</td>
		</tr>
		<tr>
			<td>
				<input type="submit" class="default button" onclick="return nette.validateForm(this)" name="save" id="frmnewsForm-save" value="Přidat" />
				<input type="submit" class="button" name="cancel" id="frmnewsForm-cancel" value="Zrušit" />
			</td>
		</tr>
	</table>
	<div>
		<input type="hidden" name="_token_" id="frmnewsForm-_token_" value="102e4bf43d9635e3abfbcd136a6c6842" />
	</div>
</form>

No a v tom je, zda se, kamen urazu.

Kdyz totiz v tovarnicce zakomentuju setValidationScope(NULL); na tlacitku „Zrusit“, jak je uvedeno vyse, tak validacni JS, ktery byl mapovan na submit tlacitko „Pridat“ na udalost onClick se presune na element „form“ do udalosti onSubmit a pak to „funguje“. HTML kod pak vypada takto:

<form name="frm-newsForm" onsubmit="CKEDITOR.instances[&quot;frm-content&quot;].updateElement();return nette.validateForm(this)" method="post" action="/SK_Celadna/document_root/admin/news/add/?do=newsForm-submit">
	<label for="frm-content" class="required">
	</label>
	<table>
		<tbody>
			<tr class="required">
				<td>
					<textarea id="frm-content" name="content" rows="10" cols="40" style="visibility: hidden; display: none;"></textarea>
					<!-- Zde na tomto miste je kod CKEditoru ... ten k tomu co chci ukazat nepotrebujem -->
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" value="Přidat" id="frmnewsForm-save" name="save" class="default button">
					<input type="submit" value="Zrušit" id="frmnewsForm-cancel" name="cancel" class="button">
				</td>
			</tr>
		</tbody>
	</table>
	<div>
		<input type="hidden" value="102e4bf43d9635e3abfbcd136a6c6842" id="frmnewsForm-_token_" name="_token_">
	</div>
</form>

Schvalne jsem napsal do uvozovek, ze to funguje, protoze to porad neni dobre reseni.

Kdyz ted stisknu tlacitko „Zrusit“, tak se stale provadi JS validace. Validace je totiz nyni mapovana na cely formular (v udalosi onSubmit ve formulari) a protoze tlacitko „Zrusit“ je take typu sumbmit, tak vyvolava JS validaci.

Ted by me zajimalo, zda je dobry napad, aby bylo ve formulari vice submit tlacitek nez jen to jedine, ktere slouzi pro odeslani formulare?

Paklize ano (muze byt takova situace, kdy to tak budu chtit), tak by JS validace by mela byt mapovana prave a jen na stisknuti submit tlacitka „Pridat“ tak, jak tomu je ve vychozim reseni z distribuce NetteFramework-0.9.3-PHP5.2\examples\CD-collection.

Tedy otazka k reseni zni: Jak presunout JS validaci jen na submit tlacitko „Pridat“ tak, aby vysledne HTML vypadalo nasledovne (jen dedukuju, ze takto by to asi melo vypadat)?

<form action="/SK_Celadna/document_root/admin/news/add/?do=newsForm-submit" method="post" name="frm-newsForm">
	<table>
		<tr class="required">
			<label class="required" for="frm-content">
			</label>
			<td>
				<textarea cols="40" rows="10" name="content" id="frm-content"></textarea>
				<!-- Zde na tomto miste je kod CKEditoru ... ten k tomu co chci ukazat nepotrebujem -->
			</td>
		</tr>
		<tr>
			<td>
				<input type="submit" class="default button" onclick="CKEDITOR.instances[&quot;frm-content&quot;].updateElement();return nette.validateForm(this)" name="save" id="frmnewsForm-save" value="Přidat" />
				<input type="submit" class="button" name="cancel" id="frmnewsForm-cancel" value="Zrušit" />
			</td>
		</tr>
	</table>
	<div>
		<input type="hidden" name="_token_" id="frmnewsForm-_token_" value="102e4bf43d9635e3abfbcd136a6c6842" />
	</div>
</form>

Editoval Endrju (6. 3. 2010 18:09)

Etch: moc diky, nevedel jsem, ze to jde primo takto krasne a jednoduse :)!

Editoval Endrju (7. 3. 2010 4:18)

@na1k Toto řešení by se mi zamlouvalo, ale bohužel mi nefunguje. Problém je v tom, že netteForms.js si onsubmit event zaregistrují jiným způsobem než jquery, což pak ve výsledku vede k tomu, že se validace v netteForms.js provede před voláním updateElement(), bez ohledu na to, v jakém pořadí načtu tyto javascripty (z toho, co jsem k tomu našel, je toto pořadí relevantní jen v případě použití jquery).

Co funguje, je inline zápis onsubmit u tagu form (který má, jak se zdá, přednost před jinak zaregistrovanými event handlery), ale dal bych přednost unobtrusive javascriptu a tam vidím cestu buď v přepisu netteForms.js tak, aby používalo pro registraci eventů jquery (existuje už taková varianta netteForms.js?), nebo přidáním callbacku onBeforeValidate do netteForms.js.

Nebo existuje lepší řešení, které jsem přehlédl?