TinyMCE编辑器增加图片本地上传功能

原来的代码

tinymce.init({
            selector: '#new-article',  // change this value according to your HTML
            auto_focus: 'element1',
            relative_urls: false,
            remove_script_host: false,
            height: 500,
            toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image uploadImages | preview media fullpage | forecolor backcolor emoticons',
            plugins: [
                'advlist autolink link image lists charmap preview hr anchor pagebreak spellchecker',
                'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                'save table contextmenu directionality emoticons template paste textcolor'
            ],
        });

修改后的代码

tinymce.init({
            selector: '#new-article',  // change this value according to your HTML
            auto_focus: 'element1',
            relative_urls: false,
            remove_script_host: false,
            height: 500,
            toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image uploadImages | preview media fullpage | forecolor backcolor emoticons',
            plugins: [
                'advlist autolink link image lists charmap preview hr anchor pagebreak spellchecker',
                'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                'save table contextmenu directionality emoticons template paste textcolor'
            ],
            // 处理图片上传
            images_upload_url: '/ajax/upload.php',  // 服务器端的图片上传处理脚本路径
            images_upload_handler: function(blobInfo, success, failure) {
                var formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());

                fetch('/ajax/upload.php', {  // 这里的 `/upload.php` 是服务器端处理图片上传的接口
                    method: 'POST',
                    body: formData
                })
                    .then(response => response.json())
                    .then(result => {
                        if (result.location) {
                            success(result.location);  // 上传成功，返回图片的URL
                        } else {
                            failure("上传失败");
                        }
                    })
                    .catch(error => {
                        failure("上传错误: " + error);
                    });
            },
            file_picker_callback: function(callback, value, meta) {
                if (meta.filetype === 'image') {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
                    input.onchange = function() {
                        var file = this.files[0];
                        var reader = new FileReader();
                        reader.onload = function() {
                            callback(reader.result, { title: file.name });
                        };
                        reader.readAsDataURL(file);
                    };
                    input.click();
                }
            }
        });

新增一个后端上传处理文件：upload.php

<?php
// 获取网站根目录路径
$target_dir = $_SERVER['DOCUMENT_ROOT'] . "/upload/photos/news/";  // 使用绝对路径，指向根目录下的 'upload' 文件夹
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));

// 允许上传的图片格式
$allowed_types = array("jpg", "jpeg", "png", "gif");

if (!in_array($imageFileType, $allowed_types)) {
    echo json_encode(["error" => "只允许 JPG, JPEG, PNG, GIF 格式"]);
    exit;
}

// 移动文件到目标目录
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
    echo json_encode(["location" => "/upload/photos/news/" . basename($target_file)]); // 返回上传图片的 URL
} else {
    echo json_encode(["error" => "上传失败"]);
}
?>