时间戳

首页 > 解决方案 > 如何使用 CKEditor4 使用 CDN 上传图片？

image - 如何使用 CKEditor4 使用 CDN 上传图片？

问题描述

我正在尝试为 CKEditor4 启用上传图像拖放功能。在我的工作中，我们将它托管在我们的 CDN 上，我一直在添加插件，只需将它们添加到 /plugins 文件夹，然后使用config.extraPlugins.

文件管理器 ( Image Uploader ) 的文档说用于config.UploadUrl处理图像文件上传。将uploadimage文件夹添加到 CDN 后，我尝试了这个，似乎没有任何反应。控制台中也没有错误。

CKEDITOR.config.extraPlugins = 'uploadimage';
CKEDITOR.config.UploadUrl = 'https://cdn.cpscentral.com/js/ckeditor4-fuller/imageuploader/imgupload.php';

它还说不要忘记将 CHMOD 可写权限 (0777) 设置为服务器上的 imageuploader 文件夹。我不完全确定如何执行此操作，但我知道这个 s3 文件夹是公开的。非常感谢一些指导！

标签： imageckeditor4.x

解决方案

这就是我为获得一个工作示例所做的事情

  • 下载ckeditor_4.12.1_full.zip
  • 解压并将内容复制到网站根目录下的 /ckeditor 文件夹
  • 下载imageuploader_4.1.8.zip
  • 解压并将内容复制到网站的 /ckeditor/plugins/imageuploader 文件夹

这是我的 index.php

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
        <script src="/ckeditor/ckeditor.js"></script>
    </head>
    <body>
        <form>
            <textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>
            <script>
                CKEDITOR.replace( 'editor1' );
            </script>
        </form>
    </body>
</html>

这是我的 /ckeditor/config.js

CKEDITOR.editorConfig = function( config ) {
    config.extraPlugins = 'imageuploader';
    config.UploadUrl = '/ckeditor/plugins/imageuploader/imgupload.php';
};

和结果

浏览服务器

推荐阅读