首页 文章

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

提问于
浏览 次
1

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

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

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

我正在寻找一种方法 upload images to CKEditor from desktop . 据我所知， angular-ckeditor 和 CKEditor 库是分开的，所以我可以轻松添加小部件和插件 .

问题是我似乎找不到合适的插件/小部件（不使用jQuery），这将帮助我从桌面上传图像 . 我只使用图像链接 .

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

  • 简单的图像上传器需要哪些插件，以便我可以将图像粘贴到CKEditor中？

  • 如何使用AngularJS进行设置？

  • PHP文件上传器（/浏览器）是什么样的？

我到目前为止所尝试的甚至没有更改CKEditor选项卡（它应该通过添加"Upload"选项卡和其他一些UI来更改图像属性对话框） . 很明显，我错过了一个可靠的教程 .

enter image description here

（我也可以尝试切换到 ng-ckeditor ，如果这个解决方案更简单）

javascript php angularjs ckeditor image-uploading

1 回答

  • 3

    首先，让我们来看看没有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处理程序应验证请求，调整图像大小（如果需要），并将上载的图像移动到服务器上的永久位置 . 然后，处理程序使用图像的公共URL将HTML响应发送回CKEditor .

    当然，我们可以用任何语言编写服务器端处理程序 . 这里's a basic example for PHP that we' ll另存为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 plugin添加到我们的CKEditor构建中（或使用CKEditor CDN中的标准全分布） .

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

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

    我们可以看到，我们不需要做太多的事情 . 一旦我们创建了模板，我们就会声明我们传递给控制器上的普通 CKEDITOR.replace() 的相同配置选项，我们在带有 ckeditor 指令的元素上引用它 .

    回复于

相关问题