使用TinyMCE上传图像和文件

时间:2016-12-14 20:46:23

标签: tinymce tinymce-4

在我的symfony2项目中,我在我的textareas中使用TidyMCE,以便能够从后端插入新闻。新闻可以在内容或文件链接中显示要显示的pdf文件。我是新手,我无法上传图像或文件,因此我可以搜索不同的文件夹,一旦选择了副本就可以在服务器上进行。

我一直在看很多评论,但我有点捆绑了。我在网上看到了以下代码的tinymceel:

基本本地文件选择器

  tinymce.init({
  selector: '#editor',
  plugins: 'image code',
    toolbar: 'undo redo | link image | code',
    // enable title field in the Image dialog
    image_title: true, 
    // enable automatic uploads of images represented by blob or data URIs
    automatic_uploads: true,
    // URL of our upload handler (for more details check:       https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
    images_upload_url: 'postAcceptor.php',
    // here we add custom filepicker only to Image dialog
    file_picker_types: 'image', 
    // and here's our custom image picker
    file_picker_callback: function(cb, value, meta) {
      var input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('accept', 'image/*');

      // Note: In modern browsers input[type="file"] is functional without 
      // even adding it to the DOM, but that might not be the case in some older
      // or quirky browsers like IE, so you might want to add it to the DOM
      // just in case, and visually hide it. And do not forget do remove it
      // once you do not need it anymore.

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

        // Note: Now we need to register the blob in TinyMCEs image blob
        // registry. In the next release this part hopefully won't be
        // necessary, as we are looking to handle it internally.
        var id = 'blobid' + (new Date()).getTime();
        var blobCache = tinymce.activeEditor.editorUpload.blobCache;
        var blobInfo = blobCache.create(id, file);
        blobCache.add(blobInfo);

        // call the callback and populate the Title field with the file name
      cb(blobInfo.blobUri(), { title: file.name });
      };

      input.click();
    }
  });

PHP上传处理程序

 <?php
   /*******************************************************
    * Only these origins will be allowed to upload images *
    ******************************************************/
   $accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");

   /*********************************************
    * Change this line to set the upload folder *
    *********************************************/
   $imageFolder = "images/";

   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.0 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.0 500 Invalid file name.");
         return;
     }

     // Verify extension
     if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
         header("HTTP/1.0 500 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.0 500 Server Error");
   }
 ?>

但我不太明白将postAcceptor.php放在哪里或用{location: '/ your / uploaded / image / file'}引用。

我有点失落,请感谢所有可能的帮助

2 个答案:

答案 0 :(得分:0)

postacceptor是您接受文件并将其上传到服务器的服务器端方法。我正在使用mvc所以我创建了一个自定义路由&#34; ImageUpload&#34;。而我用它来代替。 location part是您方法的预期回报。当您使用images_reuse_filename = true时,这将替换文件位置/ referrer a.k.a src标记。

答案 1 :(得分:0)

我不使用交响乐,但根据您的代码,您将postAcceptor文件放在与表单相同的目录中