CKEDITOR, Загрузка изображений (filebrowserUploadUrl)

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

Спасибо

Комментарии к вопросу (2)
Решение

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

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

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

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

Комментарии (13)

Может быть, уже слишком поздно. Ваш код правильный, поэтому, пожалуйста, проверьте ваш 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)

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

Комментарии (1)

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

После успешной загрузки изображения оно появится в окне CKEditor вместе с любым контентом, который уже есть.

editor.php (страница формы):

<?php
set_time_limit ( 3600 )
?>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Content Editor


<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 + "");
                    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>

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;
}




<?php
if(isset($_GET['r'])){ ?><div id="report">
<?php echo $_GET['r']; ?> is changed.
</div><?php
}
?>
<div id="formBox">

<input type="hidden" name="MAX_FILE_SIZE" value="50000000" />
<input type="hidden" name="filename" value="" />
Insert image: <input name="uploadedfile" type="file" class="textField" onchange="placePic();return false;" />  



<div id="field" >Site: <select name="site"  class="textField" onchange="loadContent();return false;">

    scubatortuga
    drytortugascharters
    keyscombo
    keywesttreasurehunters
    spearfishkeywest


    1
    2
    3
    4


</div>


А вот страница действий 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");
}
?>

& Лт; / html >

Комментарии (0)

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

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

  2. Скачайте CKFinder и распакуйте в папку ckeditor.

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

в вашу aspx-страницу.

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

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

     public override bool CheckAuthentication()
     {
       return true;
     }
    
     // Выполняем дополнительные проверки для файлов изображений.
     SecureImageUploads = true;

(source)

Комментарии (1)

С 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 из этого автоматически, убедитесь, что вы возвращаете приложение / json типа контента.

В качестве примечания для тех, кто хочет проверить, действительно ли загруженный файл является файлом изображения; если вы используете ядро Asp.net, библиотеку system.drawing необходимо установить нестандартным способом. Вот как это сделать

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

Комментарии (0)

Эта простая демонстрация может помочь вам получить то, что вы хотите. Вот код html / php, с которого вы хотите загрузить изображение:



 <script src="http://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>




<textarea rows="5" name="content" id="content">


<script>
 CKEDITOR.replace( 'content', {
  height: 300,
  filebrowserUploadUrl: "upload.php"
 });
</script>

и вот код для файла upload.php.

 <?php
if(isset($_FILES['upload']['name']))
{
 $file = $_FILES['upload']['tmp_name'];
 $file_name = $_FILES['upload']['name'];
 $file_name_array = explode(".", $file_name);
 $extension = end($file_name_array);
 //we want to save the image with timestamp and randomnumber
 $new_image_name = time() . rand(). '.' . $extension;
 chmod('upload', 0777);
 $allowed_extension = array("jpg", "gif", "png");
 if(in_array($extension, $allowed_extension))
 {
  move_uploaded_file($file, 'upload/' . $new_image_name);
  $function_number = $_GET['CKEditorFuncNum'];
  $url = 'upload/' . $new_image_name;
  $message = '';
  echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($function_number, '$url', '$message');</script>";
 }
}
?>

Примечание. Не забудьте создать папку «загрузить» в одной папке и сохранить все три файла в одном каталоге. Позже вы можете изменить их каталоги, как только поймете, как это работает. Также не забудьте нажать отправить его на сервер, как показано на рисунке ниже.

Комментарии (0)

Для тех же есть проблема в Grails ckeditor plugin Give

filebrowserUploadUrl: '/ YourAppName / ck / ofm'

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

Комментарии (0)

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

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


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

Давайте начнем с любого из выпусков ckeditor (базовый, стандартный, полный, пользовательский), единственное требование - у вас есть аддон image и [filebrowser](http ://ckeditor.com/addon/filebrowser)

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

После загрузки необходимых файлов ckeditor убедитесь, что ваша установка работает.

Убедитесь, что вы связали свой скрипт файла ckeditor.js < script src = "ckeditor / ckeditor.js" > < / script >, а затем инициализируйте его так:


$(document).ready(function() {
    CKEDITOR.replace( 'editor1' );
});
<textarea name="editor1">
Комментарии (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>
Комментарии (0)

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

https://stackoverflow.com/questions/1498628/how-can-you-integrate-a-custom-file-browser-uploader-with-ckeditor

См. также:

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

Комментарии (2)

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

Комментарии (1)