javascript - 无法使用 Froala 编辑器将图像上传到本地服务器

Question

我正在尝试使用 Froala 所见即所得编辑器将图像上传到我的本地主机(用于测试目的)，但它不起作用。当我选择要上传的图像时，它在编辑器中显得褪色，然后在我单击其他地方时消失。下面是我的代码以及指向我也尝试遵循的文档的链接。

文档: https://www.froala.com/wysiwyg-editor/docs/concepts/image/upload

还有这个方法，但是我不知道把php放在哪里:https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload

我的代码

(“fedit”是我用于文本区域的类。)

Javascript:

<script>
  $(function() {
    $('.fedit').froalaEditor({
        // Set the image upload parameter.
        imageUploadParam: 'file',

        // Set the image upload URL.
        imageUploadURL: '/upload_image.php',

        // Additional upload params.
        imageUploadParams: {class: 'fedit'},

        // Set request type.
        imageUploadMethod: 'POST',

        // Set max image size to 5MB.
        imageMaxSize: 5 * 1024 * 1024,

        // Allow to upload PNG and JPG.
        imageAllowedTypes: ['jpeg', 'jpg', 'png']
      })
      .on('froalaEditor.image.beforeUpload', function (e, editor, images) {
        // Return false if you want to stop the image upload.
      })
      .on('froalaEditor.image.uploaded', function (e, editor, response) {
        // Image was uploaded to the server.
      })
      .on('froalaEditor.image.inserted', function (e, editor, $img, response) {
        // Image was inserted in the editor.
      })
      .on('froalaEditor.image.replaced', function (e, editor, $img, response) {
        // Image was replaced in the editor.
      })
      .on('froalaEditor.image.error', function (e, editor, error, response) {
        // Bad link.
        else if (error.code == 1) { ... }

        // No link in upload response.
        else if (error.code == 2) { ... }

        // Error during image upload.
        else if (error.code == 3) { ... }

        // Parsing response failed.
        else if (error.code == 4) { ... }

        // Image too text-large.
        else if (error.code == 5) { ... }

        // Invalid image type.
        else if (error.code == 6) { ... }

        // Image can be uploaded only to same domain in IE 8 and IE 9.
        else if (error.code == 7) { ... }

        // Response contains the original server response to the request if available.
      });
  });
</script>

上传图片.php

<?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/ " . $name);

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

Answer 1

这是使用 PHP SDK 使其在本地主机上运行的解决方案。 (我正在使用 WAMP)。感谢上面评论中的 cmorrissey 让我研究了 sdk。

在此处下载 SDK 文件: https://www.froala.com/wysiwyg-editor/docs/sdks/php

请遵循以下说明: https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload

但我会向您展示代码并提及一些我遇到的问题。

将此 javascript 放在文本区域所在的页面底部:

<script>
  $(function() {
    $('.selector').froalaEditor({
      // Set the image upload URL.
      imageUploadURL: '/mywebsite/upload_image.php'
    })
  });
</script>

请注意，您的“imageUploadURL:”(upload_image.php) 路径指向本地服务器的根目录。例如。 “http://localhost”指向的任何地方。所以在我的例子中，我的网站位于根目录的子文件夹中，因此我将放置“/mywebsite/upload_image.php”(实际上位于 C:\wamp64\www\mywebsite)。

在 upload_image.php 文件中:

<?php

// Include the editor SDK.
require 'froala/sdk/lib/FroalaEditor.php';

// Store the image.
try {
  $response = FroalaEditor_Image::upload('/mywebsite/img/uploads/');
  echo stripslashes(json_encode($response));
}
catch (Exception $e) {
  http_response_code(404);
}

?>

如您所见，我将 sdk“lib”文件夹(您在上面下载的)复制到我创建的名为“froala/sdk/”的子文件夹中。你可以把它放在任何你想放的地方。

另一个重要的快速说明是他们打错了字。在他们的示例 php 代码中，他们告诉您该文件名为“froala_editor.php”，而实际上它在下载文件中的名称为“FroalaEditor.php”。这是我遇到的问题之一。

现在一切正常。将其上传到网络服务器时，您只需修改路径即可。