Laravel CKEditor5 - ClassicEditor не определен

Я пытаюсь заменить старую версию CKEditor в приложении Laravel из-за несовместимости зависимостей с unisharp/laravel-ckeditor и Laravel 6. Я нашел страницу CKEditor 5 с инструкциями по установке NPM, но не смог заставить ее работать. Вот мой код:

resources/main.js

require('@ckeditor/ckeditor5-build-classic');

$(document).ready(function(){
  ClassicEditor.create($('#edit_about_text').get()[0]);
});

webpack.mix.js

mix.js('resources/assets/js/main.js', 'public/js');

layouts/master.blade.php

<!doctype html>
<html>
  <head></head>
<body>
  <script src="{{ asset('js/main.js') }}"></script>
</body>
</html>

jQuery включен (каким-то образом; несколько незнаком с webpack), но запуск страницы, расширяющей @extends('layouts.master'), приводит к следующему:

Uncaught ReferenceError: ClassicEditor не определен

Если я уберу оператор require() из main.js и просто воспользуюсь ссылкой CDN, все будет работать так, как ожидалось:

<script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"></script>
<script src="{{ asset('js/main.js') }}"></script>

Я делаю что-то не так, но я в недоумении... Кто-нибудь видел эту проблему раньше?


webpack php laravel ckeditor5 laravel-6
person Tim Lewis    schedule 14.02.2020    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Что касается примеров библиотек Laravel, включенных в файл boostrap.js, таких как pusher, axios и т. д....

Вы можете использовать

window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');

$(document).ready(function(){
  ClassicEditor.create($('#edit_about_text').get()[0]);
});
person Foued MOUSSI    schedule 14.02.2020
comment
не забудьте добавить mix.combine([ 'node_modules/jquery/dist/jquery.js' ],'public/js/jquery.js'); в webpack.mix.js и включите jquery. в противном случае будет выдана ошибка $ не определена. - person aimme; 26.07.2020

arrow_upward
1
arrow_downward

Довольно простое решение, на которое не ссылается документация, но вам нужно присвоить значение require() ClassicEditor:

var ClassicEditor = require('@ckeditor/ckeditor5-build-classic');

Это позволяет правильно ссылаться в коде.

person Tim Lewis    schedule 14.02.2020

arrow_upward
1
arrow_downward

Предыдущие ответы мне очень помогли. Но для меня мне пришлось сделать некоторые дополнительные работы, чтобы заставить его работать. Поэтому я делюсь этим здесь для посетителей.

  • В моей версии Laravel не был загружен jquery, поэтому пришлось его загрузить.
  • Я не хотел добавлять ckeditor в свой пакет app.js, так как он будет использоваться на одной странице моего сайта. Поэтому хотел загрузить его только для этой страницы

создал новый файл ckeditor.js в папке resources/js/ со следующим содержимым

window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');

добавил созданный файл и jquery в webpack.mix.js для компиляции. Если вы хотите, вы можете объединить в один файл, но это не будет хорошо, если вы хотите использовать jquery для других целей.

mix.combine([
    'node_modules/jquery/dist/jquery.js'
    //here you can include more files to combine, or can combine ckeditor file here as well
],'public/js/jquery.js');

mix.js('resources/js/ckeditor.js', 'public/js/ckeditor.js');

загрузил скомпилированный на страницу. Предполагая, что вы используете шаблон блейда, расширяющий основной файл блейда, который имеет внутренний тег заголовка @yield('page-head-scripts'). Для этого шага есть и другие подходы, я так и сделал.

@section('page-head-scripts')
      <script src="{{ asset('js/jquery.js') }}"></script>
      <script src="{{ asset('js/ckeditor.js') }}"></script>
@endsection

Добавьте код создания редактора на страницу. Предположим, что вы используете шаблон блейда, расширяющий основной файл блейда, который имеет @yield('page-last-scripts') конец главной страницы. Для этого шага есть и другие подходы, я так и сделал.

@section('page-last-scripts')
<script type="text/javascript">

$(document).ready(function(){

  //ClassicEditor.create($('#edit_about_text').get()[0]); this or below part.
  //to elobrate I have added more codes
  ClassicEditor.create( document.querySelector( '#editor' ), {
        toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        heading: {
            options: [
                { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
            ]
        }
    } )
    .catch( error => {
        console.log( error );
    } );

});

</script>
@endsection
person aimme    schedule 26.07.2020
comment
Спасибо за отличное объяснение всех необходимых шагов :) Я (очевидно) позволил себе некоторые вольности, предполагая, что уже было сделано (поскольку они были для моей ситуации), но определенно полезно показать полный подход. Спасибо! - person Tim Lewis; 27.07.2020