Question

我正在尝试使用Froala wysiwyg编辑器将图像上传到我的localhost（用于测试目的），但它无法正常工作。当我选择要上传的图像时，它在编辑器中显示为淡色，然后当我点击其他位置时消失。这是我下面的代码，以及我试图遵循的文档链接。

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

还有这种方法，但我不确定在哪里放php：https://www.froala.com/wysiwyg-editor/docs/sdks/php/image-server-upload

我的代码

（“fedit”是我用于我的textarea的课程。）

使用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>

upload_image.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

这是使用SDK for php使其在本地主机上运行的解决方案。（我正在使用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放在您的textarea所在页面的底部：

<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”时。这是我遇到的问题之一。

现在一切都应该有效。您只需在将其上传到网络服务器时修改路径即可。

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

我的代码

1 个答案: