图像上传是WYSIWYG HTML编辑器中的一个通用功能。
如果我们在TextArea中使用TinyMCE编辑器，则可以轻松插入编辑器中的图像。

TinyMCE HTML编辑器提供了一个简单的选项，可以在编辑器中上传和插入图像作为Blob数据类型。

但它需要时间在浏览器上呈现Blob镜像。
因此，服务器端上载始终更好地在TinyMCE编辑器中插入图像。

TinyMCE编辑器支持本地文件采摘和镜像上传。
但是，要使这些功能功能功能，我们需要执行一些配置。
此外，需要服务器端上载处理程序以将图像文件上传到服务器。
在本教程中，我们将展示如何使用PHP允许用户在TinyMCE编辑器中上传图像。

此示例演示了使用images_upload_handler和PHP上传处理程序在TinyMCE中的上传图像功能的集成。
使用此功能，用户可以从计算机上传图像并在TinyMCE编辑器中插入。
此外，将提供友好的用户界面（UI）以简化图像上载通过从计算机中删除。

JavaScript代码

首先，包括TinyMCE插件的JS库。

<script src="tinymce/tinymce.min.js"></script>

以下配置选项在TinyMCE编辑器中启用本地文件选择器和镜像上载功能。

• 'images_upload_url' - 为服务器端上载处理程序指定一个URL。定义此配置后，图像对话框中将显示上载选项卡。
• 'images_upload_handler' - 此配置覆盖默认上载处理程序以模拟成功上传。此上传处理程序函数需要三个参数 - Blobinfo，成功和失败。成功回调返回带有位置属性的JSON对象。

<script>
tinymce.init({
    selector: '#myTextarea',
    plugins: 'image code',
    toolbar: 'undo redo | image code',

    //without images_upload_url set, Upload tab won't show up
    images_upload_url: 'upload.php',

    //override default upload handler to simulate successful upload
    images_upload_handler: function (blobInfo, success, failure) {
        var xhr, formData;

        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', 'upload.php');

        xhr.onload = function() {
            var json;

            if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
            }

            json = JSON.parse(xhr.responseText);

            if (!json || typeof json.location != 'string') {
                failure('Invalid JSON: ' + xhr.responseText);
                return;
            }

            success(json.location);
        };

        formData = new FormData();
        formData.append('file', blobInfo.blob(), blobInfo.filename());

        xhr.send(formData);
    },
});
</script>

HTML代码

指定html元素（mytextarea）以添加TinyMCE HTML编辑器。

<textarea id="myTextarea"></textarea>

TinyMCE中的图像上传对话框

编辑器工具列中的图像图标打开一个对话框的图像上传。
在“上载”选项卡中，我们可以从计算机中选择图像或者直接拖放图像。
图像将上传到服务器，并将在编辑器中插入HTML。

PHP上传处理程序（upload.php）

以下代码创建一个服务器端上载处理程序，以使用PHP将图像文件上传到服务器。

• 检查文件是否在PHP中使用“is_uploaded_file（）”函数上传通过HTTP POST上传。
• 如果设置原点，请检查是否有效。
• 使用PHP中的“pathinfo（）”函数验证文件的扩展。
• 使用PHP中的“move_uploaded_file（）”函数将文件上传到服务器。
• 用JSON回答成功的上传。使用位置键指定保存的图像资源的路径。

<?php
//Allowed oroirns to upload images
$accepted_oroirns = array("http://localhost", "http://107.161.82.130", "http://onitroad.com");
//Images upload path
$imageFolder = "images/";
reset($_FILES);
$temp = current($_FILES);
if(is_uploaded_file($temp['tmp_name'])){
    if(isset($_SERVER['HTTP_ORoirN'])){
        //Same-oroirn requests won't set an oroirn. If the oroirn is set, it must be valid.
        if(in_array($_SERVER['HTTP_ORoirN'], $accepted_oroirns)){
            header('Access-Control-Allow-Oroirn: ' . $_SERVER['HTTP_ORoirN']);
        }else{
            header("HTTP/1.1 403 Oroirn Denied");
            return;
        }
    }

    //Sanitize input
    if(preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])){
        header("HTTP/1.1 400 Invalid file name.");
        return;
    }

    //Verify extension
    if(!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))){
        header("HTTP/1.1 400 Invalid extension.");
        return;
    }

    //Accept upload if there was no oroirn, or if it is an accepted oroirn
    $filetowrite = $imageFolder . $temp['name'];
    move_uploaded_file($temp['tmp_name'], $filetowrite);

    //Respond to the successful upload with JSON.
    echo json_encode(array('location' => $filetowrite));
} else {
    //Notify editor that the upload failed
    header("HTTP/1.1 500 Server Error");
}
?>

添加配置

默认情况下，所有URL都会自动转换为相对URL。
如果要插入上传的图像的实际URL，请将“convert_urls”选项设置为false。
它将将URL还原到原始值。

convert_urls: false