wysiwyg editor in nette forms

kolaloka

Hallo, I would like to implement a simple wysiwig editor into nette forms to format the “Text” field.

Here is how to load the wysiwyg:

<script src="trumbowyg/dist/trumbowyg.min.js"></script>

Here is the form:

protected function createComponentPostForm(): Form
    {
        $form = new Form;
        $form->addText('title', 'Title:')->addRule($form::MAX_LENGTH, 'Nadpis nesmí být přes 48 znaků', 48)->setRequired();
        $form->addTextArea('post', 'Text:')
            ->addRule($form::MAX_LENGTH, 'Text příspěvku nesmí být přes 512 znaků', 512)
            ->setRequired();
        $form->addSubmit('send', 'Add');
        $form->onSuccess[] = [$this, 'postFormSucceeded'];
        return $form;
    }`

I wonder where and how to implement it in the form?

Thank you
Petr

Marek Bartoš

From docs I assume trumbowyg needs only some selector on html element, so:

$form->addTextArea('post', 'Text:')
	->getControlPrototype()->setAttribute('id', '');

Alternatively add it directly to html element with manual rendering https://doc.nette.org/…ms/rendering#…

kolaloka

Hi Marek,
I understand what you write, but I do not know how to do it in practise, can you be more explicit?

case 1.
How do I tell the form where to get the Attribute?

case 2. if explicitly,I would have a line like this where would I exactly incorporate the script in the form? :

<div>
		<label n:name=post>Text: <input n:name=post size=20 autofocus></label>
	</div>

Once more sorry for my being so limited, but I really have no idea.

Pepino

Did you initialize wysiwyg by $('TEXTAREA_SELECTOR').trumbowyg(); ?

kolaloka

No, I did not, Where would this code go? In the presenter?

Pepino

From documentation.. https://alex-d.github.io/…cumentation/

<-- Import jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>

<-- Import Trumbowyg -->
<script src="trumbowyg/dist/trumbowyg.min.js"></script>

<-- Init Trumbowyg -->
<script>
    // Doing this in a loaded JS file is better, I put this here for simplicity
    $('TEXTAREA_SELECTOR').trumbowyg();
</script>

kolaloka

Yes I have got the Import Query in my latte, but I did not know where to put the INIT.

Thank you, I will test it.