先F12查看【网络】是不是有些文件无法加载，这种情况下是没有在public目录下建立storage的link

运行以下命令后，在public目录下生成软连接，然后再试一下是否正常加载所有文件。

php artisan storage:link

实际上通过https://ckeditor.com/ckeditor-5/online-builder/可以解决大部分安装插件问题，记得去掉默认选中的ckbox，

这是付费插件， ``` 其次，选择的都是免费插件时，可以直接下载不需要其他步骤。 我是在laravel项目中cdn方式导入ckeditor的，在线构建更方便。

 以下是自定义构建方法

Here is an issue regarding this https://github.com/ckeditor/ckeditor5-angular/issues/134. You need to create your custom CKEditor build and include necessary plugins into it. Here is the guide: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html BTW I suggest you to use CKEditor 5, the latest version.

1. Clone the original repo:

git clone https://github.com/ckeditor/ckeditor5-build-classic.git

1. Install dependencies

npm install

1. Install necessary plugin itself

npm install --save @wiris/mathtype-ckeditor5

1. Open src/ckeditor.js and new plugin to the editor:

...
import MathType from '@wiris/mathtype-ckeditor5';
...

ClassicEditor.builtinPlugins = [
   ...
   MathType
];

ClassicEditor.defaultConfig = {
    toolbar: {
        items: [
            ...
            'MathType',
            ...
        ]
    },
    ...
};

1. Then build the editor (you maybe need to install yarn)

yarn run build

1. After that copy everything from build folder to your project. For instance

src/assets/js/ck-editor-math-type/
   -> translations
      -> ...
   -> ckeditor.js

1. Add ckeditor code to package.json

"dependencies": {
   ...
   "@ckeditor/ckeditor5-angular": "^1.1.2",
   ...
}

1. Import CKEditor to your component:

import * as ClassicEditor from '../../assets/js/ck-editor-math-type/ckeditor.js';

...
export class CkeditComponent implements OnInit {

    public Editor = ClassicEditor;

    public model = {
        editorData: '<p>Hello, world!</p>'
    };
}

1. Add it too your template.html

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

After step 7

Add ckeditor code to package.json "dependencies": { ... "@ckeditor/ckeditor5-angular": "^1.1.2", ... }

Step 8:

npm install

step 9:

In app.module.ts file you can add

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { FormsModule } from '@angular/forms'; 
import { ReactiveFormsModule } from '@angular/forms'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    CKEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

step 10: In file tsconfig.json add allowJs: ture

"compilerOptions": {
    "allowJs": true,
}

step 11:

Import CKEditor to your component:

import * as ClassicEditor from '../../assets/js/ck-editor-math-type/ckeditor.js';

...
export class CkeditComponent implements OnInit {

    public Editor = ClassicEditor;

    public model = {
        editorData: '<p>Hello, world!</p>'
    };
}

step 12:

Add it too your template.html

<ckeditor [(ngModel)]="model.editorData" [editor]="Editor"></ckeditor>

backpack中ckeditor是pro版本才有的组件，只能自己手动集成，以下是示例代码。

{{-- load the view from the application if it exists, otherwise load the one in the package --}}

            <input type="hidden" class="form-control" name="id" value="{{ $crud->fields()['id']['value'] }}" />

            <div class="mb-3">

                <label class="form-label">Title</label>

                <input type="text" class="form-control" name="title" value="{{ $crud->fields()['title']['value'] }}" />

            </div>

            <textarea name="content" id="editor">

            {{ $crud->fields()['content']['value'] }}

            </textarea>

            {{-- This makes sure that all field assets are loaded. --}}

以下是JavaScript引入ckeditor部分

<script src="/assets/ckeditor5-build-classic-38.1.1/ckeditor5-build-classic/ckeditor.js"></script>

<script>

    ClassicEditor

        .create(document.querySelector('#editor'))

        .catch(error => {

            console.error(error);

        });

</script>