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"); }