Laravel CKEditor5 - ClassicEditor 未定义答案

【问题标题】：Laravel CKEditor5 - ClassicEditor is not DefinedLaravel CKEditor5 - ClassicEditor 未定义
【发布时间】：2020-02-14 20:10:33
【问题描述】：

由于与 unisharp/laravel-ckeditor 和 Laravel 6 的依赖性不兼容，我正在尝试在 Laravel 应用程序中替换旧版本的 CKEditor。我找到了带有 NPM 安装说明的 CKEditor 5 页面，但无法让它工作。这是我的代码：

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 is not defined

如果我从main.js 中删除require() 语句并简单地使用CDN 链接，一切都会按预期工作：

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

我做错了什么，但我不知所措......以前有人见过这个问题吗？

【问题讨论】：

标签： php laravel webpack laravel-6 ckeditor5

【解决方案1】：

关于 Laravel 在 boostrap.js 文件中包含的库示例，例如 pusher、axios 等...

你可以使用

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

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

【讨论】：

记得添加 mix.combine([ 'node_modules/jquery/dist/jquery.js' ],'public/js/jquery.js');到 webpack.mix.js 并包含 jquery。否则会抛出 $ not defined 错误。

【解决方案2】：

相当简单的解决方案，文档未能引用，但需要将require()的值赋值给ClassicEditor：

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

这样做可以在代码中正确引用。

【讨论】：

如果我想导入一个库会怎样？例如“@ckeditor/ckeditor5-code-block/src/codeblock”？

【解决方案3】：

以前的答案对我帮助很大。但对我来说，我必须做一些额外的工作才能让它发挥作用。所以我在这里分享给来访的用户。

我的 Laravel 版本没有加载 jquery，所以必须加载它。
我不想将 ckeditor 添加到我的 app.js 包中，因为它将在我网站的单个页面中使用。所以只想为该页面加载它

在resources/js/ 文件夹中创建了新的ckeditor.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');

加载编译到页面。假设您正在使用刀片模板扩展主刀片文件，该文件在 head 标记内具有 @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

【讨论】：

为所有必需步骤的精彩解释干杯 :) 我（显然）冒昧地假设已经完成的事情（因为它们适用于我的情况），但展示出来绝对有帮助完整的方法。谢谢！

【解决方案4】：

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

document.querySelectorAll('[data-init-plugin="ckeditor"]').forEach(function (val) {
    ClassicEditor
        .create(val, {
            toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
        })
        .catch(error => {
            console.log(error);
        });
});

【讨论】：