...
WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Как установить и использовать CKEditor в Laravel

946

Вы хотите установить CKEditor в Laravel? CKEditor – это WYSIWYG (то есть то, что вы видите) HTML-редактор, который позволяет нам писать форматы RTF. В этой статье я покажу вам, как установить и использовать CKEditor в Laravel.

Зачем нужно использовать CKEditor?

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

HTML предоставляет элемент textarea для написания описания. Но у него есть ограничения. В textarea непросто и удобно писать другие элементы HTML, такие как p, div, img и т.д.

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

Как установить и использовать CKEditor в Laravel

Установите CKEditor в Laravel

Есть 2 способа установить CKEditor в Laravel – CDN или пакет CKEditor. Вы можете получить оба ресурса на их странице загрузки.

Ссылка CDN есть //cdn.ckeditor.com/4.14.0/standard/ckeditor.js. Если вы выбираете CDN, вам не нужно ничего скачивать с веб-сайта CKEditor.

Если вы собираетесь установить его без CDN, загрузите пакет (рекомендуется стандартный пакет). Затем создайте папку ckeditor в общедоступном каталоге вашего проекта Laravel. И внутри этой папки ckeditor скопируйте ниже файлы и папки из загруженного пакета.

Как установить и использовать CKEditor в Laravel

Как использовать 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 в Laravel

Чтобы использовать загруженное изображение в 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. Пожалуйста, поделитесь своими мыслями и предложениями в комментарии ниже.

Статьи по Теме

Источник записи: artisansweb.net

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