CKEditor图像上传不起作用答案

【问题标题】：CKEditor image upload not workingCKEditor图像上传不起作用
【发布时间】：2014-02-20 06:45:07
【问题描述】：

我在我的 cakePHP 应用程序中使用 ckeditor 4.2。我已将它安装在我的 app/webroot/js/ckeditor 目录中。

我想在我的 ckeditor 中有一个图像上传选项，所以我下载了 ckeditor 图像插件 (http://ckeditor.com/addon/image)。我使用以下文档安装了它 (http://www.paulfp.net/blog/2010/10/how-to-add-and-upload-an-image-using-ckeditor/)

现在，图片上传界面看起来不错，但是当我点击“发送到服务器”按钮时，它并没有调用 PHP 脚本。我已经在我的 config.js 中设置了“filebrowserUploadUrl”的路径，但它仍然无法正常工作。我已经完成了与上述文档相同的设置，但我无法调用该脚本。

注意：当我出于某种未知原因单击“发送到服务器”按钮时，我看到正在调用 controller_name/undefined 操作。

【问题讨论】：

请提供源代码，这将有助于我们为您提供帮助。似乎需要 config.js，routes.php 如果您使用自定义路由和...应该上传文件的操作内容。另外，您确定文件权限？

标签： php cakephp ckeditor

【解决方案1】：

您也可以使用 KCFinder。它是免费的开源网络文件管理器。它可以集成到 FCKeditor、CKEditor 和 TinyMCE WYSIWYG Web 编辑器（或您的自定义 Web 应用程序）中，以上传和管理可嵌入到编辑器生成的 HTML 内容中的图像、flash 电影和其他文件。

http://kcfinder.sunhater.com

【讨论】：

【解决方案2】：

CKEditor 是几乎所有 Web 开发人员最喜欢的基于 Web 的文字处理器。但问题是，它没有内置的图像上传功能，即 CKEditor 不知道如何处理图像上传。所以我们会指派一个会处理图片上传和文件管理的助手。

我们的助手是 KCFinder，一个免费的开源网络文件管理器。它可以集成到 FCKeditor、CKEditor 和 TinyMCE WYSIWYG Web 编辑器（或您的自定义 Web 应用程序）中，以上传和管理可嵌入到编辑器生成的 HTML 内容中的图像、flash 电影和其他文件。

我假设您已经在您的网页中设置了 CKEditor。如果你还没有做，可以按照我之前文章中的说明进行操作：CKEditor: Web-based Word Processor For Your Web Pages

让我们进入我们的业务。

1) 下载KCFinder > http://kcfinder.sunhater.com/download

2) 将.zip文件中的kcfinder目录解压到你项目的公共目录中。

3) 打开/public/ckeditor/config.js，添加如下代码行；

CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';

/* Show these image/flash browsing feature only to Admins */
config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files';
config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images';
config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash';

/* Image/Flash upload feature using kcfinder tool */
config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files';
config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images';
config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash';

};

如果您不想让您的用户浏览服务器中以前上传的文件，您可以删除/阻止评论前三行并仅保留实际执行上传部分的最后三行，否则您可以根据您的要求为每个功能添加用户级别控件。永远不要让用户看到您服务器中的文件。如果他们更改文件，其他文件链接可能会被破坏，这将导致您的应用程序混乱不堪。

4) 激活 KCFinder。

默认情况下，KCFinder 被禁用。要更改它，请转到 kcfinder/conf/config.php 并在常规设置下，将 'disabled' 的值更改为 false。现在，用户可以使用 CKEditor 界面在您的 Web 应用程序上上传和管理文件（在我们的例子中是图像文件）。

详细步骤可以查看我的博文：https://ashenlive.blogspot.com/2016/09/ckeditor-image-upload-with-kcfinder.html

【讨论】：