Nette a TinyMCE – image upload

majo1
Člen | 103
+
0
-

Dobrý deň,
v Nette používam na editovanie príspevkov TinyMCE 5. No neviem, ako spojazdniť nahrávanie obrázkov. Nepotrebujem žiadny file manager, ide hlavne o samotné nahratie obrázka na server cez TinyMCE toolbar.
Vedel by mi s týmto niekto pomôcť?
Vopred ďakujem a prajem pekný deň.

dakur
Člen | 493
+
+2
-

@majo1 Ahoj, TinyMCE má v konfiguraci property images_upload_url – tam nastavíš odkaz na libovolný signal/view/presenter/komponentu. O odeslání obrázku z editoru se stará TinyMCE samo.

tinymce({
  image_upload_url: {link //Upload:default},
});

(přesnou syntaxi tinymce inicializace si nepamatuju, ale zvládneš dosadit)

Potom si v presenteru/komponentě nahraný soubor vytáhneš:

/** @var FileUpload[] $files */
$files = $this->getHttpRequest()->getFiles();

a libovolně zpracuješ. Vrátíš odkaz na nahraný obrázek:

$this->sendJson([
	'location' => $this->link('whatever'),
]);

Viz https://www.tiny.cloud/…mage-upload/#…

My používáme tinymce v4, ale ve v5 to bude podobné.

Editoval dakur (20. 4. 2020 14:59)

majo1
Člen | 103
+
0
-

@dakur , ďakujem pekne za odpoveď a za navedenie správnym smerom :)

Inicializujem,

tinymce.init({
...
  image_advtab: true,
  image_upload_url: {link Admin:tinymceInsertImage},
  });

Vytvoril som si presenter, kde pracujem s obrázkom, bez vyšperkovania..

	public function tinymceInsertImage(): void
	{
		/** @var FileUpload[] $files */

			$insertedImage = $this->getHttpRequest()->getFiles();
		/* cesty */
			$uploadPath = $this->context->parameters['wwwDir'] . '/uploads/stranky/'; // pre nahravanie obrazkov
			$pathToImage = '/uploads/stranky/'; // pre zapis do DB
		/* patterny */
			$uniqid = uniqid();
			$file_name_image = $uniqid . '-' . Strings::webalize($insertedImage->getName(), '.');
		/* ulozenie obrazka */
			$file->move($uploadPath . $file_name_image);
		/* zmensenie obrazka */
			$image = Image::fromFile($uploadPath . $file_name_image);
			$image->resize(2000, 2000, Image::FIT);
			$image->save($uploadPath . $file_name_image, 80, Image::JPEG);
		/* odoslanie cesty do TinyMCE */
			$link = $pathToImage . $file_name_image;
			$this->sendJson([
				'location' => $this->link($link),
			]);

	}

no podľa https://www.tiny.cloud/…ocal-upload/ by sa mala zobraziť v editore možnosť uploadu, no nie je to tak.

Editoval majo1 (20. 4. 2020 16:15)

chemix
Nette Core | 1294
+
0
-

@majo1 tak to vypada zatim na problem u Tiny, pokud si to nastavit podle dema co posilas odkaz tak se ti tam uploudovaci moznosti zobrazi? Tim bych asi zacal. A pak odebral to fake zpracovani a nastavil spravnou adresu. A koukal do JS console zda, nehlasi nejakou chybu.

majo1
Člen | 103
+
0
-

páni, chyba bola u mňa – v inicializácií TinyMCE:

tinymce.init({

image_advtab: true,
imageS_upload_url: {link Admin:tinymceInsertImage},
 });

Hnusný preklep.. :D
Ďakujem vám za cenné rady :)

Editoval majo1 (21. 4. 2020 0:55)

dakur
Člen | 493
+
+2
-

@majo1 K tomu je dobrý TypeScript, který to hlídá za tebe. Na rozjetém projektu není úplně med to rozjet, ale na novém projektu typovaný javascript stojí za to, pokud tam v JS děláš víc než jen inicializuješ third-party komponentu.

Editoval dakur (3. 6. 2020 9:11)