如何在 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 库是分开的，因此我可以轻松添加小部件和插件。

问题是我似乎无法找到正确的 plugins/widgets（ 不使用 jQuery），这将帮助我从桌面上传图像。我让它只适用于图像链接。

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

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

到目前为止我所尝试的甚至没有更改 CKEditor 选项卡（它应该通过添加 "Upload" 选项卡和一些其他 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 选项卡在编辑器的图像对话框中变得可用。示例值 /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 to our CKEditor build (or use the standard-all distribution from the CKEditor CDN).

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

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

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

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'
    };
});

如我们所见，我们不需要为此做太多事情 "angularize"。创建模板后，我们声明 相同的 配置选项，我们将传递给我们在具有 [=23= 的元素上引用的控制器上的普通 CKEDITOR.replace() ]指令。

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

How to upload an image with CKEditor in AngularJS?

javascript

php

image-uploading

ckeditor

angularjs