Дополнительно
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, чтобы этот процесс работал?
Спасибо
36
12
URL должен указывать на ваш собственный пользовательский адрес файлового браузера, который вы можете иметь.
Я уже сделал это в одном из своих проектов и опубликовал учебник на эту тему в своем блоге
http://www.mixedwaves.com/2010/02/integrating-fckeditor-filemanager-in-ckeditor/
В руководстве даются пошаговые инструкции о том, как интегрировать встроенный FileBrowser из FCKEditor в CKEditor, если вы не хотите создавать свой собственный. Это довольно просто.
Может быть, уже слишком поздно. Ваш код правильный, поэтому, пожалуйста, проверьте ваш URL в filebrowserUploadUrl
И файл Upload.php
Новый CKeditor не включает файловый менеджер (CKFinder подлежит оплате). Вы можете интегрировать бесплатный файловый менеджер, который хорошо выглядит и прост в реализации в CKeditor.
http://labs.corefive.com/2009/10/30/an-open-file-manager-for-ckeditor-3-0/
Вы загружаете его, копируете в свой проект. Все инструкции есть, но вы просто вставляете путь к добавленной странице filemanager index.html в свой код.
Поддерживается большинство языков (php, asp, MVC & aspx - aschx,...)).
Если вы не хотите покупать CKFinder, как я не хотел покупать CKFinder, я написал очень надежный загрузчик для CKEditor 4. Он состоит из второй формы, расположенной непосредственно над формой текстовой области, и использует взлом iframe, который, несмотря на свое название, является бесшовным и ненавязчивым.
После успешной загрузки изображения оно появится в окне CKEditor вместе с любым контентом, который уже есть.
editor.php (страница формы):
А вот страница действий editaction.php , которая выполняет фактическую загрузку файла:
& Лт; / html >
Моя последняя проблема заключалась в том, как интегрировать CKFinder для загрузки изображений в CKEditor. Вот решение.
Скачайте CKEditor и распакуйте в корневой каталог вашей веб-папки.
Скачайте CKFinder и распакуйте в папку ckeditor.
Затем добавьте ссылки на CKEditor, CKFinder и поставьте
в вашу aspx-страницу.
В коде за событием OnLoad страницы добавьте этот фрагмент кода
Отредактируйте файл Confic.ascx.
(source)
С CKeditor версии 4 редактор ожидает JSON взамен со стороны сервера. Для более старой версии может потребоваться ответ типа text / html с фрагментом javascript. См. Эту ссылку для объяснения этого Объяснение форматов возврата. На стороне сервера, и если вы используете C #, вы можете создать модель данных, как это:
И верните результат из вашей процедуры загрузки с этим:
Хотя .net, скорее всего, делает json из этого автоматически, убедитесь, что вы возвращаете приложение / json типа контента.
В качестве примечания для тех, кто хочет проверить, действительно ли загруженный файл является файлом изображения; если вы используете ядро Asp.net, библиотеку system.drawing необходимо установить нестандартным способом. Вот как это сделать
Также обратите внимание, что вы можете изменить тип публикации в файле config.js на config.filebrowserUploadMethod = 'form'; , в отличие от config.filebrowserUploadMethod = 'xhr';
Эта простая демонстрация может помочь вам получить то, что вы хотите. Вот код html / php, с которого вы хотите загрузить изображение:
и вот код для файла upload.php.
Примечание. Не забудьте создать папку «загрузить» в одной папке и сохранить все три файла в одном каталоге. Позже вы можете изменить их каталоги, как только поймете, как это работает. Также не забудьте нажать отправить его на сервер, как показано на рисунке ниже.
Для тех же есть проблема в Grails ckeditor plugin Give
filebrowserUploadUrl: '/ YourAppName / ck / ofm'
чтобы вызвать функцию, которая обрабатывает изображение uploade.Если вы хотите использовать свою собственную настраиваемую функцию, вы можете указать этот путь к файлу.
Недавно мне также понадобился ответ на этот вопрос, и мне потребовалось несколько часов, чтобы понять его, поэтому я решил воскресить этот вопрос с более актуальной информацией и полным ответом.
В конце концов я наткнулся на этот урок, который мне довольно хорошо объяснил. Ради стека, я повторю учебник здесь на случай, если он будет удален. Я также включу некоторые изменения, которые я внес в учебник, которые делают это более гибким решением.
Начало работы
Давайте начнем с любого из выпусков ckeditor (базовый, стандартный, полный, пользовательский), единственное требование - у вас есть аддон image и [filebrowser](http ://ckeditor.com/addon/filebrowser)
(На момент написания этого все пакеты включают эти 2 дополнения, за исключением основного, но его можно добавить к основному)
После загрузки необходимых файлов ckeditor убедитесь, что ваша установка работает.
Убедитесь, что вы связали свой скрипт файла ckeditor.js
< script src = "ckeditor / ckeditor.js" > < / script >
, а затем инициализируйте его так:Вы можете использовать этот код
Этот 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/
Чтобы загрузить изображение, просто перетащите его с рабочего стола или из любого места, где вы можете достичь этого, скопировав изображение и вставив его в текстовую область с помощью ctrl + v