Autor Zpráva
Hitman
Profil
Už si docela dlouhou dobu lámu hlavu nad vložením jednoduchého nahrávače obrázků do editoru TinyMCE. Používám TinMCE v. 4.3 (tinymce.cachefly.net/4.3/tinymce.min.js). Tady jsem našel nějaké informace o nahrávači obrázků:

www.tinymce.com/docs/demo/local-upload

www.tinymce.com/docs/get-started/upload-images

Ale ať se snažím jak se snažím, pořád se mi nedaří můj jednoduchý TinyMCE nahrávač spustit. Dokázal by mi někdo po lopatě vysvětlit jak takto funkce funguje? Resp. jak ji použít tak aby se mi obrázek nahrál do určité složky a vložil do editoru, nic víc nepotřebuji. Ještě by bylo fajn kdyby se vytvořil náhled - zmenšená verze obrázku.


Mám pouze jednoduchý kód:

<script type="text/javascript" src="//tinymce.cachefly.net/4.3/tinymce.min.js"></script>
<script type="text/javascript">


        tinymce.init({
                        selector: "textarea",
                        plugins: [
                                        "image",
                                        "code fullscreen",
                        ],
                        toolbar: "image code",

Díky moc.
pcmanik
Profil
Hitman:
Ja používam tento kód (uprav si zvýraznené časti a malo by ti to ísť):
tinymce.init({
        selector: '',
        plugins: 'image code',
        toolbar: 'image | code fullscreen',
        file_picker_types: 'image',
        images_upload_url: '',
        images_upload_base_path: '',
        images_upload_credentials: true,
        automatic_uploads: true,
        file_picker_callback: function(cb, value, meta) {
            var input = document.createElement('input');

            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            input.onchange = function() {
                var file = this.files[0],
                    reader = new FileReader();

                reader.readAsDataURL(file);

                reader.onload = function () {
                    var blobCache =  tinymce.activeEditor.editorUpload.blobCache,
                        blobInfo = blobCache.create('blobid' + (new Date()).getTime(), file, reader.result);

                    blobCache.add(blobInfo);

                    cb(blobInfo.blobUri(), { title: file.name });
                };
            };

            input.click();
        }
    });
Hitman
Profil
Něco podobného už jsem zkoušel - v editoru vše funguje, obrázek se vloží. Ale když článek uložím, obrázek se uloží jako:

<img src="data:image/jpeg;base64,data:image/jpeg;base64,/9j/4AAQ..............TISÍC DALŠÍCH ZNAKŮ...............aEf/2Q==" alt="" width="200" height="150">

Natavil jsem projistotu absolutní adresy, doufám že to nevadí:

images_upload_url: 'https://mujweb.cz/postAcceptor.php',
images_upload_base_path: 'https://mujweb.cz/test/',

Soubor postAcceptor.php jsem použil z dostupných souborů na TinyMCE webu (zvýrazněné jsem upravil):

<?php
  /*******************************************************
   * Only these origins will be allowed to upload images *
   ******************************************************/
  $accepted_origins = array("https://localhost", "https://mujweb.cz");

  /*********************************************
   * Change this line to set the upload folder *
   *********************************************/
  $imageFolder = "https://mujweb.cz/test/";

  reset ($_FILES);
  $temp = current($_FILES);
  if (is_uploaded_file($temp['tmp_name'])){
    if (isset($_SERVER['HTTP_ORIGIN'])) {
      // same-origin requests won't set an origin. If the origin is set, it must be valid.
      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;
      }
    }

    /*
      If your script needs to receive cookies, set images_upload_credentials : true in
      the configuration and enable the following two headers.
    */
    // header('Access-Control-Allow-Credentials: true');
    // header('P3P: CP="There is no P3P policy."');

    // Sanitize input
    if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
        header("HTTP/1.1 400 Invalid file name.");
        return;
    }

    // Verify extension
    if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
        header("HTTP/1.1 400 Invalid extension.");
        return;
    }

    // Accept upload if there was no origin, or if it is an accepted origin
    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);

    // Respond to the successful upload with JSON.
    // Use a location key to specify the path to the saved image resource.
    // { location : '/your/uploaded/image/file'}
    echo json_encode(array('location' => $filetowrite));
  } else {
    // Notify editor that the upload failed
    header("HTTP/1.1 500 Server Error");
  }
?>
Hitman
Profil
Případně pokud někdo víte o jednoduchém editoru, který obsahuje upload obrázků, netrvám na TinyMCE, tam se mi to stále nedaří dostat....Díky
T-fon
Profil
Zkus Summernote + Návod na upload obrázků

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: