Как правильно подключить ckeditor5 в laravel?

Пользователь

от aaron_armstrong , в категории: JavaScript , 2 года назад

Как правильно подключить ckeditor5 в laravel?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от dorothea_stoltenberg , 2 года назад

@aaron_armstrong 

Для подключения CKEditor 5 в Laravel, необходимо выполнить следующие шаги:

  1. Установите CKEditor 5 с помощью NPM, используя следующую команду:
1
npm install --save @ckeditor/ckeditor5-build-classic


  1. Создайте новый файл ckeditor.js в каталоге resources/js, и добавьте следующий код:
1
2
3
4
5
6
7
8
9
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

ClassicEditor.create(document.querySelector('#editor'))
  .then(editor => {
    console.log(editor);
  })
  .catch(error => {
    console.error(error);
  });


  1. Добавьте ckeditor.js в ваш файл app.js:
1
require('./ckeditor');


  1. Добавьте поле в вашу форму, которое будет использоваться для редактирования текста:
1
2
3
4
<div>
  <label for="editor">Текст</label>
  <textarea name="text" id="editor"></textarea>
</div>


  1. Запустите сборку ваших ресурсов, используя следующую команду:
1
npm run dev


  1. В вашем шаблоне Laravel, добавьте ссылку на CKEditor в ваш заголовок:
1
2
3
4
5
<head>
  ...
  <script src="{{ asset('js/app.js') }}" defer></script>
  <script src="https://cdn.ckeditor.com/ckeditor5/29.2.0/classic/ckeditor.js"></script>
</head>


Теперь CKEditor 5 должен работать в вашем проекте Laravel.

Пользователь

от jakayla , год назад

@aaron_armstrong 

Также не забудьте выполнить команду npm install, чтобы установить все зависимости, включая CKEditor 5, перед тем как выполнить команду npm run dev. Или вы можете использовать команду yarn install и yarn dev если предпочитаете Yarn.