В небольших проектах, где требуется минимальный функционал от wysiwyg редактора, я использую стандартную версию Ckeditor . ckeditor позволяет вставлять в текст изображения, загружая их перед этим на сервер. Обычно этим занимается файловый менеджер, который открывается при нажатии на кнопку "Обзор файлов"
Но иногда функционал файлового менеджера избыточен. Требуется просто выбрать файл на компьютере, загрузить его и вставить в текст. Для этого используется плагин uploadimage , который необходимо подключить к ckeditor. Удобно сразу сконфигурировать ckeditor с этим плагином, чтобы не мучаться с разрешением зависимостей этого плагина. Uploadimage добавляет новую вкладку в окно вставки изображения.
Чтобы плагин заработал, нужно в конфигурационном файле ckeditor config.js необходимо прописать путь до обработчика загрузок изображений на сервере.
public/ckeditor/config.js
Config.filebrowserUploadUrl = "/upload-image";
На этом настройка ckeditor завершена. Теперь реализуем функционал загрузки на сервере. Добавим новый роут в файле web.php . Для упрощения и наглядности, код загрузки изображения я не буду выносить в отдельный контроллер, а напишу прямо роутах.
routes/web.php
Route::post("upload-image", function(\Illuminate\Http\Request $request, Illuminate\Contracts\Validation\Factory $validator) { $v = $validator->make($request->all(), [ "upload" => "required|image", ]); $funcNum = $request->input("CKEditorFuncNum"); if ($v->fails()) { return response(" window.parent.CKEDITOR.tools.callFunction({$funcNum}, "", "{$v->errors()->first()}"); "); } $image = $request->file("upload"); $image->store("public/uploads"); $url = asset("storage/uploads/".$image->hashName()); return response(" window.parent.CKEDITOR.tools.callFunction({$funcNum}, "{$url}", "Изображение успешно загружено"); "); });
Т.к. ckeditor присылает изображение POST запросом, а laravel проверяет CSRF токен, который ckeditor не передаёт, необходимо вписать только что созданный роут в исключения, чтобы laravel не проверял token:
app/Http/Middleware/VerifyCsrfToken.php
Теперь ваш файл допустит к загрузке только изображения PNG и JPEG не превышающие 2 Мб (Сделано в плане безопасности). Также можете разобраться в коде и поменять всё на своё усмотрение.
Смое главное поменяйте в коде следующее:
В строке move_uploaded_file($_FILES["upload"]["tmp_name"], "images/".$name); поменяйте images/ на папку, куда будут загружаться изображения относительно файла upload.php .
Кроме того укажите в переменной $full_path поменяйте http://сайт/images/ на свой абсолютный путь к папке с загруженными изображениями.
4. На этом всё. Теперь загрузка картинок в CKeditor перестала быть проблемой. Если вы считаете сложным обработчик и хотите видеть здесь ещё и "лёгкую" версию, в которой можно загружать всё, напишите в комментариях.
Обычно WYSIWYG редактор требуется когда необходимо написать админку, в которой обычному пользователю не знающему html, будет легко и удобно добавлять собственные тексты. Так было и в моем случае.
Скачиваем CKEditor с официального сайта: скачать ckeditor
Скачиваем бесплатный файл менеджер KCFinder: скачать kcfinder
Стандартным способом интегрируем CKEditor на сайт. Добавляем на страницу скрипт ckeditor.js (в моем случае скрипт лежит в корне сайта в каталоге ckeditor). KCFinder я распаковал в папку ckeditor, просто для удобства.
Пусть на странице имеется поле textarea которое нужно заменить WYSIWYG редактором:
CKEDITOR.replace("ckeditor");
Далее нам необходимо указать настройки в ckeditor для того чтоб при нажатии на кнопку «загрузить файл» или просмотреть файлы на сервере открывался KCFinder, для этого добавляем в CKEDITOR.replace следующие настройки:
CKEDITOR.replace("ckeditor",{"filebrowserBrowseUrl":"/ckeditor/kcfinder/browse.php?type=files", "filebrowserImageBrowseUrl":"/ckeditor/kcfinder/browse.php?type=images", "filebrowserFlashBrowseUrl":"/ckeditor/kcfinder/browse.php?type=flash", "filebrowserUploadUrl":"/ckeditor/kcfinder/upload.php?type=files", "filebrowserImageUploadUrl":"/ckeditor/kcfinder/upload.php?type=images", "filebrowserFlashUploadUrl":"/ckeditor/kcfinder/upload.php?type=flash"});
В каталоге /ckeditor/kcfinder/ есть скрипт с конфигурацией config.php, там необходимо указать путь к папке в которую будут загружаться добавленные файлы (не забудьте посмотреть чтоб директория была доступна для записи).
Кажется что все работает, но есть еще несколько моментов касающихся настроек форматирования кода в CKEditor, мне например не нравится что при нажатии на клавишу enter в редакторе, текст заключается в тег
Так же этот тег постоянно записывается когда пытаемся сохранить пустое поле с подключенным редактором. Чтоб это исправить добавляем небольшой скрипт:
If(typeof CKEDITOR !== "undefined") { CKEDITOR.on("instanceReady", function(ev) { // Output paragraphs as . ev.editor.dataProcessor.writer.setRules("*", { indent: false, breakBeforeOpen: true, breakAfterOpen: false, breakBeforeClose: false, breakAfterClose: true }); }); }
Убрали автозаполнения тегом
Теперь уберем заключение текста в данный тег при нажатии на enter. Для этого допишем следующие настройки в файл конфигурации /ckeditor/config.js :
// при нажатии enter добавляем br config.enterMode = CKEDITOR.ENTER_BR; config.shiftEnterMode = CKEDITOR.ENTER_BR;
Если кажется что последние две строчки кода не помогают решению проблемы, очистите кеш браузера и повторите тестирование, все должно работать. Таким образом ваш редактор CKEditor c файловым менеджером KCFinder готов к работе, и выглядит очень даже не плохо.
Дополнительную информацию по настройке конфигурации можно посмотреть на официальных сайтах редакторов.
Исходное сообщение supportСамое простое добавление изображения в любое место поста – с помощью кнопки расширенного редактора CKEditor (или FCKEditor). Для добавления изображения таким способом нужно поставить курсор в нужное место текста, нажать кнопку «Изображение», выбрать на компьютере файл и загрузить его.
Самое подробное пояснение загрузки картинок с помощью расширенного редактора Liveinternet
На рисунке внизу: 1 – кнопка «Изображение» редактора CKEditor, 2 – место, куда поставлен курсор мыши.
При нажатии на кнопку «Изображение» откроется окошко «Свойства изображения». Выберите вкладку «Закачать» и нажмите кнопку «Обзор».
Выберите нужное изображения (кликните на него левой кнопкой мыши) и нажмите кнопку «Открыть». Также можно просто дважды кликнуть на изображение, без использования кнопки «Открыть».
Нажмите кнопку «Отправить на сервер»
Сообщается, что файл загружен и был переименован каким-то образом. Например, в браузере Opera сообщение выглядит примерно так:
Нажмите кнопку «ОК».
Откроется окошко «Информация о изображении», которое рассмотрим подробно.
URL – временный адрес изображения на сервере сайта, который поменяется после публикации поста;
Альтернативный адрес – можете написать описание изображения, которое увидят поисковые роботы и пользователи, отключившие показ картинок в своем браузере;
Ширина и Высота изображения, можно менять по своему усмотрению. При этом, если использовать значок замка, то сохраняться пропорции, если нажать круговую стрелочку – размеры будут возвращены к исходным;
Бордюр – рамочка по краю картинки (ширина в пикселях);
Горизонтальный и Вертикальный отступы – расстояние от края картинки до соседних элементов (текста, других изображений и т.д.) по высоте и ширине поста;
Выравнивание – размещение картинки в тексте, слева, справа, по центру и так далее;
Preview – предпросмотр загруженной картинки.
Изображение вставится в то место поста, где находился курсор – его всегда можно переместить, при желании.
Если нужно, повторите загрузку для других изображений, которые хотите вставить в текст поста.
Ниже, в блоке «Дополнительно», отметьте галочкой или снимите ее в пунктах «Подписать картинку» и «Разворачивать картинку».
P.S. В мобильном liveinternet кнопки добавления выглядят примерно так:
Спасибо очень полезная информация!!!
