Laravel CKEditor5 - ClassicEditor 未定义

Question

由于与 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 link，一切都会按预期工作：

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

我做错了什么，但我很茫然...有没有人以前见过这个问题？

Answer 1

非常简单的解决方案，文档未能引用，但您需要将 require() 的值分配给 ClassicEditor:

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

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

Answer 2

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

您可以使用

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

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

Answer 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');

加载编译到页面。假设您正在使用扩展主 blade 文件的 blade 模板，该文件在 head 标签内有一个 @yield('page-head-scripts') 。这一步还有其他方法，我是这样的。

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

将编辑器创建代码添加到页面。假设您正在使用 blade 模板扩展主 blade 文件，该文件的主页末尾为 @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

Answer 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);
        });
});

Laravel CKEditor5 - ClassicEditor 未定义

Laravel CKEditor5 - ClassicEditor is not Defined

php

laravel

webpack

laravel-6

ckeditor5