how to change upload path in froala wysiwyg

问题:

I'm working on project which used Froala 2.4.0 WYSIWYG editor. I'm using xampp and localhost test. I can't use local path for upload images and files, all file and image upload in: https://i.froala.com/ But I want upload all file and image to http://localhost/uploads

How to do? I tried in froala website but I cannot do it.

回答1:

for upload image : - create "uploads" directory in localhost, - create "images" directory in uploads, - create a php file "upload_image.php" in localhost with this content:

<?php
// Allowed extentions.
$allowedExts = array("gif", "jpeg", "jpg", "png", "blob");

// Get filename.
$temp = explode(".", $_FILES["file"]["name"]);

// Get extension.
$extension = end($temp);

// An image check is being done in the editor but it is best to
// check that again on the server side.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

if ((($mime == "image/gif")
|| ($mime == "image/jpeg")
|| ($mime == "image/pjpeg")
|| ($mime == "image/x-png")
|| ($mime == "image/png"))
&& in_array(strtolower($extension), $allowedExts)) {
    // Generate new random name.
    $name = sha1(microtime()) . "." . $extension;

    // Save file in the uploads folder.
    move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "/uploads/images/" . $name);

    // Generate response.
    $response = new StdClass;
    $response->link = "http://localhost/uploads/images/" . $name;
    echo stripslashes(json_encode($response));
}
   ?>

and add this script plugin to your editor page :

<script type="text/javascript" src="froala_editor_directory/js/plugins/image.min.js">

and edit "image.min.js" change imageUploadURL parameter to:

imageUploadURL:"http://localhost/upload_image.php",

and repeat all step for file upload : - create "files" directory in uploads, - create a php file "upload_file.php" in localhost with this content:

<?php
// Get filename.
$temp = explode(".", $_FILES["file"]["name"]);

// Get extension.
$extension = end($temp);

// An image check is being done in the editor but it is best to
// check that again on the server side.
// Do not use $_FILES["file"]["type"] as it can be easily forged.
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mime = finfo_file($finfo, $_FILES["file"]["tmp_name"]);

$allowedExts = array(
    'pdf', 
    'doc', 
    'docx', 
    'xls', 
    'xlsx'
);

$allowedMimeTypes = array(
    'application/x-pdf', 
    'application/pdf',
    'application/msword', 
    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'application/vnd.ms-excel', 
    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
);

if (in_array(strtolower($extension), $allowedExts) AND in_array($mime, $allowedMimeTypes)) {
    // Generate new random name.
    $name = sha1(microtime()) . "." . $extension;

    // Save file in the uploads folder.
    move_uploaded_file($_FILES["file"]["tmp_name"], getcwd() . "/uploads/files/" . $name);

    // Generate response.
    $response = new StdClass;
    $response->link = "http://localhost/uploads/files/" . $name;
    echo stripslashes(json_encode($response));
}
  ?>

and add this script plugin to your editor page :

<script type="text/javascript" src="froala_editor_directory/js/plugins/file.min.js">

and edit "file.min.js" change fileUploadURL parameter to:

fileUploadURL :"http://localhost/upload_file.php",

Good luck :)