froala editor富文本编辑器实现图片本地上传

froala editor是国外的一款富文本编辑器，外观优雅，功能丰富。https://www.froala.com/wysiwyg-editor

在默认情况下，编辑器中的图片是上传到官方服务器上的，24小时后图片会自动删除，只能做测试用。因此我们需要将图片上传到我们自己的服务器。

其实官方文档已经给出了图片本地上传的方法：https://www.froala.com/wysiwyg-editor/docs/server/php/image-upload

但是我如果我不想使用文档里的图片上传方法，比如我用的是框架里的图片上传，那怎么办呢？

在这之前别忘了根据文档对js代码进行修改，然后找到文档中给出的下列php代码。

// Generate response.
$response = new \StdClass;
$response->link = $protocol.$_SERVER["HTTP_HOST"].dirname($_SERVER["PHP_SELF"]).$fileRoute . $name;

此代码的功能是获取图片路径并以json形式传递，我们只要根据自己的情况对此代码进行修改即可。

其中$fileRoute.$name是图片文件名，我们将其改成我们自己写的文件名。在$fileRoute.$name之前是文件所在目录，文档中是获取到了我们线上服务器的目录，若是我们自己本地测试，改成本地的相对路径即可。

以下是我自己写的图片上传代码，仅供参考

<?php
class Upload
{
    public function image($dir)
    {
        // 允许上传的图片后缀
        $allowedExts = array("gif", "jpeg", "jpg", "png");
        $temp = explode(".", $_FILES["file"]["name"]);
        // echo $_FILES["file"]["size"];
$extension = end($temp);     // 获取文件后缀名
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 2048000)   // 小于 2000 kb
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "错误：: " . $_FILES["file"]["error"] . "<br>";
    } else {
        if (file_exists($dir.$_FILES["file"]["name"])) {
            echo $_FILES["file"]["name"] . " 文件已经存在。 ";
        } else {
            // 如果 upload 目录不存在该文件则将文件上传到 upload 目录下
            move_uploaded_file($_FILES["file"]["tmp_name"], $dir . $_FILES["file"]["name"]);
            $rand = mt_rand();
            $time = time();
            $filename = $rand."_".$time.".$extension";
            rename($dir.$_FILES["file"]["name"], $dir.$filename);
            return $filename;
        }
    }
} else {
    return 0;
}
    }
}

然后传入文件上传路径并返回文件名：

$img = new Upload();
$filename = $img -> image('../uploads/');

接下来对将文件路径返回json数据的代码进行修改（uploads是我个人存放图片的路径）

$response = new \StdClass;
$response->link = 'uploads/'.$filename;

总体代码：

<?php
require('../class/upload.php');
$img = new Upload();
$filename = $img -> image('../uploads/');

$response = new \StdClass;
$response->link = 'uploads/'.$filename;
echo stripslashes(json_encode($response));

总结：

只要将输出json数据代码上方的文件上传代码替换为自己想要的文件上传代码，并将json数据进行修改即可实现本地上传。

froala editor富文本编辑器实现图片本地上传

猜你喜欢