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

Question

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

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

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

我正在寻找一种将图像从桌面上传到CKEditor的方法。据我了解，angular-ckeditor和CKEditor库是分开的，所以我可以轻松地添加控件和插件。

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

官方网站上没有很多相关文档。他们说要使用将上传和浏览图像的PHP文件，但是并没有真正解释如何使用，特别是使用angular-ckeditor。所以我现在有几个问题：

• 一个简单的图像上传器需要哪些插件，以便可以将图像粘贴到CKEditor中？
• 如何使用AngularJS进行设置？
• PHP文件上传器（/浏览器）是什么样的？

到目前为止，我什至没有尝试更改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响应连同图像的公共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);

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

到目前为止，所有这些都可以与CKEditor的标准内置功能一起使用（不需要插件，Angular或jQuery）。为了使用户能够将图像拖放或粘贴到编辑器中，我们可以将Upload Image插件添加到CKEditor构建中（或使用CKEditor CDN中的standard-all发行版）。

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

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

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

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

    return;
}

Upload Image插件发送responseType=jsonURL参数，服务器端脚本可以检查该URL参数以确定发送回哪种响应。

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

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

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

正如我们所看到的，我们不需要做很多事情就可以将它“角度化”。一旦创建了模板，我们就声明了与传递给CKEDITOR.replace()使用该ckeditor指令的元素的控制器上的普通控制器相同的配置选项。