CKEDITOR, загрузка изображений (filebrowserUploadUrl) - PullRequest
36 голосов
/ 22 января 2010

Я использую 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, чтобы этот процесс заработал?

Спасибо

Ответы [ 11 ]

43 голосов
/ 05 марта 2010

URL-адрес должен указывать на ваш собственный URL-адрес браузера, который у вас может быть.

Я уже сделал это в одном из моих проектов, и я разместил учебник по этой теме в моем блоге

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

В руководстве даются пошаговые инструкции о том, как интегрировать встроенный FileBrowser из FCKEditor в CKEditor, если вы не хотите создавать наш собственный. Это довольно просто.

14 голосов
/ 05 января 2014

Может быть, уже слишком поздно. Ваш код правильный, поэтому, пожалуйста, проверьте ваш URL в filebrowserUploadUrl

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 голосов
/ 08 ноября 2012

Новый 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, ...)).

3 голосов
/ 11 мая 2013

Если вы не хотите покупать CKFinder, как я не хотел покупать CKFinder, то я написал очень надежный загрузчик для CKEditor 4. Он состоит из второй формы, размещенной непосредственно над формой textarea, и использует взлом iframe, который, несмотря на свое название, является бесшовным и ненавязчивым.

После того, как изображение успешно загружено, оно появится в вашем окне 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><br />
<textarea name="editor" id="editor"></textarea><br />
<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");
}
?>

2 голосов
/ 12 ноября 2018

В CKeditor версии 4 редактор ожидает JSON от сервера. В более старой версии может потребоваться ответ типа text / html с фрагментом javascript. См. Эту ссылку для объяснения этого Объяснение форматов возврата . На стороне сервера, и если вы используете 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 необходимо установить нестандартным способом. Вот как это сделать

Также обратите внимание, что вы можете изменить тип публикации в файле config.js на config.filebrowserUploadMethod = 'form'; , в отличие от config.filebrowserUploadMethod = 'xhr';

2 голосов
/ 31 августа 2012

Моя последняя проблема заключалась в том, как интегрировать CKFinder для загрузки изображений в CKEditor. Здесь решение.

  1. Загрузите CKEditor и извлеките его в корневой каталог вашей веб-папки.

  2. Загрузите CKFinder и извлеките его из папки ckeditor.

  3. Затем добавьте ссылки на CKEditor, CKFinder и поместите

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

    на страницу aspx.

  4. В коде позади страницы событие OnLoad добавить этот фрагмент кода

    protected override void OnLoad(EventArgs e)
    {
      CKFinder.FileBrowser _FileBrowser = new CKFinder.FileBrowser();
      _FileBrowser.BasePath = "ckeditor/ckfinder/";
      _FileBrowser.SetupCKEditor(CKEditorControl1);
    }
    
  5. Редактировать файл Confic.ascx.

    public override bool CheckAuthentication()
    {
      return true;
    }
    
    // Perform additional checks for image files.
    SecureImageUploads = true;
    

( источник )

1 голос
/ 24 июня 2015

Для тех, у кого такая же проблема в Grails, плагин ckeditor Give

filebrowserUploadUrl: '/ YourAppName / ck / ofm'

для вызова функции, которая обрабатывает изображение uploade.Если вы хотите использовать свою собственную функцию, вы можете указать путь к этому файлу.

0 голосов
/ 26 июля 2018

Вы можете использовать этот код

     <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>
0 голосов
/ 14 июня 2017

Недавно мне тоже нужен был ответ на этот вопрос, и мне потребовалось несколько часов, чтобы понять его, поэтому я решил воскресить этот вопрос с более актуальной информацией и полным ответом.

В конце концов я наткнулся на этот урок , который объяснил мне это довольно хорошо. Ради стека, я повторю здесь учебник на случай, если он будет удален. Я также включу некоторые изменения, которые я внес в учебник, чтобы сделать это более гибким решением.


Начало работы

Давайте начнем с любого из выпусков ckeditor (базового, стандартного, полного, пользовательского). Единственное требование - наличие дополнения image и filebrowser

(На момент написания этой статьи все пакеты включали эти 2 дополнения, кроме основного, но его можно добавить к основному)

После загрузки необходимых файлов 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-адрес находится в корневом каталоге вашего проекта. Независимо от того, откуда вы загружаете этот файл, он будет начинаться с индекса вашего сайта. Это означает, что если ваш URL-адрес example.com, этот URL ведет к http://example.com/uploader/upload.php

После этого настройка CKEditor завершена! Это было легко, а?

На самом деле, если вы сейчас снова протестируете загрузку своего изображения, вы получите опцию загрузки, хотя она пока не совсем работает.

enter image description here


Конфигурация сервера

Теперь на шаге перед этим вы заметите, что он заканчивается файлом upload.php. Это та часть, которая поставила меня в тупик, я подумал, что будет какой-то дефолт, который может пойти с этим, но, насколько я знаю, нет. К счастью, я нашел тот, который работает, и внес в него некоторые изменения, чтобы сделать возможной дополнительную настройку.

Итак, давайте перейдем к пути, который вы указали на последнем шаге, для преемственности в этом уроке я собираюсь использовать /uploader/upload.php.

В этом месте создайте файл с именем (как вы уже догадались) upload.php.

Этот файл будет обрабатывать наши загрузки файлов.

Я добавлю свой пользовательский класс загрузки, но он основан на этом 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) (НЕ РЕКОМЕНДУЕТСЯ)

Вам также необходимо отредактировать переменные $basePath и $baseUrl в соответствии с потребностями ваших серверов, иначе это не будет работать. Все, что ниже, можно оставить в покое, если вы не хотите поиграть.

Этот класс не предлагает защиту файлов, вы можете поработать с ним, чтобы сделать его более безопасным, чтобы люди не могли загружать скрипты или вирусы на ваш сервер.


Я надеюсь, что это небольшое руководство помогло кому-то, так как я слишком долго работал над тем, чтобы заставить его работать на себя, и я надеюсь, что смогу спасти кого-то еще.

В этом учебном пособии, к которому я привел ссылку, есть несколько полезных шагов по устранению неполадок, которые могут помочь вам найти, что идет не так, если что-то происходит.

enter image description here

0 голосов
/ 27 августа 2013

Чтобы загрузить изображение простым перетаскиванием с рабочего стола или из любого места, вы можете добиться этого, скопировав изображение и вставив его в текстовую область, используя Ctrl + V

.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...