Weboldal készítés, internetes alkalmazások fejlesztése

Tinymce html editor telepítése, beállítása

A Tinymce 5 html editor letölthető itt:

http://download.tiny.cloud/tinymce/community/tinymce_5.0.3.zip

A magyar nyelvi fájl letölthető itt:

https://www.tiny.cloud/get-tiny/language-packages/

Telepítés:

A letöltött editor fájlokat tömörítsd ki, majd másold fel a weboldalad gyökerébe, pl. tinymce mappába (almappa már ne legyen).

A weboldalad <head></head> szekciójába tedd be az editor működéséhez szükséges fájl elérési útját. Ha a fenti fájlt töltötted le, akkor valahogy így néz ki ez a sor:

<script src='tinymce/js/tinymce/tinymce.min.js'></script>

Ezután ugyanebbe a részbe kell tenni az editor konfigurációját meghatározó bejegyzéseket, mint az eszköztár, a mérete, kép feltöltéshez szükséges adatok...

<script>
  tinymce.init({
    selector: '#textarea_teljes', //a form textarea ezt az id-t kell, hogy kapja
		language: 'hu_HU', //alapértelmezett nyelv
		
        //kép feltöltésekor a teljes elérési útvonalat rögzíti (abszolut url). Ennek akkor van jelentősége, ha emailben kell kiküldeni egy képet tartalmazó szöveget
        relative_urls : false, 
		remove_script_host : false,
		convert_urls : true,
        
		images_upload_url: 'postAcceptor.php', //a kép kezelését végző fájl
		images_upload_base_path: '/kepek', //a képeket tartalmazó mappa a gyökérhez képesti útvonal
		images_upload_credentials: true,
    
		plugins: 'image code anchor link fullscreen insertdatetime media wordcount visualchars',
    toolbar: 'undo redo | styleselect | bold italic | image code anchor link alignleft aligncenter alignright forecolor backcolor fullscreen insertdatetime media wordcount visualchars',
		
		width: 700,
		height: 500,
    menubar: 'file edit insert view format table tools help',
		//Itt pedig a kép feltöltését kezelő kódsorok vannak:
		images_upload_handler: function (blobInfo, success, failure) {
		var xhr, formData;
		xhr = new XMLHttpRequest();
		xhr.withCredentials = false;
		xhr.open('POST', 'postAcceptor.php');
		xhr.onload = function() {
			var json;

			if (xhr.status != 200) {
			failure('HTTP Error: ' + xhr.status);
			return;
			}
			json = JSON.parse(xhr.responseText);

			if (!json || typeof json.location != 'string') {
			failure('Invalid JSON: ' + xhr.responseText);
			return;
			}
			success(json.location);
		};
		formData = new FormData();
		//A következő sorban a fileName(blobInfo) helyett blobInfo.filename()
		formData.append('file', blobInfo.blob(), fileName(blobInfo));
		xhr.send(formData);
		}
  });
  </script>

Nyelv telepítése:

A fent letöltött nyelvi fájlt tömörítsd ki, és másold a tinymce\js\tinymce\langs\ mappába. A fájl neve hu_HU.js lesz.

És akkor jöjjön a form:

<form method="post">
<textarea id="textarea_teljes" name="uj_leiras"> </textarea> //az id értéke ugyanaz, amit fent megadtunk az editor configjában
<input type="submit" value="Mehet" />
</form>

A képek feltöltéséhez kell egy feltöltést kezelő külső fájl, aminek a nevét ugyancsak meghatároztuk már fent, az a fájl a postAcceptor.php. A fájl tartalma pedig:

/*A kép feltöltés csak az itt meghatározott domainekre engedélyezett*/
  $accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");

  /*A feltöltendő képekk mappája a gyökérhez képest*/
  $imageFolder = "kepek/";

  reset ($_FILES);
  $temp = current($_FILES);
  if (is_uploaded_file($temp['tmp_name'])){
    if (isset($_SERVER['HTTP_ORIGIN'])) {
      // a fenti domainek érvényesek csak, ha nincs megadva a működési hely fent, akkor nem engedélyezi a feltöltést
      if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
      } else {
        header("HTTP/1.1 403 Origin Denied");
        return;
      }
    }

    // bemeneti fájlnév struktúrájának ellenőrzése
    if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
        header("HTTP/1.1 400 Invalid file name.");
        return;
    }

    // A kiterjesztés ellenőrzése (tuti kép legyen)
    if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
        header("HTTP/1.1 400 Invalid extension.");
        return;
    }

    // A célmappa, és a fájl eredeti nevének változóba tétele
    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);

    
    echo json_encode(array('location' => $filetowrite));
  } else {
    // Szerver hiba eseteén a válasz
    header("HTTP/1.1 500 Server Error");
  }

Szolgáltatások

Weboldal készítés - Szombathely

Internetes alkalmazások fejlesztése

Keresőoptimalizálás - SEO

Domain, tárhely

frommeweb

Adatkezelési tájékoztató

Weboldal készítés kapcsolat

info@fromme.hu

36703346491

alpoktrans.hu - atriumhaz-szombathely.hu - novadom.hu - caffewest.com - cery.hu - betonlab.hu - kapuvaribringaut.hu - cargoprofil.hu - perfektfehernemu.hu - csehimindszenti-iskola.hu - designtheworld.hu - egyetemi-menza.hu - foldmeres-dunantul.hu