Question

我现在已经阅读了Froala Help Docs 超过10次。我仍然无法让它发挥作用：（

当我在编辑器中单击上传图标并选择要上传的图像时，没有任何反应。弹出一个要求您选择图像的对话框，选择图像后，它会解除，但之后页面上没有任何反应。

我的代码肯定有问题。但是，我无法弄清楚它是什么。

我的观点页面：

<textarea id="edit" name="message"> </textarea>

我的js：

 $(function() {
      $('#edit').editable({
          height: 400,
          imageUploadURL: '/assets/upload_image.php',
          imageUploadParams: {id: "edit"},
          imageUploadParams: {id: "edit"},
          placeholder: "Write something...",
          inlineMode: false
      })
  });

我的upload_image.php文件：

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

// 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($extension, $allowedExts)) {
    // Generate new random name.
    $name = sha1(microtime()) . "." . $extension;

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

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

我试图解决这个问题：

在upload_image.php中，我已将上传文件夹路径（原始文件：http://localhost/assets/uploads/）替换为uploads，并在该目录中创建了一个uploads文件夹。但仍然没有运气。< / p>

我尝试将所有文件放在同一个文件夹中，但没有运气。

非常感谢任何帮助。

Answer 1

我遇到了同样的问题，我正在为你分享工作代码。

的index.php

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="css/froala_editor.css">
   <style>
    body {
      text-align: center;
    }
    div#editor {
      width: 81%;
      margin: auto;
      text-align: left;
    }
  </style>
</head>

<body>
  <div id="editor">
    <form method="post">
      <textarea id='edit' name='edit' style="margin-top: 30px;" placeholder="Type some text">
        <h1>Textarea</h1>
        <p>The editor can also be initialized on a textarea.</p>
      </textarea>

      <input name="submit" type="submit">
    </form>
  </div>

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/froala_editor.min.js"></script>  
  <script type="text/javascript" src="js/plugins/image.min.js"></script>    
  <script>
      $(function() {
        $('#edit').froalaEditor({
          height: 300
        })
      });
  </script>
</body>
</html>

upload_image.php

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

// 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 you want to check extension of a file, then please remove the below if condition */
/*if ((($mime == "image/gif")
|| ($mime == "image/jpeg")
|| ($mime == "image/pjpeg")
|| ($mime == "image/x-png")
|| ($mime == "image/png"))
&& in_array($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 = "http://localhost/test/editor-3/html/uploads/" . $name;
    echo stripslashes(json_encode($response));
//}
?>

现在打开包含javascript文件 image.min.js ，只需找到并将imageUploadURL参数更改为 upload_image.php 文件的网址，在我的情况下，它是：

imageUploadURL: "http://localhost/test/editor-3/html/upload_image.php",

Answer 2

我要在这里添加答案，因为对于一个Froala的文档来说太糟糕了。我在上传图片和文件时都遇到了多个问题，花了很多小时疯狂起来，直到几周后我终于弄清楚了这个问题，希望对别人有帮助。

第一

fileAllowedTypes: ['*']

documentation

以下Froala指定此选项将允许上载任何文件类型...错误。 Froala不会告诉您的事情是，为了能够上载任何文件类型，您必须指定文件的扩展名以及MIME类型。如果您对此选项一无所知，它将无法正常工作。它将仅允许PDF和TXT。

做什么

下载Froala SDK时，您需要先进入

wysiwyg-editor-php-sdk-master/lib/FroalaEditor/File.php //for File upload

和

wysiwyg-editor-php-sdk-master/lib/FroalaEditor/Image.php //for Image upload

在这些文件中，您会看到类似

'allowedExts' => array('zip', 'txt', 'pdf'),
'allowedMimeTypes' => array(
      'text/plain',
      'application/pdf',
      'application/zip'
)

在这里，您需要添加要允许的扩展名和MIME类型。 您必须同时指定文件的扩展名和MIME类型。

如果找不到特定文件的MIME类型，请使用this site。

我猜测这可能也适用于其他语言，或者至少是类似的解决方案，但是我可以针对php确认这一点

希望这可以帮助将来的某个人。

图片上传无效（Froala编辑器）

2 个答案: