javascript - 如何在 AngularJS 中使用 CKEditor 上传图像？

Question

目前我正在使用angular-ckeditor添加CKEditor 4。

在我的模板中，我将其显示为:

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

我正在寻找一种从桌面上传图像到 CKEditor 的方法。据我了解， Angular-ckeditor 和 CKEditor 库是分开的，因此我可以轻松添加小部件和插件。

问题是我似乎找不到合适的插件/小部件(不使用 jQuery)，这将帮助我从桌面上传图像。我使它仅适用于图像链接。

官方网站上没有太多关于它的文档。他们说使用 PHP 文件来上传和浏览图像，但没有真正解释如何操作，尤其是使用 angular-ckeditor。所以我现在有几个问题:

• 简单的图像 uploader 需要哪些插件才能将图像粘贴到 CKEditor 中？
• 如何使用 AngularJS 进行设置？
• PHP 文件 uploader (/浏览器)是什么样的？

到目前为止我所尝试的甚至没有更改 CKEditor 选项卡(它应该通过添加“上传”选项卡和其他一些 UI 来更改图像属性对话框)。很明显，我在某个地方错过了所有这一切的可靠教程。

(我也可以尝试切换到 ng-ckeditor，如果这样的解决方案会更简单)

Answer 1

首先，让我们看一下没有 Angular 的一些基础知识。对于 CKEditor 版本 4，我们可以使用 filebrowserImageUploadUrl 初始化编辑器。配置选项，启用 File Browser API 中的功能:

CKEDITOR.replace('editor', { 
    filebrowserImageUploadUrl: '/upload.php?type=image' 
});

这只是将编辑器实例加载到<textarea name="editor">上。因为我们设置了filebrowserImageUploadUrl选项后，“上传”选项卡将在编辑器的图像对话框中变为可用。示例值 /upload.php?type=image ，是服务器上处理上传图像文件的 PHP 脚本的 URL。

当用户上传图片时，CKEditor 会将图片发送到服务器上的此 URL。此 URL 处的处理程序应验证请求、调整图像大小(如果需要)并将上传的图像移动到服务器上的永久位置。然后，处理程序将 HTML 响应以及图像的公共(public) URL 发送回 CKEditor。

当然，我们可以用任何语言编写服务器端处理程序。这是一个基本的 PHP 示例，我们将其另存为 upload.php:

<?php 
$tempName = $_FILES['upload']['tmp_name'];
$fileName = uniqid() . $_FILES['upload']['name'];
$uploadPath = '/path/to/uploads/' . $fileName;
$imageUrl = 'http://example.com/uploads/' . $fileName;

$success = move_uploaded_file($tempName, $uploadPath);

$html = '<script>window.parent.CKEDITOR.tools.callFunction(%s, "%s", "%s");</script>';
$message = $success ? 'Uploaded successfully.' : 'Upload failed.';
echo sprintf($html, $_GET['CKEditorFuncNum'], $imageUrl, $message);

此脚本将上传的图像放入网络服务器的 uploads/ 目录中，以便浏览器可以获取该图像。它传回 CKEditorFuncNum请求中的参数用于识别上传的适当回调。此示例提供了一些针对重复文件名的基本保护，但是，对于实际应用程序，我们需要添加安全性、验证和错误处理(身份验证、CSRF、文件类型检查、最大大小) 、文件名清理等)。

---

到目前为止，这一切都适用于 CKEditor 的标准内置功能(不需要插件、Angular 或 jQuery)。为了使用户能够将图像拖放到或粘贴到编辑器中，我们可以添加 Upload Image plugin到我们的 CKEditor 版本(或使用 CKEditor CDN 中的 standard-all 发行版)。

我们需要在初始化编辑器时声明插件:

CKEDITOR.replace('editor', { 
    extraPlugins: 'uploadimage',
    filebrowserImageUploadUrl: '/upload.php?type=image' 
});

...然后扩展我们的 upload.php 脚本以返回插件期望的 JSON 响应。在上一个示例的最后三行之前添加此 block :

if (isset($_GET['responseType']) && $_GET['responseType'] === 'json') {
    echo json_encode([
        'uploaded' => $success,
        'fileName' => $fileName,
        'url' => $imageUrl,
    ]);

    return;
}

上传图像插件发送 responseType=json服务器端脚本可以检查 URL 参数以确定发回哪种类型的响应。

---

最后，让我们看看如何使用 angular-ckeditor 初始化编辑器问题中描述的包:

<div ng-controller="EditorCtrl as editor">
    <textarea ckeditor="editor.options" ng-model="editor.content"></textarea>
</div>

var myApp = angular.module('myApp', ['ckeditor'])

myApp.controller('EditorCtrl', function () {
    this.options = {
        extraPlugins: 'uploadimage',
        filebrowserImageUploadUrl: '/image-upload.php?type=image'
    };
});

正如我们所看到的，我们不需要做太多的事情来“Angular 化”它。创建模板后，我们声明与传递给普通 CKEDITOR.replace() 的相同配置选项。在我们在带有 ckeditor 的元素上引用的 Controller 上指令。