首页 文章

CKEDITOR，图片上传（filebrowserUploadUrl）

提问于
浏览 次
36

我正在使用CKEDITOR，并希望能够允许用户在文本编辑器中上传和嵌入图像...

以下JS是加载CKEDITOR的：

CKEDITOR.replace( 'meeting_notes',
    {
        startupFocus : true,
        toolbar :
            [
                ['ajaxsave'],
                ['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                ['Cut','Copy','Paste','PasteText'],
                ['Undo','Redo','-','RemoveFormat'],
                ['TextColor','BGColor'],
                ['Maximize', 'Image']
            ],
        filebrowserUploadUrl : '/notes/add/ajax/upload-inline-image/index.cfm'
    }
);

我遇到的问题是filebrowserUploadUrl ...那个URL应该返回CKEDITOR以使这个过程起作用？

谢谢

ckeditor

11 回答

  • 3

    该URL应指向您可能拥有的自定义文件浏览器URL .

    我已经在我的一个项目中完成了这个，我在我的博客上发布了关于这个主题的教程

    http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/

    本教程提供了有关如何在CKEditor中集成FCKEditor的内置FileBrowser的分步说明，如果您不想自己创建 . 它非常简单 .

    回复于
  • 0

    可能为时已晚 . 您的代码是正确的，所以请再次检查filebrowserUploadUrl中的URL

    CKEDITOR.replace( 'editor1', {
    filebrowserUploadUrl: "upload/upload.php" 
} );

    和Upload.php文件

    if (file_exists("images/" . $_FILES["upload"]["name"]))
{
 echo $_FILES["upload"]["name"] . " already exists. ";
}
else
{
 move_uploaded_file($_FILES["upload"]["tmp_name"],
 "images/" . $_FILES["upload"]["name"]);
 echo "Stored in: " . "images/" . $_FILES["upload"]["name"];
}
    回复于
  • -5

    新的CKeditor没有包含文件管理器（CKFinder是应付的） . 您可以在CKeditor中集成好看且易于实现的免费文件管理器 .

    http://labs.corefive.com/2009/10/30/an-open-file-manager-for-ckeditor-3-0/

    您下载它，将其复制到您的项目 . 所有说明都在那里，但您基本上只是将路径添加到代码中添加的filemanager index.html页面 .

    CKEDITOR.replace( 'meeting_notes',
{
startupFocus : true,
toolbar :
[
['ajaxsave'],
['Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
['Cut','Copy','Paste','PasteText'],
['Undo','Redo','-','RemoveFormat'],
['TextColor','BGColor'],
['Maximize', 'Image']
],
filebrowserUploadUrl : '/filemanager/index.html' // you must write path to filemanager where you have copied it.
});

    支持大多数语言（php，asp，MVC && aspx - ashx，...）） .

    回复于
  • 43

    如果您不想购买CKFinder，就像我不想购买CKFinder，那么我为CKEditor 4写了一个非常可靠的上传器 . 它由第二种形式组成，位于textarea表格的正上方，并利用了iframe hack，尽管它的名字，它是无缝的，不引人注目的 .

    成功上传图像后，它将显示在您的CKEditor窗口中，以及已存在的任何内容 .

    editor.php （表格页面）：

    <?php
set_time_limit ( 3600 )
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Content Editor</title>
<link href="jquery-ui-1.10.2/themes/vader/ui.dialog.css" rel="stylesheet" media="screen" id="dialog_ui" />
<link href="jquery-ui-1.10.2/themes/vader/jquery-ui.css" rel="stylesheet" media="screen" id="dialog_ui" />
<script src="jquery-ui-1.10.2/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.2/jquery.form.js"></script>
<script src="jquery-ui-1.10.2/ui/jquery-ui.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script src="ckeditor/config.js"></script>
<script src="ckeditor/adapters/jquery.js"></script>
<script src="ckeditor/plugin2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#editor').ckeditor({ height: 400, width:600});
});

function placePic(){

    function ImageExist(url){
       var img = new Image();
       img.src = url;
       return img.height != 0;
    }

var filename = document.forms['uploader']['uploadedfile'].value;
document.forms['uploader']['filename'].value = filename;
var url = 'http://www.mydomain.com/external/images/cms/'+filename;
document.getElementById('uploader').submit();
var string = CKEDITOR.instances.editor.getData();
var t = setInterval(function(){

            var exists = ImageExist(url);
            if(exists === true){
                    if(document.getElementById('loader')){
                        document.getElementById('loader').parentNode.removeChild(document.getElementById('loader'));
                    }
                    CKEDITOR.instances.editor.setData(string + "<img src=\""+url+"\" />");
                    clearInterval(t);
            }
            else{
                if(! document.getElementById("loader")){
                    var loader = document.createElement("div");
                    loader.setAttribute("id","loader");
                    loader.setAttribute("style","position:absolute;margin:-300px auto 0px 240px;width:113px;height:63px;text-align:center;z-index:10;");
                    document.getElementById('formBox').appendChild(loader);

                    var loaderGif = document.createElement("img");
                    loaderGif.setAttribute("id","loaderGif");
                    loaderGif.setAttribute("style","width:113px;height:63px;text-align:center;");
                    loaderGif.src = "external/images/cms/2dumbfish.gif";
                    document.getElementById('loader').appendChild(loaderGif);
                }
            }

            },100);
}

