如何在AngularJS中使用angular-ckeditor实现CKEditor 4图片上传？

我之前也踩过angular-ckeditor上传图片的坑，结合官方文档和实际经验，给你梳理一套完整的实现步骤，包括插件选择、Angular配置、PHP后端代码，还有备选的ng-ckeditor方案。

一、所需CKEditor4插件（无需jQuery） #

你需要启用CKEditor自带的这几个核心插件，完全不需要依赖jQuery：

• uploadimage：支持直接拖拽本地图片、粘贴剪贴板图片（比如截图）到编辑器，自动触发上传
• filebrowser：在图片属性对话框中添加「Upload」标签，提供手动选择本地文件上传的UI
• image2：（可选，替代旧版image插件）优化图片插入后的显示和编辑体验，配合上传功能更流畅

注意：如果你的CKEditor安装包没有自带这些插件，需要到CKEditor官网下载对应插件，解压后放到CKEditor的plugins目录下。

二、AngularJS（angular-ckeditor）配置步骤 #

1. 在控制器中配置CKEditor选项
   把上传相关的参数加到你的options对象里，确保插件加载和接口路径正确：

   angular.module('yourApp').controller('EditorCtrl', function($scope) {
     $scope.editors = [
       { content: '' },
       // 其他编辑器实例...
     ];
   
     $scope.options = {
       // 启用所需插件
       extraPlugins: 'uploadimage,filebrowser,image2',
       // 粘贴上传的文件类型限制
       pasteUploadFileTypes: 'image/png,image/jpg,image/jpeg,image/gif',
       // 最大上传文件大小（5MB）
       uploadMaxFileSize: '5M',
       // 图片上传接口（对应你的PHP后端）
       uploadUrl: '/path/to/your/upload-image.php',
       // 文件浏览器的图片上传接口（和上面一致，加type参数区分类型）
       filebrowserImageUploadUrl: '/path/to/your/upload-image.php?type=Images',
       // 可选：已上传图片的浏览接口
       filebrowserBrowseUrl: '/path/to/your/browse-images.php'
     };
   });
   

2. 模板代码保持现有结构即可
   你原来的ng-repeat代码没问题，angular-ckeditor会自动为每个实例应用配置：

   <div ng-repeat="editor in editors">
     <div ckeditor="options" ng-model="editor.content"></div>
   </div>
   

三、PHP后端上传/浏览实现 #

CKEditor要求后端返回特定格式的JSON，以下是两个核心接口的完整代码：

1. 图片上传接口（upload-image.php） #

这个接口处理文件接收、验证和存储，返回CKEditor能识别的结果：

<?php
header('Content-Type: application/json');

// 配置上传目录（确保服务器有写入权限）
$uploadDir = './uploads/images/';
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

// 允许的文件类型和最大大小
$allowedMimeTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'];
$maxFileSize = 5 * 1024 * 1024; // 5MB

if (isset($_FILES['upload'])) {
    $file = $_FILES['upload'];
    // 生成唯一文件名避免冲突
    $fileName = uniqid('ck_') . '_' . basename($file['name']);
    $filePath = $uploadDir . $fileName;
    $accessUrl = '/uploads/images/' . $fileName; // 前端可访问的图片URL

    // 验证文件类型和大小
    if (in_array($file['type'], $allowedMimeTypes) && $file['size'] <= $maxFileSize) {
        if (move_uploaded_file($file['tmp_name'], $filePath)) {
            // 上传成功，返回CKEditor要求的JSON
            echo json_encode([
                'uploaded' => 1,
                'fileName' => $fileName,
                'url' => $accessUrl
            ]);
            exit;
        } else {
            echo json_encode([
                'uploaded' => 0,
                'error' => ['message' => '文件存储失败，请检查目录权限']
            ]);
            exit;
        }
    } else {
        echo json_encode([
            'uploaded' => 0,
            'error' => ['message' => '文件类型无效或超过5MB大小限制']
        ]);
        exit;
    }
} else {
    echo json_encode([
        'uploaded' => 0,
        'error' => ['message' => '未接收到上传文件']
    ]);
    exit;
}
?>

2. 已上传图片浏览接口（browse-images.php） #

如果需要在图片对话框中浏览已上传的图片，实现这个接口：

<?php
header('Content-Type: application/json');

$uploadDir = './uploads/images/';
$images = [];

if (is_dir($uploadDir)) {
    $files = scandir($uploadDir);
    foreach ($files as $file) {
        if ($file !== '.' && $file !== '..') {
            $filePath = $uploadDir . $file;
            $accessUrl = '/uploads/images/' . $file;
            $images[] = [
                'name' => $file,
                'url' => $accessUrl,
                'size' => filesize($filePath)
            ];
        }
    }
}

// 返回CKEditor filebrowser所需的格式
echo json_encode([
    'files' => $images
]);
?>

重要提示：给uploads/images目录设置服务器写入权限（比如chmod 755），否则会上传失败。

四、为什么之前没出现「Upload」标签？ #

你之前操作后没看到Upload标签，大概率是这两个原因：

1. 没正确加载filebrowser插件：检查extraPlugins里有没有包含filebrowser，或者插件文件有没有放到CKEditor的plugins目录
2. CKEditor版本问题：某些旧版本的CKEditor默认不包含这些上传插件，建议升级到最新稳定版的CKEditor4

备选方案：切换到ng-ckeditor #

如果angular-ckeditor的配置让你头疼，ng-ckeditor确实文档更清晰一点，配置逻辑几乎和上面一致：

• 安装ng-ckeditor后，同样在控制器的options里设置extraPlugins、uploadUrl等参数
• 模板代码改成<ckeditor ng-model="editor.content" config="options"></ckeditor>
• 后端PHP代码完全复用上面的即可，不需要修改

内容的提问来源于stack exchange，提问作者Aleksey Solovey