Správné použití CKEDitor, jak na to?

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
Grelek
Člen | 233
+
0
-

Zdravím, potřebuji v editaci blogu používát CKEditor.

Problém nastává tehdy, když chci formulář odeslat. Ono tlačítko submit totiž reaguje jen, když není vyplněný titulek (provede se JavaScriptová validace), ale když není vyplněný perex nebo content, tak se nestane vůbec nic.
Nic se také neděje v případě, že jsou obě pole vyplněná.

PHP:

public function createComponentAddblogForm()
{
        //Zkráceno
        $form->addTextArea('content', 'Obsah')
                ->addRule(FORM::FILLED, 'Obsah musí být vyplněný.')
                ->setAttribute('name', 'editor2')
                ->setAttribute('class', 'ckeditor')
                ->addRule(FORM::MAX_LENGTH, 'Maximální délka obsahu je 10 000 znaků.', 10000);

        $form->addSubmit('add', 'Přidat');
        $form->onSuccess[] = callback($this, 'addblogFormSubmitted');

        return $form;
}

Latte:

<tr>
        <td class="left">{label content /}</td>
        <td>{input content}<script type="text/javascript">CKEDITOR.replace( 'editor2' );</script></td>
</tr>

Prosím o radu, případně návod, jak správně použít CKEditor v Nette Framework. Díky za všechny odpovědi.

duke
Člen | 650
+
0
-

Já používám tento zápis:

	$form->addTextArea('foo', 'Foo')
		->controlPrototype->addClass('ckedit');

… a javascript:

$(document).ready(function () {
	$("textarea.ckedit").each(function () {
		var el = $(this);
		el.attr('required', null); // fixes http://dev.ckeditor.com/ticket/8031
		el.ckeditor(
			{
				customConfig: "/js/ckeditor_config.js",
				language: $('html').attr('lang')
			}
		);
	});

	$('form').submit(function() {
		for (var inst in CKEDITOR.instances)
			CKEDITOR.instances[inst].updateElement();
	});
});
motorcb
Člen | 552
+
0
-

@**duke**:

Jak pak změním panely, které se mají zobrazit? Zarovnání textu, velikost písma, vložení obrázku,…

duke
Člen | 650
+
0
-

motorcb napsal(a):

Jak pak změním panely, které se mají zobrazit? Zarovnání textu, velikost písma, vložení obrázku,…

To se řeší v rámci konfigurace CKEditoru, tj. v mém příkladu přes soubor /js/ckeditor_config.js. Více k tomuto najdeš v dokumentaci CKEditoru.

Vkládání obrázků se pak řeší přes CKFinder (ten je však placený), či přes free open-source alternativu KCFinder. Postup jak integrovat tyto nástroje do CKEditoru najdeš na uvedených stránkách.

motorcb
Člen | 552
+
0
-

@**duke**:

Prosímtě, koukl bys mi na tenhle projekt? https://github.com/…tte-CKEditor
Nedaří se mi zprovoznit CKEditor. Textarea se nezmění v CKEditor.

Díky za nakopnutí

Console v Chrome mi hlásí:
Uncaught TypeError: Object [object Object] has no method ‚ckeditor‘

Editoval motorcb (5. 10. 2012 17:35)

nanuqcz
Člen | 822
+
0
-

motorb: Musíš ještě natáhnout adaptér pro jQuery, viz dokumentace.

duke
Člen | 650
+
0
-

Jak říká @nanuqcz… Tj. v @layout.latte bys měl mít:

<script type="text/javascript" src="{$basePath}/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="{$basePath}/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript" src="{$basePath}/js/ckeditor.js"></script>
motorcb
Člen | 552
+
0
-

Perfektní chlapi. Máte u mne pivo :)