function loadContent(){
if(document.forms['editorform']['site'].value !== "" && document.forms['editorform']['page'].value !== ""){
    var site = document.forms['editorform']['site'].value;
    var page = document.forms['editorform']['page'].value;
    var url = site+"/"+page+".html";
    $.ajax({
        type: "GET",
        url: url,
        dataType: 'html',
        success: function (html) {
            CKEDITOR.instances.editor.setData(html);
        }
    });
}
}
</script>
<style>
button{
  width: 93px;
  height: 28px;
  border:none;
  padding: 0 4px 8px 0;
  font-weight:bold
}
#formBox{
    width:50%;
margin:10px auto 0px auto;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
}
#field{
position:absolute;
top:10px;
margin-left:300px;
margin-bottom:20px;
}
#target{
position:absolute;
top:100px;
left:100px;
width:400px;
height:100px;
display:none;
}
.textField{
    padding-left: 1px;
border-style: solid;
border-color: black;
border-width: 1px;
font-family: helvetica, arial, sans serif;
padding-left: 1px;
}
#report{
float:left;
margin-left:20px;
margin-top:10px;
font-family: helvetica, arial, sans serif;
font-size:12px;
color:#900;
}
</style>
</head>

<body>
<?php
if(isset($_GET['r'])){ ?><div id="report">
<?php echo $_GET['r']; ?> is changed.
</div><?php
}
?>
<div id="formBox">
<form id="uploader" name="uploader" action="editaction.php"  method="post" target="target" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="50000000" />
<input type="hidden" name="filename" value="" />
Insert image:&nbsp;<input name="uploadedfile" type="file" class="textField" onchange="placePic();return false;" />&nbsp;&nbsp;
</form>

<form name="editorform" id="editorform" method="post" action="editaction.php" >
<div id="field" >Site:&nbsp;<select name="site"  class="textField" onchange="loadContent();return false;">
    <option value=""></option>
    <option value="scubatortuga">scubatortuga</option>
    <option value="drytortugascharters">drytortugascharters</option>
    <option value="keyscombo">keyscombo</option>
    <option value="keywesttreasurehunters">keywesttreasurehunters</option>
    <option value="spearfishkeywest">spearfishkeywest</option>
</select>
Page:&nbsp;<select name="page" class="textField" onchange="loadContent();return false;">
    <option value=""></option>
    <option value="one">1</option>
    <option value="two">2</option>
    <option value="three">3</option>
    <option value="four">4</option>
</select>
</div>
    
<textarea name="editor" id="editor"></textarea>
    
<input type="submit" name="submit" value="Submit" />
</form>
</div>
<iframe name="target" id="target"></iframe>
</body>
</html>

    这是操作页面， editaction.php ，它执行实际的文件上传：

    <?php
//editaction.php

foreach($_POST as $k => $v){
    ${"$k"} = $v;
}
//fileuploader.php
if($_FILES){
  $target_path = "external/images/cms/";
  $target_path = $target_path . basename( $_FILES['uploadedfile']['name']); 
  if(! file_exists("$target_path$filename")){
    move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path);
  }
}
else{
    $string = stripslashes($editor);
    $filename = "$site/$page.html";
    $handle = fopen($filename,"w");
    fwrite($handle,$string,strlen($string));
    fclose($handle);
    header("location: editor.php?r=$filename");
}
?>
    回复于
  • 1

    我的最新一期是如何在CKEditor中集成CKFinder进行图像上传 . 这里的解决方案 .

    • 下载CKEditor并在您的Web文件夹根目录中解压缩 .

    • 下载CKFinder并使用ckeditor文件夹解压缩 .

    • 然后添加对CKEditor，CKFinder和put的引用

    <CKEditor:CKEditorControl ID="CKEditorControl1" runat="server"></CKEditor:CKEditorControl>

    到你的aspx页面 .

    • 在代码隐藏页面OnLoad事件中添加此代码段
    protected override void OnLoad(EventArgs e)
{
  CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
  _FileBrowser.BasePath = "ckeditor/ckfinder/";
  _FileBrowser.SetupCKEditor(CKEditorControl1);
}
    • 编辑Confic.ascx文件 .
    public override bool CheckAuthentication()
{
  return true;
}

