TinyMCE上传图片教程

今天主要讲的是TinyMCE编辑器默认自带的图片上传，也就是TinyMCE上传单张图片教程，包括代码示例，主要是针对“图片 - 上传 - 拖放一张图片文件至此/浏览图像”这里：

一、开启并配置TinyMCE图片上传功能

要使TinyMCE编辑器能够上传图片，需要如下几步：

第1步：上传图片，首先要启用图片插件

在plugins参数中把image加进去。

第2步：在工具栏显示图片工具按钮

在toolbar参数中把image加进去。

此时，点图片按钮是没有上传选项的，只能添加图片地址。

第3步：加入配置参数images_upload_url

此参数用于指定一个接受上传文件的后端处理程序地址，例如：

images_upload_url: '/demo/upimg.php',

如果返回的地址是相对路径，还有一个参数images_upload_base_path，可以给相对路径指定它所相对的基本路径。

images_upload_base_path: '/demo',

最后配置示例如下：

tinymce.init({
    selector: '#editor',
    language:'zh_CN',
    plugins: 'image',
    toolbar: 'image',
    images_upload_url: '/demo/upimg.php',
    images_upload_base_path: '/demo',
});

TinyMCE图片上传其它参数：

选项名称	说明
images_upload_url	指定上传图片的后端处理程序的URL。
images_upload_base_path	给返回的相对路径指定它所相对的基本路径。
images_upload_credentials	对images_upload_url中指定的地址调用时是否传递cookie等跨域的凭据。值为布尔值，默认false。
images_upload_handler	此选项允许你使用自定义函数代替TinyMCE来处理上传操作。该自定义函数需提供三个参数：blobInfo、成功回调和失败回调。

二、TinyMCE图片上传返回的JSON数据格式

后端返回给TinyMCE的JSON数据，形如这样：

{ location : "/demo/image/1.jpg" }

三、PHP TinyMCE图片上传示例代码

以下使用PHP脚本示例如何接收TinyMCE传来的图片数据，并返回URL给TinyMCE。

注意1：

跨域问题：源文档重点对此进行了说明，如果TinyMCE和接受上传图片程序未在同一域名下，浏览器会因跨域问题而拒绝操作，后端程序返回结果时，需给浏览器一个允许跨域的指令，对于PHP，写法如下：

header('Access-Control-Allow-Origin: *');

这里的*代表允许所有，你可以换成你自己的域名（只能写一个）

一般是使用一个白名单数组，然后通过类似PHP里的 $_SERVER['HTTP_ORIGIN'] 判断是否跨域？以及请求是否在白名单内。

注意2：

TinyMCE图片上传表单里是没有显示name值的，但是，它也有一个默认的name="file"。例如：PHP处理图片上传可以用：

$_FILES['file']

upimg.php

<?php
/***************************************************
 * 数据来源白名单 *
 ***************************************************/
$accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");

/*********************************************
 * 设置图片保存的文件夹 *
 *********************************************/
$imageFolder = "images/";

reset ($_FILES);
$temp = current($_FILES);
if (!is_uploaded_file($temp['tmp_name'])){
  // 通知编辑器上传失败
  header("HTTP/1.1 500 Server Error");
  exit;
}

if (isset($_SERVER['HTTP_ORIGIN'])) {
  // 验证来源是否在白名单内
  if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
  } else {
    header("HTTP/1.1 403 Origin Denied");
    exit;
  }
}

/*
  如果脚本需要接收cookie，在init中加入参数 images_upload_credentials : true
  并加入下面两个被注释掉的header内容
*/
// header('Access-Control-Allow-Credentials: true');
// header('P3P: CP="There is no P3P policy."');

// 简单的过滤一下文件名是否合格
if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
    header("HTTP/1.1 400 Invalid file name.");
    exit;
}

// 验证扩展名
if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
    header("HTTP/1.1 400 Invalid extension.");
    exit;
}

// 都没问题，就将上传数据移动到目标文件夹，此处直接使用原文件名，建议重命名
$filetowrite = $imageFolder . $temp['name'];
move_uploaded_file($temp['tmp_name'], $filetowrite);

// 返回JSON格式的数据
// 形如下一行所示，使用location存放图片URL
// { location : '/your/uploaded/image/file.jpg'}
echo json_encode(array('location' => $filetowrite));

最终效果如下：