我最近也需要这个问题的答案,我花了几个小时才弄清楚,所以我决定用一些更新的信息和完整的答案重新提出这个问题。
最终,我偶然发现了这个教程,它很好地向我解释了它。为了stackoverflow,我将在这里重申教程,以防它被删除。我还将包括我对教程所做的一些更改,以使其成为更灵活的解决方案。
入门
让我们从 ckeditor 的任何版本开始,(基本、标准、完整、自定义)唯一的要求是您拥有插件图像和文件浏览器
(在撰写本文时,所有软件包都包括这两个插件,除了基本的,但可以添加到基本的)
上传必要的 ckeditor 文件后,请确保您的安装工作正常。
确保链接您的 ckeditor.js 文件脚本<script src="ckeditor/ckeditor.js"></script>
,然后像这样初始化它:
$(document).ready(function() {
CKEDITOR.replace( 'editor1' );
});
<textarea name="editor1"></textarea>
CKEditor 配置
现在我们必须告诉 CKEditor 我们要启用上传。您可以通过进入您的 ckeditor 文件夹并编辑“config.js”来完成此操作。我们需要添加这一行:
config.filebrowserUploadUrl = '/uploader/upload.php';
主函数 EG 内的某处
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.filebrowserUploadUrl = '/uploader/upload.php';
};
注意:此 URL 来自您的项目根目录。无论您从何处加载此文件,它都将从您的站点索引开始。这意味着,如果您的 URL 是 example.com,则此 URL 会导致http://example.com/uploader/upload.php
至此,CKEditor 配置完成!那很容易吧?
事实上,如果你现在再次测试你的图像上传,你会得到一个上传选项,虽然它还不能很好地工作。

服务器配置
现在您会在此步骤之前的步骤中注意到它以upload.php
文件结尾。这是让我难过的部分,我认为会有一些默认值可以与此一起使用,但据我所知没有。幸运的是,我找到了一个可行的方法,并对其进行了一些更改以允许更多自定义。
因此,让我们转到您在上一步中提供的路径,为了在本教程中保持连续性,我将使用/uploader/upload.php
.
在这个位置,创建一个名为 (你猜对了) 的文件upload.php
。
该文件将处理我们的文件上传。
我将放入我的自定义上传类,但它基于我找到并分叉的这个 github 。
上传.php:
<?php
// Upload script for CKEditor.
// Use at your own risk, no warranty provided. Be careful about who is able to access this file
// The upload folder shouldn't be able to upload any kind of script, just in case.
// If you're not sure, hire a professional that takes care of adjusting the server configuration as well as this script for you.
// (I am not such professional)
// Configuration Options: Change these to alter the way files being written works
$overwriteFiles = false;
//THESE SETTINGS ONLY MATTER IF $overwriteFiles is FALSE
//Seperator between the name of the file and the generated ending.
$keepFilesSeperator = "-";
//Use "number" or "random". "number" adds a number, "random" adds a randomly generated string.
$keepFilesAddonType = "random";
//Only usable when $keepFilesAddonType is "number", this specifies where the number starts iterating from.
$keepFilesNumberStart = 1;
//Only usable when $keepFilesAddonType is "random", this specifies the length of the string.
$keepFilesRandomLength = 4;
//END FILE OVERWRITE FALSE SETTINGS
// Step 1: change the true for whatever condition you use in your environment to verify that the user
// is logged in and is allowed to use the script
if (true) {
echo("You're not allowed to upload files");
die(0);
}
// Step 2: Put here the full absolute path of the folder where you want to save the files:
// You must set the proper permissions on that folder (I think that it's 644, but don't trust me on this one)
// ALWAYS put the final slash (/)
$basePath = "/home/user/public_html/example/pages/projects/uploader/files/";
// Step 3: Put here the Url that should be used for the upload folder (it the URL to access the folder that you have set in $basePath
// you can use a relative url "/images/", or a path including the host "http://example.com/images/"
// ALWAYS put the final slash (/)
$baseUrl = "http://example.com/pages/projects/uploader/files/";
// Done. Now test it!
// No need to modify anything below this line
//----------------------------------------------------
// ------------------------
// Input parameters: optional means that you can ignore it, and required means that you
// must use it to provide the data back to CKEditor.
// ------------------------
// Optional: instance name (might be used to adjust the server folders for example)
$CKEditor = $_GET['CKEditor'] ;
// Required: Function number as indicated by CKEditor.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: To provide localized messages
$langCode = $_GET['langCode'] ;
// ------------------------
// Data processing
// ------------------------
// The returned url of the uploaded file
$url = '' ;
// Optional message to show to the user (file renamed, invalid file, not authenticated...)
$message = '';
// in CKEditor the file is sent as 'upload'
if (isset($_FILES['upload'])) {
// Be careful about all the data that it's sent!!!
// Check that the user is authenticated, that the file isn't too big,
// that it matches the kind of allowed resources...
$name = $_FILES['upload']['name'];
//If overwriteFiles is true, files will be overwritten automatically.
if(!$overwriteFiles)
{
$ext = ".".pathinfo($name, PATHINFO_EXTENSION);
// Check if file exists, if it does loop through numbers until it doesn't.
// reassign name at the end, if it does exist.
if(file_exists($basePath.$name))
{
if($keepFilesAddonType == "number") {
$operator = $keepFilesNumberStart;
} else if($keepFilesAddonType == "random") {
$operator = bin2hex(openssl_random_pseudo_bytes($keepFilesRandomLength/2));
}
//loop until file does not exist, every loop changes the operator to a different value.
while(file_exists($basePath.$name.$keepFilesSeperator.$operator))
{
if($keepFilesAddonType == "number") {
$operator++;
} else if($keepFilesAddonType == "random") {
$operator = bin2hex(openssl_random_pseudo_bytes($keepFilesRandomLength/2));
}
}
$name = rtrim($name, $ext).$keepFilesSeperator.$operator.$ext;
}
}
move_uploaded_file($_FILES["upload"]["tmp_name"], $basePath . $name);
// Build the url that should be used for this file
$url = $baseUrl . $name ;
// Usually you don't need any message when everything is OK.
// $message = 'new file uploaded';
}
else
{
$message = 'No file has been sent';
}
// ------------------------
// Write output
// ------------------------
// We are in an iframe, so we must talk to the object in window.parent
echo "<script type='text/javascript'> window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')</script>";
?>
我对此类所做的更改允许您启用/禁用文件覆盖,并在您不想覆盖文件时为您提供一些选项。原始类总是在没有选项的情况下覆盖。
默认情况下,此类设置为保留所有文件,不覆盖。您可以使用这些设置来更好地满足您的需求。
如果你注意到,有一段代码只是一个if(true)
声明,显然这总是正确的
if (true) {
echo("You're not allowed to upload files");
die(0);
}
这是为了安全。这是您应该检查用户上传是否已登录/允许上传的地方。如果您不担心,您可以删除这些代码行或将其设置为if(false)
(不推荐)
您还需要编辑$basePath
和$baseUrl
变量以满足您的服务器需求,否则它将无法正常工作。除非你想玩,否则下面的所有东西都可以单独放置。
此类不提供文件保护,您可能希望对其进行一些操作以使其更安全,因此人们无法将脚本或病毒上传到您的服务器。
我希望这个小教程对某人有所帮助,因为我花了太长时间试图让它为自己工作,我希望我可以为别人节省一些时间。
我在上面链接的该教程中还有一些简洁的故障排除步骤,如果出现问题,它们可能会帮助您找出问题所在。
