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

благодаря

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

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

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

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

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

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

В новом 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, …)).

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

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

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

     Content Editor              
is changed.
Insert image:   
Site:  Page: 


направо Content Editor
is changed.
Insert image:   
Site:  Page: 


И вот страница действия, editaction.php , которая делает фактическую загрузку файла:

  $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"); } ?> 

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

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

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

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

       

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

  4. В коде за страницей Событие OnLoad добавьте этот fragment кода

     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; 

( источник )

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

filebrowserUploadUrl: ‘/ YourAppName / ск / ФОМ’

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

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

Как вы можете интегрировать пользовательский файловый браузер / загрузчик с CKEditor?

Смотрите также:

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

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

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


Начиная

Давайте начнем с любого из выпусков ckeditor, (Basic, standard, full, custom), единственное требование – у вас есть аддон- образ и файловый браузер

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

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

Убедитесь, что вы связали свой скрипт ckeditor.js а затем инициализируйте его следующим образом:

 $(document).ready(function() { CKEDITOR.replace( 'editor1' ); });  

Конфигурация 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 .

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

Я положу свой пользовательский class загрузки, но он основан на этом github, который я нашел и раздвоил.

upload.php:

  window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')"; ?> в  window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message')"; ?> 

Изменения, внесенные в этот class, позволяют включать / отключать перезаписи файлов и предоставляют некоторые параметры, когда вы не хотите перезаписывать файлы. Первоначальный class всегда перезаписывает без параметров.

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

Если вы заметите, есть раздел кода, который является просто оператором if(true) , который всегда истинен, очевидно

 if (true) { echo("You're not allowed to upload files"); die(0); } 

Это для безопасности. Здесь вы должны проверить, зарегистрирована ли загрузка пользователя / разрешена загрузка. Если вас это не беспокоит, вы можете просто удалить эти строки кода или установить его, if(false) (НЕ РЕКОМЕНДУЕТСЯ)

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

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


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

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

введите описание изображения здесь

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

   

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

Давайте будем гением компьютера.