// Perform additional checks for image files.
SecureImageUploads = true;

    （source）

    回复于
  • 14

    对于那些在Grails ckeditor插件中有相同问题的人

    filebrowserUploadUrl： '/ YourAppName / CK / OFM'

    调用处理图像uploade的函数 . 如果你想使用自己的自定义函数，你可以给出该文件路径 .

    回复于
  • 0

    使用CKeditor版本4，编辑器期望从服务器端返回JSON . 旧版本可能需要带有javascript代码段的text / html类型的响应 . 有关Explanation of return formats的说明，请参阅此链接 . 在服务器端，如果您使用的是C＃，则可以创建如下数据模型：

    namespace editors.Models
{
    public class PostModel
    {
        public string CKEditor { get; set; }  // for older editors
        public string CKEditorFuncNum { get; set; }  // for older editors
        public string langCode { get; set; }  // for older editors
        public int uploaded { get; set; } 
        public string filename { get; set; }
    }
}

    并使用以下命令返回上传例程的结果：

    PostModel fez = new PostModel { CKEditor = "TheEditor1", CKEditorFuncNum = "1", langCode = "en", uploaded = 1, filename = "/images/in/" + filenameVariable };
return Ok(fez);

    尽管.net很可能会自动生成json，但请确保返回内容类型的application / json .

    作为那些想要检查上传的文件是否真的是图像文件的人的旁注;如果您使用的是Asp.net核心，则需要以非标准方式安装system.drawing库 . Here's how to do that

    另请注意，您可以将config.js文件中的发布类型更改为 config.filebrowserUploadMethod='form'; ，而不是 config.filebrowserUploadMethod='xhr';

    回复于
  • 1

    该URL将指向您自己的服务器端文件上载操作 . 文档没有详细说明，但幸运的是 Don Jones 填写了一些空白：

    How can you integrate a custom file browser/uploader with CKEditor?

    也可以看看：

    http://zerokspot.com/weblog/2009/09/09/custom-filebrowser-callbacks-ckeditor/

    回复于
  • 2

    我最近也需要一个答案，我花了几个小时来弄明白，所以我决定用一些更新的信息和一个完整的答案来复活这个问题 .

    最终我偶然发现了this tutorial，这对我解释得非常好 . 对于stackoverflow，我将在这里重申教程以防它被删除 . 我还将在教程中添加一些更改，使其成为更灵活的解决方案 .

    入门

    让我们从ckeditor的任何版本开始，（基本的，标准的，完整的，自定义的）唯一的要求是你有addon image和filebrowser

    （在撰写本文时，所有包都包含这两个插件，除了基本插件，但它可以添加到基本插件中）

    上传必要的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'; 在主要功能E.G内的某处

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

    config.filebrowserUploadUrl = '/uploader/upload.php';
};

    注意：此URL来自您的项目根目录 . 无论您从何处加载此文件，它都将从您的站点索引开始 . 这意味着，如果您的网址是example.com，则此网址会显示在http://example.com/uploader/upload.php中

    在此之后，CKEditor配置完成！那很简单呃？

    事实上，如果你现在再次测试你的图像上传，你会得到一个上传选项，虽然它还没有完成 .

    enter image description here

    服务器配置

    现在你会注意到在此之前的步骤中它以 upload.php 文件结束 . 这是困扰我的部分，我想有一些默认可以用这个，但据我所知，没有 . 幸运的是，我找到了一个可行的，我对它进行了一些更改以允许更多的自定义 .

    因此，让我们转到您在上一步中提供的路径，为了本教程的连续性，我将使用 /uploader/upload.php .

    在这个位置，创建一个名为（你猜对了） upload.php 的文件 .

    该文件将处理我们的文件上传 .

    我将放入我的自定义上传类，但它基于我发现并分叉的this github .

    upload.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) (NOT RECOMMENDED)

    您还需要编辑 $basePath 和 $baseUrl 变量以满足您的服务器需求，否则它将无法工作 . 除非你想玩，否则下面的所有内容都可以单独留下 .

    此类不提供文件保护，您可能希望使用它来使其更安全，因此人们无法将脚本或病毒上传到您的服务器 .

    我希望这个小教程可以帮助某些人，因为我在为自己努力工作的过程中工作了太长时间，我希望我可以节省一些时间 .

    我上面链接的教程还有一些简洁的故障排除步骤，可以帮助您找到出现问题的原因 .

    enter image description here

    回复于
  • 0

    您可以使用此代码

    <script>
                // Replace the <textarea id="editor"> with a CKEditor
                // instance, using default configuration.

                CKEDITOR.config.filebrowserImageBrowseUrl = '/admin/laravel-filemanager?type=Files';
                CKEDITOR.config.filebrowserImageUploadUrl = '/admin/laravel-filemanager/upload?type=Images&_token=';
                CKEDITOR.config.filebrowserBrowseUrl = '/admin/laravel-filemanager?type=Files';
                CKEDITOR.config.filebrowserUploadUrl = '/admin/laravel-filemanager/upload?type=Files&_token=';

                CKEDITOR.replaceAll( 'editor');
   </script>
    回复于
  • 5

    要从您的桌面或任何地方上传图像简单拖放，您可以通过复制图像并使用ctrl v将其粘贴到文本区域来实现此目的

    回复于

相关问题