Как установить и использовать CKEditor в Laravel
Вы хотите установить CKEditor в Laravel? CKEditor — это WYSIWYG (то есть то, что вы видите) HTML-редактор, который позволяет нам писать форматы RTF. В этой статье я покажу вам, как установить и использовать CKEditor в Laravel.
Зачем нужно использовать CKEditor?
Редактор форматированного текста необходим для написания богатого контента для ваших страниц или статей. На веб-странице нам нужны разные элементы, такие как изображения, абзацы, ссылки и т.д. Все эти различные элементы могут быть добавлены с помощью CKEditor.
HTML предоставляет элемент textarea для написания описания. Но у него есть ограничения. В textarea непросто и удобно писать другие элементы HTML, такие как p, div, img и т.д.
Чтобы преодолеть такие ограничения, вы можете использовать CKEditor, который сам по себе является редактором форматированного текста. Наш последний редактор будет выглядеть как на скриншоте ниже.
Установите CKEditor в Laravel
Есть 2 способа установить CKEditor в Laravel — CDN или пакет CKEditor. Вы можете получить оба ресурса на их странице загрузки.
Ссылка CDN есть //cdn.ckeditor.com/4.14.0/standard/ckeditor.js. Если вы выбираете CDN, вам не нужно ничего скачивать с веб-сайта CKEditor.
Если вы собираетесь установить его без CDN, загрузите пакет (рекомендуется стандартный пакет). Затем создайте папку ckeditor в общедоступном каталоге вашего проекта Laravel. И внутри этой папки ckeditor скопируйте ниже файлы и папки из загруженного пакета.
Как использовать CKEditor
На этом этапе вы выполнили шаги по установке пакета CKEditor. Теперь посмотрим, как использовать CKEditor.
Допустим, у вас есть «текстовое поле», которое следует заменить CKEditor. Для этого я добавляю id «summary-ckeditor» в «textarea».
<textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea>Затем вам нужно включить ckeditor.jsфайл и написать код JavaScript, который заменяет textarea на CKEditor.
<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>Вышеупомянутый код JavaScript заменяет textarea на CKEditor. Если вы хотите использовать CDN, то приведенный выше код будет следующим:
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'summary-ckeditor' );
</script>Запустите свою страницу в браузере, и теперь вы должны увидеть CKeditor. Теперь вы можете добавить свой контент в редактор и использовать его на своем веб-сайте.
Загрузить и вставить изображение в CKEditor
CKEditor по умолчанию не дает возможности загрузить изображение. Если кто-то хочет предоставить эту возможность, продолжайте читать эту статью. Ему нужно добавить маршрут Laravel, написать код для загрузки изображения и немного JavaScript в ваше приложение. Во-первых, чтобы включить опцию загрузки изображения, вам нужно вызвать CKEditor следующим образом.
<script>
CKEDITOR.replace( 'summary-ckeditor', {
filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
filebrowserUploadMethod: 'form'
});
</script>Здесь для ключа filebrowserUploadUrlя передал URL-адрес маршрута и токен csrf. Определим маршрут загрузки.
Route::post('ckeditor/image_upload', 'CKEditorController@upload')->name('upload');Обновите страницу. Теперь, если вы нажмете на значок изображения CKEditor, вы увидите вариант загрузки изображения, как показано ниже.
Чтобы использовать загруженное изображение в CKEditor, вам необходимо загрузить изображение в папку вашего приложения и отправить обратно URL-адрес изображения. Для хранения изображения на сервере я буду использовать функцию хранилища Laravel. Итак, сначала мне нужно создать символическую ссылку на папку «хранилище». Выполните команду ниже, чтобы создать символическую ссылку:
php artisan storage:linkНаша карта маршрута ‘выгрузка’ с методом загрузки CKEditorController. Итак, создайте контроллер CKEditorControllerи определите uploadв нем метод следующим образом:
<?php
namespace AppHttpControllers;
use IlluminateHttpRequest;
class CKEditorController extends Controller
{
public function upload(Request $request)
{
if($request->hasFile('upload')) {
//get filename with extension
$filenamewithextension = $request->file('upload')->getClientOriginalName();
//get filename without extension
$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
//get file extension
$extension = $request->file('upload')->getClientOriginalExtension();
//filename to store
$filenametostore = $filename.'_'.time().'.'.$extension;
//Upload File
$request->file('upload')->storeAs('public/uploads', $filenametostore);
$CKEditorFuncNum = $request->input('CKEditorFuncNum');
$url = asset('storage/uploads/'.$filenametostore);
$msg = 'Image successfully uploaded';
$re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
// Render HTML output
@header('Content-type: text/html; charset=utf-8');
echo $re;
}
}
}Вот и все, теперь попробуйте загрузить изображение из встроенной опции изображения CKEditor, и вы получите изображение, добавленное в свой редактор.
Надеюсь, вы понимаете, как установить и использовать CKEditor в Laravel. Пожалуйста, поделитесь своими мыслями и предложениями в комментарии ниже.