wysiwyg editor in nette forms
- kolaloka
- Member | 69
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š
- Nette Blogger | 1165
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
- Member | 69
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
- Member | 249
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>