Laravel CKEditor5 - ClassicEditor 未定義
[英]Laravel CKEditor5 - ClassicEditor is not Defined
問題描述
由於與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')的頁面會導致以下結果：
未捕獲的 ReferenceError：未定義 ClassicEditor
如果我從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>
我做錯了什么，但我不知所措......以前有人見過這個問題嗎？
4 個解決方案
解決方案1
4 2020-02-14 21:15:07
關於 Laravel 在boostrap.js文件中包含的庫示例，例如pusher 、 axios等...
您可以使用
window.ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
$(document).ready(function(){
ClassicEditor.create($('#edit_about_text').get()[0]);
});
解決方案2
2 已采納 2020-02-14 21:12:04
文檔未能引用的相當簡單的解決方案，但您需要將require()的值分配給ClassicEditor ：
var ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
這樣做可以在代碼中正確引用。
解決方案3
1 2020-07-26 17:46:52
以前的答案對我幫助很大。 但對我來說，我必須做一些額外的工作才能讓它發揮作用。 所以我在這里分享給來訪的用戶。
- 我的 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
0 2021-04-07 22:51:46
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); }); });
CKeditor在Laravel中返回“未定義CKEditor”
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.